Partagez winpix...

Facebook Twitter Google Delicious RSS

Les hacks CSS

Posté le 18 mars 2010 par winpix

La compatibilité entre navigateur, voilà l'obsession des Webmasters d'aujourd'hui. Bien souvent c'est Internet Explorer et tout particulièrement IE6 qui provoque chez nous l'envie d'utiliser ces fameux Hacks CSS. Le point sur une technique à utiliser avec modération.

Tout d'abord il vous faut pouvoir tester sur les différentes versions d'Internet Explorer, nous vous recommandons le logiciel IE TESTER vous pourrez tester votre site de IE 5 à IE 9 en un clic.

Gérer des feuilles de styles spécifiques selon le navigateur

La méthode la plus propre est de gérer les différences de styles dans des feuilles spécifiques aux navigateurs.

Pour cela on peut mettre en commentaires du code qui sera interprété que pas certains navigateurs ou par certaines versions d'Internet Explorer.

Ces commentaires sont à placer entre les balises <head> de votre page, ils servent à exécuter une feuille de style spécifique.

Détecter si Internet Explorer
<!--[if IE]><!-->
<link href="ie.css… />
<!--<![endif]-->

Détecter si différent de IE
<!--[if !IE]><!-->
<link href="notie.css… />
<!--<![endif]-->

Détecter si IE6
<!--[if IE6]><!-->
<link href="ie6.css… />
<!--<![endif]-->

Détecter si inférieur ou égal à IE6
<!--[if lte IE6]><!-->
<link href="ie6.css… />
<!--<![endif]-->


Ci-dessous le tableau des opérateurs pour gérer les versions
 

Operateur Description
! N'est pas égale
lt Inférieur
lte Inférieur ou égale
gt Supérieur
gte Supérieur ou égale

Détecter si supérieur ou égal à IE 7
<!--[if gte IE7]><!-->
<link href="ie7.css… />
<!--<![endif]-->

Voilà grâce au tableau vous pourrez construire vos commentaires comme bon vous semble.

Hack css pour IE 6

Une autre méthode consiste à insérer directement votre hack dans le css commun.

Hack css fonctionnant sous IE6 et inférieur

* html identifiant{}

Exemple

#style1 { background : green; }
* html #style1 { background : red; } /* hack pour ie6 et < */

Hack css pour exclure IE6

* > identifiant{}

Exemple

#style1 { background : green; }
* > #style1 { background : red; } /* Tous les navigateurs sauf IE6 */

Hack css IE 7

Hack qui fonctionne uniquement sur IE 7

* + html identifiant{}

Exemple

#style1 { background : green; }
* + html #style1 { background : red; } /* hack pour IE7 */

Il semble que ce hack soit aussi reconnu par IE 5.

L'underscore plus reconnu

Ce hack « _ » souvent utilisé pour IE7 n’est plus reconnu.

Hack css pour IE6 et IE7

identifiant{
  * background : red;
/* ou */
  # background : red;
}

Exemple

#style1 {
background : green;
* background : red; /*IE6 et IE7*/
}


Ceci ne fonctionne pas

* + html #style1,
* html #style1 { background : red; }

Partager cet article

Facebook Twitter Google My Space Delicious

A lire également dans CSS / Tutoriaux

Commentaires

Vous pouvez poster votre commenataire sans être identifié.

En revanche si vous possédez un compte, identifiez-vous cela vous évitera de renseigner à chaque vos coordonnées.

Les champs marqués d’une * sont obligatoires.

Ce formulaire accepte le BBCODE.


Identification