Quels hacks CSS utilisez vous ?

Oui on le sait, les hacks c’est le mal ;)

Mais il arrive à toute personne tripatouillant le code CSS d’un site ou d’un blog de se poser la question de leur utilisation, que ce soit par manque de temps, par facilité, fainéantise ou tout simplement parce qu’elle ne sait pas comment faire autrement.

* Les commentaires conditionnels :

Pas vraiment un hack à part entière comme me le fait remarquer Bruno (dont je vous recommande l’article sur la question) mais je les notes quand même. Souvent utilisés pour faire comprendre quelque chose spécifiquement à Internet Explorer.

L’usage typique est d’ajouter une ligne de ce type dans sa CSS :

<!–[if IE]> Du code CSS relatif à IE <![endif]–>

Dans ce cas la mention « if IE » indique à toutes les versions du navigateur de Microsoft d’appliquer la mise en page, par contre toute la partie sera invisible aux yeux des autres navigateurs (Firefox, Opera, Safari,…).

Sauf que dans certain cas on a envie de n’appliquer le code CSS en question qu’à certaines versions du navigateur (par exemple les versions antérieures à IE7). Pour cela il est possible d’utiliser le hack suivant :

<!–[if lte IE 6]> Du code CSS relatif à IE <![endif]–>

L’attribut « lte » indique aux navigateurs que seul les versions antérieures ET la version 6 doivent prendre en compte le code.

D’autres possibilités existent :

IE => toutes les versions d’IE
IE (version) => uniquement la version notée
lt IE (version) => toutes les versions sous la version mentionnée
lte IE (version) => toutes les versions sous ET égale à la version mentionnée
gt IE (version) => toutes les versions au-dessus de la version mentionnée
gte IE (version) => toutes les versions au-dessus ET égale à la version mentionnée

* Largeur/hauteur minimum/maximum d’un élément :

min-width, min-height, max-width et min-height ne sont pas comprit par Internet Explorer. Il existe toutefois un moyen de lui faire faire le travail malgré tout, cela en créant un id (exemple <div class= »id »>) et en appliquant dans la CSS quelque chose de ce genre :

#id { min-height:500px; height:auto !important; height:500px;}

Ca c’est la façon de faire sans passer par du javascript, mais si vous préférez cette dernière méthode vous pouvez voir de quoi il retourner sur le JDN ou sur Gatellier.be (perso je préfère faire le max en CSS sir c’est possible).

* L’underscore :

Un hack que j’utilise parfois (shame on me) pour tout ce qui touche aux paddings et margins.

Si un élément ne se positionne pas de la même manière sur Firefox et sur IE il est possible de préciser 2 données différentes pour un même paramètre en fonction de chaque type de navigateur.

Exemple :

margin-right: 100px;
_margin-right: 150px;

donnera un retrait de 100 pixels sous Firefox et un de 150 pixels sous Explorer. A utiliser avec prudence et vérifier qu’on ne se retrouve pas avec de drôles de choses sur d’autres navigateurs. Par contre le débuggueur Javascript n’aime pas :)

* La transparence PNG :

Internet Explorer (avant la version 7) ne gérait pas du tout le format PNG, en utilisant ce genre de fichier vous aviez un fond d’image tout moche au lieu de la belle transparence attendue. Pour combler ce manque il est possible de « forcer » les versions précédentes du navigateur à comprendre le format comme il se doit.

Pour cela, 2 étapes :

Préciser à IE qu’il doit appliquer le hack (via un commentaire conditionnel comme nous l’avons vu plus haut), par exemple :

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->

Ensuite appliquer le bon code dans votre CSS :

* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src="transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Comme nous nous en sommes rendu compte avec mon ami Revolux lors d’une utilisation de ce hack sur un projet interne, tout appel au AlphaImageLoader influence de manière non négligeable le temps de chargement des pages.

* Les hacks de sélecteurs :

IE 6 et inférieurs : * html {}
IE 7 et inférieurs : *+html, * html {}
IE 7 seulement : *+html {}
IE 7 ET navigateurs modernes seulement : html>body {}
Navigateurs modernes seulement (pas IE7) : html>/**/body {}

* Spécial Mozilla :
Je ne sais pas si l’ont peux vraiment parler ici de hack mais il existe une petite astuce, bien connue, permettant d’arrondir les angles sous Firefox. Il s’agit de :

-moz-border-radius : X px;

Et vous, vous en connaissez d’autres ?

Merci à Bruno pour la relecture entre 2 Tweets, un Flock et des Ma.gnolia ;)

************************

Tags CSS,   hack,   navigateur Partager