IE7 CSS hacks

La nouvelle version d'Internet Exporer estampillée 7 apporte pas mal d'améliorations au niveau du support CSS. Malheureusement il lui reste des faiblesses par rapport à la concurrence. Bref, vous constaterez rapidement qu'un bon petit hack de derrière les fagots vous sortira de la merde. En ce qui me concerne j'avais recours à l'underscore hack de temps en temps. Pas trop souvent malheureux ;-)

Or la team de dev d'IE a corrigé le parseur CSS d'IE7 pour qu'il n'interprète plus les identifiants commençant par '-' (tiret) ou '_' (underscore). Voila qui met un terme à l'utilisation d'un hack bien pratique. Notez en passant que la spec de CSS 2.1 autorise désormais les identifiants commençant par ces 2 caractères mais seulement pour des identifiants réservés aux fabriquants de navigateurs (typiquement : -moz-border-radius par exemple). Donc ne plus les parser est plutôt logique comme décision.

Rassurez-vous, car il y a toujours moyen de hacker comme des oufs en ajoutant simplement un autre caractère spécial devant l'identifiant concerné. Voici une liste des caractères spéciaux que vous pouvez utiliser. Y a de quoi faire ! Bien entendu, si vous êtes un narcotique du validateur CSS, passez votre chemin.

Le jeu après c'est de tester dans IE7 et IE6 et d'utiliser le '_' (underscore) si c'est seulement IE6 qui bug. Si IE7 vous pose un problème, il y a 99% de chances que la version 6 posera le même problème et vous pouvez utiliser un autre caractère spécial comme le '|' (pipe).

Un autre exemple tout bête, IE7 supporte min-height mais pas IE6. Figez votre layout pour ne pas qu'il casse dans les versions d'IE inférieures à la 7 :

#sidebar {
    min-height: 200px;
    _height: 200px; /* Pour IE6 et < */
}

On pourrait utiliser les déclarations conditionnelles pour cibler un IE particulier mais je trouve ça trop chiant car ça dispatche le code CSS à droite à gauche.

Voila, faites chauffer les machines virtuelles pour avoir à la fois IE6 et IE7. Bienvenue dans l'enfer du dev web ;-)