Ouvrir la navigation secondaire

Ce billet a plus de deux ans. S'il contient des informations techniques elles sont peut être obsolètes.

Précédent MacFUSE
Suivant Réflexion sur la musique

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 ;-)

#1

Vincent

07.02.07 00:05

Décidément, les commentaires conditionnels restent la valeur la plus sûre pour envoyer des styles spécifiques, quelque soit la version.

#2

giz404

07.02.07 07:09

Effectivement, les commentaires conditionnels dispatchent le code, mais c'est souvent bien plus simple pour s'y retrouver par la suite, surtout quand on est obligé de modifier un site (ou de l'adapter pour IE7)
En ce qui concerne les machines virtuelles, on peut s'en passer en utilisant http://tredosoft.com/Multiple_IE IE en version standalone

#3

Thalion

07.02.07 08:26

J'ai aussi une nette préférence pour les commentaires conditionnels, bien que ce style de hacks soient bien pratique en développement pour ne pas perdre de temps sur différents fichiers.

Voici un autre article qui donne quelques hacks CSS :
http://blog.pixarea.com/index.php/2006/06/13/39-css-un-hack-simple-pour-ie7

#4

Joe Johnson

09.02.07 11:05

>faites chauffer les machines virtuelles pour avoir à la fois IE6 et IE7
non ; voir http://tredosoft.com/Multiple_IE multiple IE

#5

Olivier

11.02.07 15:31

Faut avouer qu'il est bien pratique ce hack "underscore" et moins verbeux que le fameux voice-family hack (voice-family: "\"}\""; voice-family:inherit). Mais comme tu dis, ça passe pas au validateur CSS. Perso, pour contourner le problème, j'utilise le hack Tantek (* html .maclasse {}) mais c'est vrai qu'il nécessite de réécrire sa déclaration css rien que pour IE. De toutes les manières c'est toujours loud à faire, mais inévitable !