Contourner le code CSS avec des hacks

© Christian PAULUS. Document créé le 6 avril 2007 , mis à jour le 19 avril 2007.

Si perçante soit la vue, on ne se voit jamais de dos. Proverbe chinois

Accueil du site > Astuces > CSS > Contourner le code CSS avec des hacks

CSS / Firefox, IE6, IE7

Le hack, comme le précise Wikipedia, est un terme employé en informatique pour désigner une analyse de code, parfois une optimisation, pour une meilleure utilisation.

Le hack CSS est souvent employé par le webmaster pour s’assurer d’un affichage similaire de son site sur les différents navigateurs.

A vrai dire, il s’agit plus de l’utilisation de bugs du navigateur, l’interprétation du code CSS employé, ou de son manque de conformité à la norme CSS. Il ne s’agit pas réellement ici d’une optimisation de code, mais plutôt d’un contournement.

Par exemple, quelques lignes de CSS :

h1 {
   color:black;
   !color:green;
}
*> h1 {
   color:red;
  !color:blue;
}

Affiche le titre (h1) en rouge pour les navigateurs qui respectent au mieux CSS, en vert pour IE6 et en bleu pour IE7.

Le seul défaut de cet exemple, c’est qu’il n’est lui aussi pas conforme à CSS. Le validateur du W3C permet de constater :

h1 {
   color:black;
   !color:green; /* Lexical error. Encountered: "b" (98), after : "! " */
}
*> h1 {
   color:red;
   !color:blue; /* Lexical error. Encountered: "b" (98), after : "! " */
}

Les erreurs sont signalées ici dans les commentaires respectifs.

Dans la même lignée, vous pouvez aussi utiliser :

h1
{
   color:black;
   *color:blue; /* Erreur lors de l'analyse grammaticale */
   _color:green; /* Erreur lors de l'analyse grammaticale */
}

La première ligne définit le titre en noir, la seconde en bleu pour IE6 et IE7, la dernière en vert pour IE6.

Un code qui sera accepté par le validateur du W3C :

h1 {
   color:black !important;
   color:green ;
}

Donnera un titre noir pour les navigateurs respectueux de la norme en ce qui concerne «  !important » et vert pour IE6 et 7.

Cette pratique est difficile à maintenir. Que donnera ce même code dans quelques années ?

Il existe des centaines de versions et sous-versions de navigateurs Web et des dizaines de méthodes de hack CSS. Autant dire que les tester toutes est impossible. Il faut faire des concessions.

Les commentaires conditionnels

Un commentaire HTML commence par un <!-- et se termine par --> Une condition placée ici sera interprétée par IE à la réception de la page. La documentation complète est disponiblesur cette page de Microsoft.

Cette solution a l’avantage d’être conforme au (X)HTML pour les downlevel-hidden uniquement.

Le commentaire conditionnel est à placer dans le code HTML de la page (et non dans le code CSS).

La syntaxe à employer est simple. Par exemple :

<!--[if IE]>
   <p>Cette ligne n’apparaît que sous IE</p>
<![endif]-->

Les comparaisons permettent de réduire le champ d’action :

<!--[if lte IE 5.5]>
  <p>Cette ligne n’apparaît que sous IE version 5.5</p>
<![endif]-->

Les comparaisons possibles sont :

- lt : (less-than) inférieure à la version spécifiée ;
- lte : (less-than or equal) inférieure ou égale à la version spécifiée ;
- gt : (greater-than) supérieure à la version spécifiée ;
- gte : (greater-than) supérieure ou égale à la version spécifiée ;

De plus, le bang (point d’exclamation) permet de valider la négation. Ainsi :

<!--[if !IE 5.5]>
  <p>Cette ligne n’apparaît que sous IE autre que la version 5.5</p>
<![endif]-->

A savoir, il est possible d’imbriquer des commentaires conditionnels :

<!--[if IE]>
<p>Vous êtes sous Internet Explorer <!--[if lt IE 7]>dont la version est inférieure à 7<![endif]--></p>
<![endif]-->

mais Firefox ne l’interprétera pas correctement. Le mieux est d’éviter cette pratique est d’écrire plutôt :

<!--[if IE]>
<p>Vous êtes sous Internet Explorer <![endif]-->
<!--[if lt IE 7]>dont la version est inférieure à 7<![endif]-->
<!--[if IE]></p><![endif]-->

Plussoyez !

Les forums sont fermés.