Vous êtes ici

Nouveau thème et test "acid2"

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.

cliquez pour agrandir dans une nouvelle fenêtre cliquez pour agrandir dans une nouvelle fenêtre

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 :

cliquez pour agrandir dans une nouvelle fenêtre

Il est suivi par Firefox :

cliquez pour agrandir dans une nouvelle fenêtre

Vient ensuite Opera 7.5 :

cliquez pour agrandir dans une nouvelle fenêtre

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

cliquez pour agrandir dans une nouvelle fenêtre

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).

Get Firefox!

Commentaires

Portrait de s427
s427

C'était pas prévu, mais je viens de faire une nouveau thème (s427-gris+vert, cette fois). En fait il s'agit d'une simple variation sur le précédent (s427-gris), principalement une modification des images de fond. Je me disais que le gros logo "s427" du thème précédent faisait un peu prétentieux, et puis je me disais que ça manquait de couleur. D'où l'idée de remplacer ce logo par une photo que j'ai prise depuis mon lieu de travail. ^^

Je suis pas sûr d'être complètement satisfait du résultat. C'est assez chargé visuellement, et je me demande si la lecture n'en est pas entravé... Mais bon, comme vous avez le choix (avec le sélecteur de thème), je n'ai pas de raison de le supprimer.

Par contre la couleur des liens ne me plaît pas trop. J'étais déjà plutôt sceptique pour ces couleurs sur le thème précédent (je ne les ai pas modifiées pour ce thème), mais avec celui-ci ça ne va plus du tout, c'est certain. Curieusement, c'est toujours cette partie du design qui me pose le plus de problème et me fait le plus hésiter. Donc je vais corriger ça également, mais je ne sais pas quand...

Et puis : non, ce nouveau thème n'est toujours pas compatible avec Internet Explorer, désolé. Comme je l'ai écrit dans mon billet ci-dessus, c'est quand même un travail d'adaptation relativement important, et ce nouveau thème est essentiellement un copier-coller du précédent, donc il pose les mêmes problèmes avec IE. Ca aussi, ce serait bien que je le corrige, mais ça aussi, on verra quand.

That's all, folks !

Portrait de s427
s427

Si quelqu'un me lit : tout avis et commentaire sur ces deux nouveaux thèmes m'intéresse grandement ! :)

Portrait de s427
s427

Et hop ! Encore un. Ca m'a pris toute l'après-midi... Dans des tons clairs, cette fois. A la longue j'avais l'impression d'étouffer dans tous ces gris. On remarque que chaque thème est une évolution du précédent, mais entre celui-ci et le tout premier, les points communs commencent à se faire rares !

J'en profite pour donner à mes différents thèmes des noms un poil plus éloquents --les numéros, ca va un moment.

Et encore une fois, non, c'est pas pour Internet Explorer... :blush: Mais ça viendra, ça viendra.

Peut-être. 8-)

Portrait de s427
s427

Bon, ben... Encore un thème. 8-)

Bleu-beige. Celui-ci a été plus facile à faire, dans la mesure où il s'agissait essentiellement de changer les images de fond du thème précédent (vert) et d'adapter les couleurs des autres éléments de la page en conséquence.

En passant, l'image de fond est une photo (légèrement retravaillée) que j'avais prise à Expo 02.

Ah, euh non, ce thème n'est toujours pas prévu pour Internet Explorer... :blush:

Portrait de Yann
Yann

Superbe le bleu-beige!! Il a mes préférences avec le bleu "défaut". Good job, guy! Pour le thème vert, comme je te l'ai dit de vive voix (je me répète, mais c'est faute à mon grand âge), le côté pommier et petite maison dans la prairie, je suis pas trop fan...

Portrait de s427
s427

Merci, ça fait plaisir !

J'avoue que c'est justement ta remarque sur l'arbre du thème précédent qui m'a poussé à chercher une autre image de fond... :) Donc y'avait intérêt à ce que ça te plaise ! ;-)

Portrait de s427
s427

Voilà, après quelques aménagements et quelques cheveux arrachés, le thème "bleu+beige" est compatible avec Internet Explorer. Je dois dire que j'ai encore beaucoup de mal à comprendre certains comportements de ce navigateur.

Il y a encore quelques petits problèmes, notamment le titre du blog qui disparaît de façon imprévisible (bon, tant pis, je vois pas ce que je peux faire...), et la barre latérale qui risque de se retrouver tout en bas de certaines pages si vous surfez avec une résolution d'écran petite ou moyenne (soit 1024x768 ou moins). C'est par exemple le cas de la page que vous lisez en ce moment, à cause des images assez grande qu'elle contient (la capture d'écran d'IE6, en particulier). Firefox gère ça de façon plus élégante qu'IE6 et fait déborder les images sur la droite, tandis qu'IE6 redimensionne tout le bloc et renvoie la barre latérale tout en bas. Pour ça, je ne vois pas ce que je peux faire...

Si vous constatez d'autres problèmes avec Internet Explorer, merci de me le faire savoir (par commentaire ici ou par e-mail avec le formulaire de contact, présent dans la section "pages fixes" de la barre latérale).

Portrait de s427
s427

Du coup je décide de faire de ce nouveau thème (bleu+beige, donc), le thème par défaut du blog. 8-)

J'ai dit !

Portrait de Psykotik
Psykotik

Moi j'aime le vert !!! Ca fait plaisir de voir que certaines personnes respectent les opinions politiques de leurs amis. Non mais.

:-D

Très très beau boulot mon bonhomme... vraiment. Tu ne cesse de m'épater, bien que je trouve que tu devrais "renouveler" tes techniques. Je m'expliques : j'ai l'impression que tu joues avec les mêmes effets depuis un moment, en fait depuis la page interne faite pour la GP 2003 (ou 2004 ?) : en filigrane l'image estompée, d'une photo en dur dans des coins.

N'empêche, j'adore toujours autant, mais j'essaie de te pousser à l'innovation, et te rendre meilleur. Je tiens ça de mon sergent-major.

Portrait de Psykotik
Psykotik

J'ajoute un bug : la galerie est un peu petite pour les photos en skin vert . A corriger en deux temps trois mouvements.

Portrait de Yann
Yann
j'ai l'impression que tu joues avec les mêmes effets depuis un moment

Des critiques, toujours des critiques... Mais ce n'est pas qu'il doit se renouveler: il se renouvelle, mais dans son style. C'est la "patte s427".

Faut toujours tout expliquer à ces constructivistes et post-structuralistes :)

Portrait de s427
s427
"Faut toujours tout expliquer à ces constructivistes et post-structuralistes"

Je croyais qu'il était écolo, je savais pas qu'il était aussi constructeur en structures postales... :huh?:

@ Psykotik :

Tu n'as pas tort, je dois bien l'admettre. Je suis particulièrement fan de l'effet qu'on peut obtenir avec la propriété background-attachment des CSS et parfois, quand je prends un peu de recul, je me dis que je l'utilise vraiment trop systématiquement (d'ailleurs le thème "gris" sur ce blog en est un exemple). N'empêche qu'on voit relativement rarement ce genre d'effets sur Internet, donc autant en profiter. :)

D'un autre côté, je ne cherche pas forcément à me renouveller en ce moment. Mes progrès se font plutôt du côté invisible de la conception web, dans la maîtrise des CSS en générale, et tant que j'aurais des progrès à faire dans ce domaine, je ne chercherai pas forcément à me renouveller graphiquement. Je dis ça, mais en fait ça n'a rien de planifié ni de réfléchi, donc je me trompe peut-être. L'avenir nous le dira.

Voilà. Et puis en passant embrasse bien fort ton sergent-major de ma part.

Ajouter un commentaire