Commentaires conditionnels : Votre site compatible avec tous les navigateurs

L'ensemble des commentaires conditionnels / Hacks CSS

Les commentaires conditionnels ou hacks CSS permettent de détourner les bugs d'interprétation, pour obtenir un affichage correct quelque soit le navigateur utilisé. En effet, chaque navigateur peut interpréter différemment votre feuille de style CSS. Les hacks CSS permettent de donner des indications différentes selon le logiciel internet utilisé.

 

Les commentaires conditionnels pour Internet Explorer en utilisant une feuille de styles supplémentaire

Hack CSS pour cibler Internet Explorer, quelque soit le version utilisé :

La feuille de style ie.css contient uniquement les modifications apportées à la feuille de styles principale.

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

Hack CSS pour cibler une version précise de IE :

Par exemple, le commentaire conditionnel suivant ciblera les versions de IE jusqu'à la version 8 :

<!--[if LTE IE 8]><link href="/css/ie8.css" rel="stylesheet" type="text/css" /><![endif]-->

Il est possible de faire la même chose pour toutes les versions de Internet Explorer. Pour cibler les versions de IE 7 et inférieures :

<!--[if LTE IE 7]><link href="/css/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->

Il est également de changer l'opérateur du commentaire pour cibler au mieux la version de IE :

! N'est pas égal (pour cibler les autres navigateurs)
lt Inférieur
lte Inférieur ou égal
gt Supérieur
gte Supérieur ou égal

 

Les commentaires conditionnels pour Internet Explorer (à inclure dans la feuille de style principale)

Pour cibler IE jusqu'à la version 6 :

* html #identifiant{
  code css pour IE6 et inférieur;
}

 

Pour cibler IE 7 :

*+html #identifiant{
  code css pour IE7;
}

 

Hack css pour Opéra > 8 et Safri 3 (à inclure dans la feuille de style principale)

html:first-child #identifiant{
  code css pour Opéra;
}

 

Hack css pour Opéra

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
#identifiant{
    code css pour Opéra;                    
    }
}

 

Hack css pour Firefox 1 et supérieur (à inclure dans la feuille de style principale)

#identifiant, x:-moz-any-link {
  code css pour Firefox 1;
}

 

Hack css pour Safari

@media screen and (-webkit-min-device-pixel-ratio:0) { #identifiant{ code css pour Safari; } }

 

Hack css pour Safari 2 (à inclure dans la feuille de style principale)

html:first-child #identifiant{
  code css pour Safari 2;
}

Hack css pour Safari 3 et inférieur (à inclure dans la feuille de style principale)

identifiant{
  code css pour Safari 3;
  #
  code css à ignorer pour Safari 3;
}

 

Hack css pour Safari 3.1 et inférieur (à inclure dans la feuille de style principale)

ATTENTION : ce code est aussi reconnu par Opéra

html[xmlns*=""]:root identifiant{
  code css pour Safari 3.1;
}

 

Hack css pour Safari 3.2 (à inclure dans la feuille de style principale)

#identifiant{ code css pour tous les navigateurs; }
html[xmlns*=""] body:last-child #identifiant{
  code css pour Safari 3.2;
}

 

Hack css pour Safari 3 et > et Chrome 1 et >

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #identifiant{
    code css pour Safari 3 et Chrome;
  }
}

 

Feuille de styles pour Smartphone

<link rel="stylesheet" type="text/css" href="/smart.css" media="handheld, only screen and (max-device-width: 480px)" />


Feuille de styles pour Ipad

<link rel="stylesheet" type="text/css" href="/ipad.css" media="screen and (max-device-width: 960px)" />