Le Temple d'Alyson

La Crypte

< ^ >

Les bugs CSS d'IE6

ou pourquoi faut-il éviter ce navigateur

Introduction & Sommaire

Si vous vous demandez pourquoi le site conseille d'éviter d'utiliser IE6, cette page va vous donner quelques arguments.

Et si vous utilisez IE6 et que vous avez remarqué quelques problèmes de mise en page vous comprendrez mieux pourquoi en lisant ce qui suit. Et j'espère surtout qu'après vous vous précipiterez pour télécharger Mozilla Firefox Get Firefox!

C'est gratuit !

Mauvaise taille de bloc

Commençons par le bug qui pose le plus de problème de mise en page sur le site. En effet je n'ai trouvé aucun contournement possible.

L'exemple demande de mettre une boite jaune haute au centre d'une boîte violette large et de laisser visible ce qui déborde de la boîte rouge.

Avec ce code un navigateur conforme à la norme CSS2.1 doit afficher ceci:

IE6 juge bon d'agrandir la boite violette pour qu'elle puisse contenir la jaune pourtant celle-ci n'est pas dedans (cette opération est réservée aux cellules de tableau qui doivent être obligatoirement agrandies pour contenir leur contenu). Le résultat de IE6 est donc:

Votre navigateur affiche:

Espacement fixe des cellules d'un tableau

IE6 ne comprend pas l'instruction CSS2.1qui définit l'espacement entre les cellules d'un tableau. Ce problème n'est génant que si on désire controler l'espacement grace à la feuille de style car IE6 comprend l'instruction correspondante en HTML.

L'exemple crée une petite table de 2x2 cellules de 15x15 pixels. Chaque cellule reçoit comme fond 1/4 d'une image de 30x30 pixels. C'est évidemment une très mauvaise manière de procéder pour mettre en fond de table l'image de 30x30, mais cela démontre assez simplement le problème rencontré.

Avec ce code un navigateur conforme à la norme CSS2.1 doit afficher ceci:

Cercle violet comme devrait afficher un navigateur conforme

IE6 définit par défaut 2px entre chaque cellule, ce qui est bien la valeur recommendée par défaut. Malheureusement il n'obéit pas à l'instruction border-spacing:0;

Votre navigateur affiche:

Pas de formatage comme un tableau

CSS2.1 permet de formater des bloc comme des cellules de tableau avec toutes les propriétés propres à ces cellules. IE6 ne reconnaît pas l'ensemble de ces instructions. Donc il est impossible de formater un bloc comme une cellule de tableau si ce n'est pas une cellule de tableau en HTML. C'est encore une obligation de mettre en HTML de l'information de formatage.

L'exemple crée un escalier en rangant côte à côte une enumération et positionant à différentes hauteurs les textes des cellules.

Avec ce code un navigateur conforme à la norme CSS2.1 doit afficher quelque chose comme ça (la largeur et la largeur dépendent de la largeur de la fenêtre)  :

IE6 ne comprend rien de rien aux instructions de style utilisées et affiche une liste. La seule façon d'obtenir la bonne présentation avec IE c'est de tout écrire en HTML avec tous les défauts que cela entraine.

Votre navigateur affiche:
  • Les colonnes suivantes ont la m�me hauteur que celle-ci et sont donc redimensionn�es si cette colonne est ajust�e ce qui peut arriver en cas de changement de taille de la fen�tre.
  • Ligne 1
  • Ligne 2
  • Ligne 3

Erreur de calcul de la hauteur des blocs

Quand un bloc est en position relative, il définit le bloc qui contient ses descendants. Cela permet de dimensionner ces descendants en fonction de la taille calculée pour le bloc en position relative. Malheureusement IE6 se trompe dans cette opération dans le calcul de la hauteur du bloc. Ce bug ne permet pas de créer un bloc de la même hauteur qu'un autre sans utiliser de tableau. A noter que Opera a un bug similaire.

L'exemple est une boîte avec 2 bordures. Celle de droite est fabriquée par un bloc inclus dans le premier qui contient le texte et dont la hauteur est déterminée par celui-ci.

Un navigateur conforme à la norme CSS2.1 doit afficher ceci si la fenêtre est étroite :

IE6 se trompe dans le calcul de la hauteur du bloc. Au lieu de la hauteur totale il utilise la hauteur d'une seule ligne. Pour une raison inconnue il oublie aussi de mettre la bordure !

Votre navigateur affiche:
Il est possible de d�finir un fond � un cadre. Dans ce cas le cadre rouge a comme fond la fresque de gauche. Mais pour en d�finir un second (celui de droite) il faut ajouter un cadre ayant la m�me hauteur que celui auquel on veut donner un second fond (le cadre rouge dans ce cas). Pour cela il suffit que le cadre devant avoir 2 fonds soit en position relative (ou absolue) et d�finir une hauteur de 100% du cadre de r�f�rence pour le second cadre (entouré ici par une bordure pointillée pour aider à l'identifier).

Quelques autres bugs ou limitations

IE6 ne comprend pas l'instruction CSS min-width qui permet de garantir une largeur minimale. Une instruction de ce type existe sur cette page. Avec un autre navigateur elle cause la création d'une barre de scrolling en bas si la fenêtre devient trop étroite par rapport à ce minimum. Avec IE ce n'est pas le cas et le bord des plaques de marbre disparaît car IE donne la priorité au contenu utile sur la mise en forme quand la place manque (ce comportement est normal).

IE6 a un bug dans le calcul de la largeur des colonnes de tableau. Je ne suis pas parvenu à en déterminer les conditions de reproduction exactes mais sur le site quand la largeur des fenêtres réduit, les cases pour les clous sur les plaques de marbre se rétrécissent sans raison apparente.

Pourquoi utiliser CSS plutôt que HTML

L'utilisation de CSS permet de séparer les données de la présentation. C'est à dire qu'en HTML on ne va fournir que l'information, le fond, et en CSS on va définir la présentation, la forme.

Mais quel est l'intéret de faire cette séparation plutôt que de mélanger les données et la présentation, le fond et la forme dans le code HTML ?

Et bien d'une part cela permet de définir la forme une fois (une feuille de style) et de l'utiliser (l'appliquer) dans plusieurs pages HTML donnant ainsi la même présentation à différente page. Cela va permettre ainsi de plus facilement faire évoluer la présentation sans affecter le contenu.

Mais en poussant plus loin il est même possible de faire évoluer la présentation en temps réel sans même recharger la page. Si vous utilisez Firefox vous pouvez transformer le Temple en Crypte. Pour cela il faut choisir dans la barre de menu Affichage / Style de la page / Crypte. C'est magique non ? Et ça sans CSS ce n'est pas possible.

Ceci n'est pas encore possible sur tout le site, mais je travaille pour que ce le soit. Il y a aussi du travail a fournir pour que le choix de style soit conservé d'une page à l'autre, que ce soit acessible avec les autres navigateurs y compris IE. Cest prévu...

Et s'il y a des artistes volontaires ils pourront fournir eux aussi (avec mon support) des feuilles de style pour enrichir le site de nouvelles présentations (ou skin en anglais) comme un décor de temple Japonais ou futuriste, une présentation purement abstraite, ou Manga... A chacun son style.

Comment utiliser CSS

Ce paragraphe est encore plus technique que les autres. Il s'adresse à ceux qui voudraient se lancer dans l'utilisation de CSS pour leur site.

Il fournit juste une petite info sur la bonne utilisation de CSS pour vous éviter de partir de travers : il ne s'agit pas de définir des styles et de les associer à des éléments HTML comme je l'ai fait naïvement au début. Mais il faut définir un type de données pour chaque donnée fournie par le code HTML et affecter un style à ce type de donnée.

Par exemple indiquer qu'une page est un menu, qu'une ligne est choix de menu, qu'un texte est une introduction, un avertissement,... et ensuite dans la feuille de style CSS indiquer qu'un choix de menu est écrit en gras, qu'il est écrit plus gros s'il est dans une page de menu, que l'avertissement est écrit en rouge, etc... Ainsi il sera très facile de changer le style du site complet.

Par contre en utilisant des styles qui s'appeleraient "gras", "rouge", "encadré",... il est évidemment possible de transformer le style en disant que le rouge s'affiche en vert, que l'encadré doit être sur fond jaune, etc.. mais il y a peu de chance que le résultat soit vraiment ce qu'on cherchait à faire car on ne voulait peut-être passer en vert que certains des textes rouges...

C'est seulement si on a pris soin de bien identifier le rôle de chaque élément qu'il sera possible de faire varier précisément la présentation de cet élément.

Cette page a été visitée Compteur fois depuis leur création.

Votez pour Le temple d'Alyson

Valid XHTML 1.0! Valid CSS!