IE5 Mac et le float/clear bug

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

J'ai presque terminé le redesign de mon autre weblog sur le hip-hop, j'en ai profité pour acheter un nom de domaine chez Gandi, ce qui facilitera sa future probable migration vers un autre serveur. En passant je cherche aussi un nom de domaine pour le weblog que vous êtes en train de lire, j'aurai bien aimé marco.quelquechose mais c'est mort, tous les marco sont pris !

Retour à mon autre blog que j'ai réalisé en XHTML et CSS. J'aimerai vous parler de sa forme, pas de son contenu. Il y a un tout petit peu de flash, inséré via un javascript qui fait aussi office de détecteur de plug-in. J'ai essayé de respecter les règles de base de l'accessibilité, alors même si le menu n'est pas à la fin et s'il n'y a pas d'accesskeys, il y a quand même des attributs pour indiquer la langue, des balises noscript, j'ai fait attention à ce que le site soit visible dans son intégralité aux utilisateurs qui désactivent javascript etc. Même Bobby ne le trouve pas si mal. Au passage le menu de navigation n'est pas fait en flash pour une raison évidente d'accessibilité. Je n'ai pas de compteur ou de statistiques sur mes sites perso pour l'instant, mais vu la cible à laquelle s'adresse kemar.net, je ne suis pas certain qu'une accessibilité parfaite soit nécessaire comme l'a très bien noté Denis sur son site.

Enfin bref. Je suis tombé sur un bug d'IE5 Mac auquel je n'avais jamais été confronté et qui est super relou. Il s'agit du float/clear bug, c'est à dire que :

La propriété clear est héritée de façon incorrecte par des éléments flottants quand la boîte parent dispose elle même d'une propriété float avec une des valeurs : both, left ou right.

Dans mon cas pour schématiser, j'ai une boîte qui s'appelle div#contenu. Celle ci contient une boîte qui s'appelle div#posts. Cette dernière contient une galerie d'images avec des éléments a.photo affichés en blocks et que je fais flotter à gauche selon cette technique. Soit : div#contenu > div#posts > a.photo. Il se trouve que j'avais affublé div#posts d'une propriété clear avec l'attribut left et que celle-ci été héritée par tous mes éléments a.photo dans IE5 Mac, avec pour résultat une succession verticale des images alors que les autres navigateurs affichaient la galerie correctement. J'ai rapidement réussi à corriger ça en virant la propriété clear: left de mon élément parent puisque celle-ci n'était pas vraiment nécessaire, car par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Mais bon ça peut être un bug bien chiant pour qui veut supporter IE5 Mac.

Je n'avais jamais imaginé qu'IE5 Mac serait si chiant avec les CSS. Je me souviens que lors de sa sortie, je trouvais vraiment que c'était le top des navigateurs toute plate-formes confondues. Mais il a bien vieilli. Ou alors ce sont les méthodes de développement (X)HTML strict + CSS qui sont en avance sur les navigateurs grand public actuels. C'était la question pseudo-philosophique du jour car il est toujours de bon ton de finir un post par une question ;-).

Avant Le nouveau A List Apart Après Sliding Doors of CSS

Tag Kemar Joint