J'ai fait un nouveau thème pour mon blog ! Ca faisait quelques temps que je bossais dessus, et là je suis enfin arrivé à quelque chose de satisfaisant (à mes yeux). Je l'ai sobrement intitulé "s427-gris". On reste dans un style plutôt sombre (anthracite, en l'occurence), et un peu plus dépouillé que le thème précédent. Question de goût, hein. Mais je me dis que pour le prochain thème, je vais essayer de faire quelque chose de plus clair. (Enfin, sous toute réserve ! C'est même pas sûr qu'il y ait un "prochain". ^^)

Un seul (gros) problème : ce nouveau thème ne fonctionne pas très bien avec Internet Explorer. Mais alors pas bien du tout. La raison en est une implémentation incomplète et buggée des feuilles de style de niveau 2 (CSS-2) par Internet Explorer, qui en plus de ça n'est pas capable d'afficher correctement la transparence des images PNG.

Il est possible d'écrire une feuille de style qui utilise ces effets (non supportés par IE) et qui donne quand même un résultat acceptable sur Internet Explorer, et je vais le faire... mais ça prend du temps. En gros, il faut écrire à double toutes les règles CSS problématiques : une fois pour Internet Explorer, et une fois pour les navigateurs plus à la pointe, en utilisant une notation qu'Internet Explorer ne comprend pas. De cette manière Internet Explorer utilise les premières règles, plus simples, et les autres navigateurs utilisent les règles plus sophistiquées (en fait ils utilisent toutes les règles, mais comme les règles "sophistiquées" viennent après les règles simples dans la feuille de style, elles "écrasent" les règles simples correspondantes, et le résultat donne l'impression que les règles simples ont été ignorées).

Voilà, donc je vais faire ça ces prochains jours (ou semaines), mais en attendant, les utilisateurs d'Internet Explorer ont intérêt à continuer d'utiliser le thème précédent (qui s'appelle, tenez-vous bien... "s427-bleu". Quel talent.).

C'est pour cette raison (et aussi pour laisser le choix aux gens, tous les goûts étant dans la nature) que j'ai intégré à mon blog un sélecteur de thème, tout nouveau, tout beau, qui permet (comme son nom l'indique) de sélectionner un thème. Vous le trouverez dans la barre latérale, sur la gauche, juste au-dessus de la Tribune Libre. Donc je vous encourage à tester les deux thèmes pour garder celui que vous préférez.

Il existe des tas de thèmes pour dotclear, développés par des tas de gens, alors pourquoi, me demanderez-vous, pourquoi diantre ne proposè-je pas plus de thèmes sur mon blog ? Ce n'est pas que je refuse d'utiliser sur mon blog un thème qui n'est pas le mien; le problème vient du fait que j'ai beaucoup personnalisé mon thème, en installant un certain nombre de "plug-ins". Par exemple "Tribune Libre", "On The Air", "Galerie", ou encore "Table des Matières". Chacune de ces extensions est intimement liée à mon thème (modification de la structure de la page, d'une part, et ajout de nombreuses règles de CSS d'autre part), et les thèmes fournis par d'autres personnes n'incluent pas ces extensions. Donc soit je vous propose des thèmes qui risquent de masquer certaines parties de mon blog (et ça j'ai pas envie), soit je dois adapter ces thèmes pour qu'ils prennent en compte ces extensions et pour que ces extensions s'intègrent harmonieusement aux différents thèmes. Ca c'est possible, mais c'est beaucoup de travail. Donc non. Donc voilà : il n'y aura que mes thèmes sur mon blog. Et pis vous pouvez déjà être content d'avoir le choix. ;)

Pour celles/ceux qui n'ont qu'un navigateur web sur leur ordi et qui souhaiteraient se faire une idée des différences de rendu entre Internet Explorer et Firefox sur mon nouveau thème, voici deux captures d'écran. A gauche, le thème s427-gris tel qu'il apparaît dans Firefox (version 1.0.6); à droite, tel qu'il apparaît dans Internet Explorer (version 6.0.2). Les deux images sont cliquables si vous voulez les voir en meilleure résolution.

Il ne s'agit vraiment que d'un aperçu, étant donné que ces images sont statiques et ne reflètent pas les différences de comportement des deux navigateurs dans leur interaction avec l'utilisateur (p.ex. lorsque la souris survole certain liens, ou lorsque la fenêtre défile verticalement). C'est difficile à croire, mais ce qui est laid peut devenir encore plus laid...

Je tiens à appuyer sur le fait que ces problèmes d'affichages sont bel et bien causés par Internet Explorer, et non pas par des erreurs de codage de ma part. Je ne prétends pas que je ne fais pas d'erreurs, il y en a peut-être, mais les bugs d'Internet Explorer sont bien connus, et reconnus par les développeurs de Microsoft eux-mêmes. En l'occurence, les images le montrent bien, le problème vient d'un problème de :

• positionnement des images de fond. IE ne supporte la propriété background-attachment="fixed" que pour le tag body; cette propriété devrait fonctionner avec la plupart des tags, ce qui est d'ailleurs le cas dans Firefox ou Opera.
• transparence des images PNG non supportée. Le format PNG est le format graphique le plus prometteur pour le web, car il permet de définir des zones de transparence d'intensité variable. On peut donc créer des images translucides, qui laissent voir ce qui se situe sous elles, des effets d'ombres etc. C'est ce que j'ai utilisé pour ce thème. Dans Internet Explorer, les zones qui sont censées être transparentes apparaissent en bleu clair !... On va dire que "c'est pas tout à fait ça"...
• il y a également la pseudo classe :hover qui n'est supportée que pour les liens alors qu'elle devrait être étendue à certains autres tags, mais c'est un problème qui ne se voit pas sur les images ci-dessus (:hover définit l'état des éléments de la page lorsque le curseur de la souris les survole).

Dans cet exemple, j'utilise Firefox comme un représentant de l'ensemble des navigateurs plus récents, tels que Mozilla, Opera ou Safari (pour les Mac). Ces navigateurs ont un grand point commun : contrairement à Internet Explorer, dont le développement a été complètement interrompu depuis plusieurs années (à l'exception de mises à jour concernant des problèmes de sécurité, qui n'ont pas apporté de modification fondamentale du navigateur), contrairement à IE, donc, les développeurs de ces navigateurs alternatifs ont fait de grands effort pour rendre leurs programmes plus conformes aux standards du web, tel qu'édictés par le World Wide Web Consortium (alias W3C). Résultat : une page qui a été écrite (codée) en respectant ces standards, sera restituée de façon quasiment identique par ces différents navigateurs. On peut regretter qu'un nombre assez important de sites web continuent d'être "optimisé pour Internet Explorer" au mépris des autres navigateurs (et de leurs utilisateurs !), mais il n'en demeure pas moins que, progressivement, il devient possible d'écrire des sites qui ne sont pas asservis à un seul navigateur (et par extension, à Microsoft), mais visible par tout le monde dans les mêmes conditions, indépendamment du navigateur ou du système d'exploitation utilisé par le visiteur.

Pour celles/ceux qui veulent une démonstration du retard d'Internet Explorer par rapport aux autres navigateurs, le test "acid2", mis au point par le Web Standards Project (WaSP), est particulièrement spectaculaire.

Ce test est constitué d'une unique page web, dont la fonction est simplement d'afficher une image :

Ca semble idiot, mais ça ne l'est pas. Car cette image est créée de toute pièce par une page web particulièrement complexe, qui utilise les propriétés les plus délicates du HTML et des feuilles de style (CSS) pour parvenir à ce résultat. Rares sont les navigateurs qui parviennent à afficher cette page correctement. Et pourtant, s'il veut prétendre adhérer aux standards édictés par le W3C, tout navigateur devrait réussir ce test.

Pour l'heure, d'après ce que j'ai lu, Safari est le navigateur qui est le plus proche de la perfection. Safari n'étant disponible que sur Mac, je n'ai pas pu le constater par moi-même (mais cette page web, parmis d'autres, est assez éloquente). J'ai testé les différents navigateurs qui sont installés sur mon ordi (Internet Explorer 6, Firefox 1, Opera 7.4 et Opera 8), et les résultats sont assez intéressants.

Note : toutes les images suivantes peuvent être agrandies en cliquant dessus.

Le vainqueur est incontestablement Opera 8, qui touche presque au but :

Il est suivi par Firefox :

Vient ensuite Opera 7.5 :

Et enfin, le bonnet d'âne revient à Internet Explorer 6 :

Tous les détails sur le test acid2 (en particulier, une explication détaillée du code utilisé pour créer la page) se trouvent sur le site officiel (en anglais) de WaSP.

Les développeurs de Firefox et d'Opera ont clairement annoncé leur intention de faire évoluer leur navigateur pour qu'il passe le test acid2 correctement. Prévue pour la rentrée, la version 1.5 de Firefox devrait présenter une avancée significative dans ce domaine.

Les développeurs d'Internet Explorer (version 7 en préparation), quant à eux, ont d'ores et déjà annoncé qu'IE7 ne passerait pas le test acid2...

Pour plus de détails sur les enjeux de la "Guerre des Navigateurs", consulter cet article sur Wikipédia (en français).