(Mise à jour, janvier 2008 : Cet article date d’avant la sortie d’IE7. Je le conserve pour des raisons historiques.)
Pourquoi ce site a-t-il une présentation différente sous Internet Explorer et sous un navigateur moderne ? Parce qu’à un moment ou à un autre, il faut apprendre à lâcher prise.
Méthodologie de montage d’un site web
Nous n’inventerons rien en disant qu’il faut commencer par coder pour un navigateur le plus conforme possible aux standards de facto, Firefox par exemple, pour éviter de se poser ensuite la question du rendu d’un site dans des navigateurs plus exotiques qu’on n’aurait pas sous la main (Safari et ses quelques pourcents de part de marché, par exemple). Une fois le rendu satisfaisant, vérifier ce que ça donne dans Internet Explorer, rajouter quelques bidouilles si nécessaire (hacks
, en français dans le texte), mettre au four vingt minutes et servir tant que c’est chaud.
Faire alors déguster à quelques amateurs éclairés, si possible avec des expériences différentes (IE Mac, Safari, vieilles versions d’IE Windows...) et ajouter une pincée de sel selon le goût de chacun.
Bon, ça c’est la théorie. Ou, dans un certain nombre de cas, la pratique... par exemple si c’est votre métier, comme c’est mon cas. Dans l’ensemble, quand vous faites ce métier depuis plusieurs années, il ne vous reste plus énormément de cheveux, et ils commencent à grisonner. Une relation de cause à effet n’est pas à exclure.
Jusque-là, tout va bien
J’étais bien content : une mise en page en quatre colonnes à la une, c’est assez peu courant. Et ça répondait à un vrai besoin, celui de montrer, de gauche à droite, la barre de navigation, le contenu récent, et deux colonnes pour mon blogroll [1].
Pourquoi est-ce que j’étais bien content ? Parce que ça marchait, avec Internet Explorer autant qu’avec Firefox. Si, si.
Il suffit de peu de choses pour simplifier la vie du designer web : ne pas gérer trop de calculs de marges [2], et surtout, surtout, éviter de spécifier des marges et des capitonnages sur des éléments dont vous fixez la largeur. Vous garderez des cheveux : c’est inutile, puisque vous allez de toute façon finir par vous les arracher... mais pour l’instant vous les avez encore.
Les ennuis commencent, transigeons un peu avec notre rigueur légendaire
Petite révision : les sélecteurs CSS sont un moyen très puissant de préciser le design de certains éléments. Dans le cas qui nous occupe (ce site merveilleux, qui, lecteur, fait ton bonheur), je voulais pouvoir charter un certain nombre d’éléments de l’interface selon la langue de son contexte, soit au niveau de la page (les fonds des informations additionnelles, les pictogrammes de commentaires), soit à un niveau de granularité plus fine (la barre de navigation, les nouveautés).
Exemple concret : si je voulais que toutes les pages dont la langue est français possèdent une image de fond de la couleur correspondant au français dans ma signalétique, il me suffirait de déclarer :
html[xml\:lang=fr] body { background:url(fond_fr.png) ; }
Ligne suivante pour l’anglais :
html[xml\:lang=en] body { background:url(fond_en.png) ; }
Et ainsi de suite. En clair, si vous n’êtes pas familier avec les spécifications CSS, ça se lit : « Si l’attribut xml:lang de ma balise html est fixé et que c’est fr (du français), alors appliquer au body une image de fond. »
Simple et sans bavure.
Oui mais : dans Internet Explorer, jusqu’ici, on ne peut pas utiliser les sélecteurs. Soit. C’est trivial d’ajouter systématiquement une class au body avec la même chaîne, et c’est ce brave Spip qui fera tout le boulot avec sa balise contextuelle #LANG. C’est merveilleux, il me reste des cheveux.
Mon code est moins propre, mais tant pis : nous ne sommes pas dans une bulle aseptisée mais dans la vraie vie, on est habitué à transiger depuis les débuts du web. En réalité, on a appris à transiger depuis la guerre des navigateurs, funeste période où la pratique la plus courante consistait à développer deux versions du même site et à servir à la demande la version adaptée à votre navigateur, en faisant semblant de croire qu’il n’existait que deux navigateurs sur le marché...
Les PNG : le meilleur des deux mondes a un prix
Pour avoir de belles images avec des jolies teintes, utilisez JPEG. Pour avoir des images à fond transparent, utilisez GIF. Ce sont les fondements sur lesquels repose la culture de l’image numérique adaptée au web depuis le début. Sauf que ces formats ne sont pas exempts de défauts. Le JPEG est très destructeur en termes de qualité des images, et il ne gère pas de transparences. Le GIF ne bénéficie que d’un seul niveau de transparence ; autrement dit un pixel est complètement opaque ou complètement transparent.
C’est délicat : comment gérer des ombrés ? comment faire des effets de fondu entre deux images ? La solution artisanale que nous pratiquions tous il y a quelques années, c’était de découper avec moult ruses des GIF et des JPEG aplatis, et de s’appuyer sur un montage abracadabrant pour donner l’illusion de la semi-transparence.
Je ne dis pas que travailler avec des contraintes n’est pas stimulant, mais un jour ou l’autre on finit par rêver de mieux.
C’est là qu’intervient le PNG : 255 niveaux de transparence, soit autant qu’un logiciel de dessin, et pas de dégradation notable de la qualité de l’image. L’image finale peut être sensiblement plus lourde, mais :
- On n’a rien sans rien (oui, je sais que c’est facile).
- Qui nous force à mettre uniquement des PNG ? On peut aussi, aux endroits choisis, laisser un GIF avec peu de couleurs indexées ou un JPEG peu compressé ; c’est ce que j’ai fait
- Partons du principe que la bande passante a considérablement évolué ces dernières années, et qu’un peu plus de poids dans les pages n’est pas trop préjudiciable, d’autant qu’en montant lesdites pages en CSS on a allégé le code : autant “réinvestir” ce poids dans la charte graphique.
Ah, j’oubliais : Internet Explorer ne gère pas les niveaux de transparence des PNG. Vous vous êtes encore arraché quelques cheveux, mais vous avez bon espoir. Soit vous utilisez une méthode de contournement (un hack CSS au débotté, par exemple), mais vous voilà vite noyé dans des bricolages que vous peinerez à relire dans quelque temps, soit vous utilisez carrément un patch de réparation : ça tombe bien, il existe.
IE7 : Javascript à la rescousse ?
Dean Edwards a écrit un javascript nommé IE7, qui non seulement va réparer nos PNG mais en plus va même comprendre comme il le devrait les instructions CSS modernes dont nous nous sommes passés plus haut (c’est bête, si seulement on y avait pensé plus tôt).
Vous voilà à faire un PNG semi-transparent de test, et à insérer le code qui appelle IE7 dans votre page... Vous vous attendez à ce que ça marche ? Hé bien non. Deux heures d’arrachage de cheveux plus tard, vous découvrez qu’il est toujours bon de suivre le vieil adage : Relis Ton Fieffé Manuel... L’image doit s’appeler *-trans.png. Remercions ici Julien pour sa patience...
Il vous reste des cheveux, vous vous dépêchez donc de mettre en place IE7 sur votre prototype. Peine perdue, deux heures plus tard (encore deux de perdues, si on compte bien), vous ne trouvez pas pourquoi les PNG restent désespérément gris sous Internet Explorer.
Je jette l’éponge
Fatigué de vous arracher les cheveux pour la énième fois, vous décidez radicalement de reprendre une sauvegarde de votre feuille de style de la veille, et d’utiliser les commentaires conditionnels [3] (comme quoi, à quelque chose malheur est bon).
Pour (quand même) garder un peu de l’esprit d’origine, et ne pas avoir ajouté pour rien des attributs de class partout où la langue des éléments a une importance, j’ai ajouté des styles qui permettent de clarifier la signalétique associée aux langues.
Mais le mal est fait : j’ai décidé dimanche soir à minuit, heure fatidique, pour la première fois de ma petite carrière, que le jeu n’en vaut pas la chandelle. J’ai une raison de m’acharner quand c’est pour le travail, je n’en ai plus quand il s’agit d’y laisser une partie de mon sommeil, qui est précieux ces derniers temps...
Voilà donc pourquoi, avec Internet Explorer, le site est un peu triste bien que structuré le mieux possible.
Le bon côté des choses (quand même), c’est qu’il y a cinq ou six ans, la seule méthode pour s’accomoder des limites des navigateurs était de créer le site en double, comme je le disais plus haut. Le fait d’utiliser du contenu bien structuré et d’exporter toute la gestion de la mise en forme vers les feuilles de style nous permet de garder le même code pour tous les “agents utilisateurs” [4].
Le mot de la fin
Pour autant, vous n’avez pas l’impression, à quelques années d’intervalle, et en remplaçant CSS par HTML et Internet Explorer par Netscape 4, que j’aurais pu écrire le même article ? Je ne suis pas trop virulent dans mes prises de position, je crois que la plupart des décisions sont raisonnées, et qu’on peut pour des tas de bonnes raisons vouloir garder Internet Explorer [5].
Mais voilà, trop c’est trop. Pour mon site personnel, qu’il me soit permis de le redire : Internet Explorer est le Netscape 4 moderne, je persiste et signe, et pour cette raison, qu’il me soit permis de le traiter avec le même respect. Je me concentrerai donc pour cette version 4 de nota-bene.org sur des navigateurs compétents à comprendre ce que le web d’aujourd’hui peut nous offrir.
Et ne me lancez pas sur IE5 Mac, qui prend un peu de tout (un morceau de CSS par-ci, un autre par-là), pour qui mon site est encore plus un grand n’importe quoi, sinon c’est vos cheveux que j’arrache. Ah mais.
