nota-bene.org > Sur le web > Internet Explorer est le Netscape 4 moderne

Internet Explorer est le Netscape 4 moderne

À propos de cet article

Un article de Stéphane

Publié le 27 septembre 2005

URL courte : http://nota-bene.org/71

This article also exists in English: Internet Explorer is the new Netscape 4

9 commentaires

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. Moi, c’était dimanche soir, je m’en souviens, il était minuit...

(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 :

  1. On n’a rien sans rien (oui, je sais que c’est facile).
  2. 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
  3. 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.


Notes

[1Un blogroll, pour les profanes, est une liste de liens vers d’autres sites, assortie d’un petit commentaire à chaque fois.

[2Comptine de cour d’école : margin et padding sont dans un bateau, IE tombe à l’eau !

[3Voir chez Raphaël, Qu’est-ce que les commentaires conditionnels ?. C’est bête comme chou, non ?

[4Ouh que je n’aime pas ce terme... Mais faute d’une meilleure traduction de “user agents” nous devrons nous en contenter.

[5Je pense au single sign-on sur un réseau Windows d’entreprise, par exemple, ou aux difficultés de déploiement d’un nouveau navigateur sur un parc étendu, d’autant que ce parc a sans doute accès à un certain nombre d’applications pensées pour Internet Explorer, que ce soit par l’usage de document.all ou de contrôles ActiveX, nombre de points qu’on peut regretter mais qui sont un état de fait qu’il serait trop simple de négliger.


Commentaires

    • 28 septembre 2005

    Hello !

    Eussé-je été croyant, j’aurait dit "Amen !" (ou aurait-ce été un blasphème ?) Bref...

    * J’approuve. Puis-je me permettre un petit aparté ?
    * Oui tu peux.
    * Merci sourire Voici :

    Sur mon site (voir lien), j’utilise la méthodologie suivante :

    1/ Je fais sans CSS jusqu’à ce que ce soit utilisable dans links/lynx.

    2/ J’ajoute du CSS1 (à peu de choses près) et je paufine jusqu’à ce que ce soit à mon goût dans Internet Explorer (sans trop pousser non plus ; comme toi, il s’agit d’un site perso tout de même).

    3/ Je complète avec du CSS que IE est trop petit pour comprendre (CSS2 en général), CSS qui en général annule et remplace le précédent pour atteindre mon objectif réel.

    Je ne sais pas si ça va t’aider (ou un autre de tes lecteurs), mais sait-on jamais ?

    Yves.

    mon site

    Répondre à Yves

    • 28 septembre 2005
    • en réponse à Yves

    Ta méthode n’est pas bonne, Yves : par exemple si tu fais des calculs de boîtes, margin, padding, tu sais bien qu’ils sont différents en mode quirks et en mode standard.

    Or les déclarations ici sont ainsi faites qu’IE6 rebascule en mode standard, laissant IE5.5 et consorts dans la mouise.

    Donc si j’applique ta méthode je dois déjà faire avec deux rendus différents (à l’aide, en gros, du box-model hack/voice hack), et ensuite aller voir comment ça se passe dans un navigateur conforme.

    Ça ne va pas dans le sens de l’histoire. Je préfère faire une CSS la plus conforme possible à mes attentes, et la hacker (le moins possible évidemment pour des raisons probables de compatibilité future) pour que le rendu soit le plus fidèle possible dans IE.

    L’expérience montre qu’il est moins coûteux d’écrire d’abord une CSS conforme puis de la hacker légèrement au besoin, que de partir sur une CSS pensée pour IE puis hackée à l’envers pour des navigateurs mieux faits.

    Mais je ne le ferai pas pour cette version-ci de mon site. Le jeu n’en valait pas la chandelle...

    Répondre à Stéphane

  • Judicieuses remarques !

    Ma méthode revient effectivement à gérer deux apparences potentiellement complètement différentes.

    Mais ma répartition des styles par "module" (je ne rentre pas dans le détail, voir "ÉASY" sur mon site) et le découpage en /* CSS1 */ ... /* CSS2 */ ... au sein de chaque fichier fait que je m’en sort facilement.

    Ceci dit, je n’utilise jamais de "hacks" (ces trucs illisibles à la limite du syntaxiquement correct), quitte à brider mes envies sous IE et NS4.

    De plus, j’accepte de la part d’IE quelques divergences vis à vis de la feuille de style que je n’accepterais pas de la part de Firefox/Konqueror/Opera. D’ailleurs, pour autant que je sache, mon XHTML1.1 est toujours en mode "quircks" sous IE du fait de la ligne < ?xml du début. (le jour où j’ai appris ça... mais à quoi pensaient-ils donc !)

    Pour conclure, je dirai que mon experience corrobore la tienne. La seule raison pour laquelle j’ai fait comme ça, c’est que je suis sûr de ne rien oublier : les styles CSS1 sont stables et IE ne comprend rien à ce que j’ajoute après. Alors qu’en allant dans l’autre sens, je crains d’oublier des cas d’utilisation où un navigateur moins favorisé serait perdu.
    Mais de plus en plus, j’utilise néanmoins ta méthode : partir de FF, puis aller vers Links/Lynx.

    Yves.

    Répondre à Yves

    • 29 septembre 2005

    Safari respecte les standards : le comparer à IE n’a aucun sens. Il est basé sur KHTML, les versions de dev passent le test Acid2, etc.

    Donc, si ton code est conforme au normes et correct, tu n’as pas besoin de tester sous Safari !

    Répondre à Ben.d

    • 29 septembre 2005
    • en réponse à Ben.d

    Oui, c’est une façon de voir les choses.

    Pendant un temps, je codais pour les standards de l’époque, qu’IE comprenait parfaitement. Ça ne m’empêchait pas de tester dedans...

    Tiens, si tu regardes bien : j’ai beau coder correctement, je teste quand même mon site sous Firefox sourire

    (au passage, je n’ai pas souvenir d’avoir comparé Safari et IE)

    Répondre à Stéphane

    • 29 septembre 2005
    • en réponse à Yves

    mon XHTML1.1 est toujours en mode "quircks" sous IE


    Hum ... Voir :

    Bref. IE propose le téléchargement d’une page au format xHTML1.1 dont les entêtes HTTP sont corrects et ne l’affiche pas. Si ton document est affiché sous IE c’est qu’il ne correspond pas à la norme.

    Voilà ... grand sourire

    @+, Didier

    Répondre à Didier R

    • 30 septembre 2005
    • en réponse à Didier R

    Bref. IE propose le téléchargement d’une page au format xHTML1.1 dont les entêtes HTTP sont corrects et ne l’affiche pas. Si ton document est affiché sous IE c’est qu’il ne correspond pas à la norme.

    Hé hé... C’est d’ailleurs pour cette raison que j’ai opté pour le XHTML 1.0 sur ce site.

    À propos des en-têtes et de la négociation de contenu, il m’est arrivé un truc bizarre cet après-midi. Je dis à des stagiaires qui essayaient de trouver tout ce qu’on peut mettre comme attributs et tags pour enrichir un tableau d’aller voir à la source sur le site du W3C.

    Curieusement IE a voulu systématiquement enregistrer la page. Comme si la négociation de leur serveur avait échoué.

    Répondre à Stéphane

    • 4 octobre 2005
    • en réponse à Didier R

    Merci pour le liens ! Leur lecture est intéressante, bien que je sois globalement au courant de tout ceci.

    C’est d’ailleurs pour ça que je refais mon framework PHP (voir mon site) :
    Je me suis rendu compte que j’étais "plus royaliste que le roi" sur certains aspects (pas les normes en fait, plutôt la modularité et la souplesse) au détriment de la facilité d’emploi ; et au contraire, il y a certaines lacunes au niveau des normes que je compte bien corriger (notamment liées à l’accessibilité et au multi-support : les media CSS).

    Ceci dit, un point souvent soulevé est que le XHTML servi comme text/html est du "tag soup" (bouillie de balises) car rendu en "Quirks mode" (y compris dans l’article lié). C’est faux dans certains cas et anormal dans les autres. Comme le fait si bien remarquer un lecteur d’un des articles, les mots MAY et SHOULD ne veulent pas dire "doivent".
    Et d’ailleurs, j’ai vérifié dans Firefox : mon contenu XHTML1.1 (servi comme text/html à cause d’IE...) est rendu en mode "Standards compliance mode" (voir Tools>Page Info) au moins depuis la version 0.9.2 !
    Et pour cause : ce qui compte, c’est les DOCTYPE et namespaces.

    Mais ce n’est pas au problème du "content type" que je faisais référence à propos d’Internet Explorer. Le problème soulevé est visible à la ligne "XHTML 1.0 Strict doctype with an XML declaration" du document lié : dès lors qu’une déclaration XML est utilisée (version=... encoding=...), IE passe en Quirks mode ! ... c’est en tout cas ce que j’ai compris, je n’ai pas vérifié.

    Yves.

    Standard and Quirks modes

    Répondre à Yves

    • 4 octobre 2005
    • en réponse à Yves

    dès lors qu’une déclaration XML est utilisée (version=... encoding=...), IE passe en Quirks mode ! ... c’est en tout cas ce que j’ai compris, je n’ai pas vérifié.

    Tu as tout à fait bien compris, c’est exactement ce que disait Didier, et c’est exactement pour cette raison que je continue à faire du XHTML 1.0 et pas 1.1...

    Répondre à Stéphane

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.

Ceci est la version Bureau Afficher la version Mobile