CSS et Internet Explorer pour Windows

Date : 07/2004
(màj du 27/10/2004)

Microsoft, en tant que membre de W3C, a participé à l'élaboration des spécifications techniques de CSS (Cascading Style Sheets = feuilles de style). Il n'en est pas moins vrai que son navigateur, Internet Explorer pour Windows, peine à conformer aux dites spécifications. Vu la place qu'il occupe sur le marché, il vaut mieux savoir ce qu'il ne sait pas faire en matière de CSS.

Box model

Dans le CSS, conçu pour être un outil de mise en forme, toute balise qui compose une page Web est un box (boîte).

IE 5 pour Windows ne soutient guère le modèle de box ;
IE 6 pour Windows le soutient uniquement en mode Strict (voir "Doctype") et avec quelques incompatibilités, dont les plus lourdes concernent le calcul de dimensions, ainsi que le positionnement des box.

Pour comprendre ces incompatibilités, il faut d'abord parler du modèle en question.
Il se présente de manière suivante :

CSS box model [D]

Pour calculer le width (la largeur) qu'un box occuperait à l'écran, le CSS a prévu l'addition des valeurs suivantes :

margin-left (marge extérieure gauche) + border-left (bord gauche) + padding-left (marge inférieure gauche) + width (largeur de contenu) + padding-right (marge inférieure droite) + border-right (bord droit) + margin-right (marge extérieure droite).

Ce modèle de calcul est respecté par tous les navigateurs modernes, à l'exception d'IE 6 pour Windows qui, en individualiste, considère que le width englobe aussi bien le contenu que les paddings et les borders.

Calcul de la largeur d'un box selon Explorer [D]

A l'affichage, cela aboutit à une incompatibilité gênante entre Explorer et les autres navigateurs. Imaginez que vous paramétrez une balise HTML de manière suivante :

width : 100px ; padding: 10px ; border: 5px ; margin : 0;

Tous les navigateurs conformes CSS lui réserveront un espace de 130px car :

0 + 5px + 10px + 100px + 10px + 5px + 0 = 130px

Explorer ne réservera à cette même boîte que 100px, puis il soustraira les valeurs de paddings et de borders de la valeur de width.

A l'écran, cela aboutit à deux présentations fort différentes :

Le rendu dans Explorer et dans les autres navigateurs [D]

Pour des mises en pages CSS sophistiquées, en plusieurs colonnes flottantes, cette incompatibilité est agaçante car elle casse l'effet visuel, alors qu'on est en droit d'attendre qu'un code correctement écrit donne le résultat semblable dans tous les navigateurs.

Des développeurs ont élaboré des parades pour contourner ce problème. La nécessité d'alourdir le code des pages pour accommoder "l'individualiste" n'en est pas moins irritante.

Positionnement fixe d'éléments

La directive CSS position:fixed permet de figer un élément à l'écran. Elle est très utile ne serait-ce que pour garder un menu à la portée d'un clic alors que vous parcourez une longue page. Grâce à cette fonctionnalité, on obtient le même effet qu'en utilisant les frames (cadres) ET on n'a pas à subir les inconvénients de ces derniers.

IE pour Windows ne gère pas la directive position:fixed
(le feu IE 5 pour Macintosh savait le faire. Le pointeur ne se transformait juste plus en une main pour vous indiquer la présence d'un lien).

Cette incompatibilité est des plus gênantes. Des développeurs lui ont également cherché des parades. Aucune n'est sans danger. La plus aboutie est la solution CSS d'Eric Bednarz, mais elle est contraignante, elle aussi.

Positionnement fixe d'images de fond

IE pour Windows ne sait pas interpréter le background-attachment:fixed sur autres balises que la balise <body> (corps de page).

On ne peut donc pas fixer à l'écran la position d'un fond autre que celui qui est contenu dans cette balise-là.
Cela limite à 1 le nombre de fonds immobilisés qu'il est possible de voir dans IE.

Directives Mini et Maxi

Ces directives permettent d'imposer la largeur et la hauteur minimale/maximale à un élément.
C'est utile pour qu'un texte ne devienne illisible en s'étalant sur toute la largeur d'un grand écran (un max-width:600px l'empêchera alors d'être plus large, quel que soit l'écran) ou, bien, pour imposer qu'un encadré occupe 100% de la hauteur d'une fenêtre.

IE pour Windows ne sait pas gérer les directives : min-width (largeur minimum), max-width (largeur maximum), min-height (hauteur minimum), max-height (hauteur minimum).
[à l'exception mineure de min-height quand il s'applique aux td rendus à l'aide de la directive table-layout:fixed que, une fois n'est pas coutume, IE est le seul à savoir gérer)

Marges automatiques

Il s'agit de centrer un élément (et non son contenu) à l'écran.

IE pour Windows ne sait pas interpréter margin:auto.

IE pour Windows ne comprend que le text-align:center que les autres navigateurs interprètent correctement comme l'alignement du texte au centre.

Il faut une petite astuce pour obtenir l'effet escompté dans tous les navigateurs à la fois.

Sélecteurs avancés

Les sélecteurs avancés de CSS permettent des sélections sophistiquées qui simplifient la programmation de la mise en forme. Ils permettent d'atteindre et de formater une balise (et ses attributs) sans lui attribuer explicitement un nom de class. C'est un peu comme si l'on la télécommandait en disant, par exemple : "chaque troisième paragraphe qui suit un titre doit être mis en rouge".

IE pour Windows ne gère pas :

> - sélecteur d'enfants (child selector),
+ - sélecteur de parenté adjacente (adjacent sibling selector),
p[class ] - sélecteur d'attribut (attribute selector).

Conséquence : on n'utilise ces sélecteurs que pour des styles supplémentaires. Ainsi IE pour Windows montre toujours la page de base, tandis que les autres navigateurs voient la mise en page soignée.

Pseudo-classes avancés

IE pour Windows ne gère pas les pseudo-classes : :focus et :first-child.

Conclusion

Le CSS qu'Explorer honore aujourd'hui est assez limité. Ses concurrents font mieux depuis longtemps. C'est frustrant mais peut-on bouder le navigateur le mieux imposé au marché ?

En attendant que Microsoft conforme son navigateur, on est contraint de s'assurer que la mise en page ne repose pas sur des sélecteurs et des déclarations CSS qui lui posent des problèmes. Cela freine le progrès du Net ne serait-ce que par rapport à la séparation de contenu et de mise en forme, prônée judicieusement par W3C. Car elle implique l'utilisation intensive du CSS.

Note du 27/10/2004 :

Fabrice Baquedano de Solunix m'a appris qu'il existe un script de Dean Edwards qui comble les lacunes CSS d'Internet Explorer 6 et 5.5. Ce script est intitulé IE7.

L'explication française est disponible sur le site de www.estvideo.com.

Liens :

Apple : Web Page Development : Best Practices (source d'inspiration du présent article)
Microsoft : CSS Enhancements in Internet Explorer 6
Tantek Çelik (de Microsoft): Box Model Hack.
(Il existe la version française de cette page : Bidouillage de Boîtes)
Devnull : Faking "position:fixed" for Windows Internet Explorer (célebre solution d'Eric Bednarz)
Webdesign : Getting Internet Explorer to Play Well with CSS
Penser fluide
IE7 de Dean Edwards

Note :
L'icône "No Explorer" qui apparaît sur cette page est une création de Bryan Bell.

Sommaire de Repères