Les cours css : Hack css

Page d'introduction

Définition

Définition

Les navigateurs ne sont pas tous égaux dans l'interprétation des feuilles de style. Parce qu'ils sont anciens ou modernes, ou qu'ils sont plus ou moins conformes aux standards.

Les hacks CSS sont un moyen de détourner les bugs de certains navigateurs pour avoir un affichage correcte.
Certains hacks CSS rendent vos fichiers CSS non valides (lors de l'utilisation de filtres Explorer par exemple).

Les hacks CSS présentés ci-dessous peuvent ne plus fonctionner sur des nouveaux navigateurs, n'hésitez pas à me prévenir dans ce cas.

Recherche des testeurs :
- safari / mac
- chrome / mac
- ie 8 / tous systèmes windows
- ie 7 / tous systèmes windows
Descendre
Remonter

Commentaires conditionnels

Définition

Les commentaires conditionnels sont propres à Internet Explorer. On les utilise souvent pour contourner les bugs d'implémentation CSS des versions d'Internet Explorer supérieur 5. Spécialement, je n'aime pas cette technique mais elle m'a été très utile une fois.

Les commentaires conditionnels vont vous permettre de mettre du code qui ne sera interprété que pas certains navigateurs ou par certaines version d'Internet Explorer.
Pour détecter si c'est Internet Explorer :
Exemple de code :
<!--[if IE]>
<div>C'est internet explorer</div>
<![endif]-->

Exemple :

Pour détecter si c'est pas Internet Explorer :
Exemple de code :
<!--[if !IE]><!-->
<div>C'est pas internet explorer</div>
<!--<![endif]-->

Exemple :
C'est pas Internet Explorer


Pour détecter un version d'Internet Explorer :
Operateur Description
! N'est pas égale
lt Inférieur
lte Inférieur ou égale
gt Supérieur
gte Supérieur ou égale

Exemple de code :
<!--[if gte IE 6]>
Vous utilisez Internet Explorer 6+
<![endif]-->

Les principales versions d'Internet Explorer sont 5, 5.5, 6 et 7.
Descendre
Remonter

Exemples

C'est pas Internet Explorer :
Exemple de code :
<div style="border:1px solid red"><!--[if ! IE]><!-->C'est pas Internet Explorer <!--<![endif]--></div>

Exemple :
C'est pas Internet Explorer
Vous devez voir dans le cadre rouge "C'est pas Internet Explorer"

C'est Internet Explorer :
Exemple de code :
<div style="border:1px solid red"><!--[if IE]>C'est Internet Explorer<![endif]--></div>

Exemple :
Vous devez voir dans le cadre rouge "C'est Internet Explorer"

C'est une version supérieure à Internet Explorer 5+ :
Exemple de code :
<div style="border:1px solid red">
<!--[if gt IE 5]>Internet Explorer 5+<![endif]--></div>

Exemple :
Vous devez voir dans le cadre rouge "Internet Explorer 5+"

C'est une version inférieure à Internet Explorer 7 :
Exemple de code :
<div style="border:1px solid red">
<!--[if lt IE 7]>Inférieure Internet Explorer 7<![endif]--></div>

Exemple :
Vous devez voir dans le cadre rouge "Inférieure Internet Explorer 7"

C'est une version supérieure ou égale Internet Explorer 7 :
Exemple de code :
<div style="border:1px solid red">
<!--[if gte IE 7]>Supérieure ou égale Internet Explorer 7<![endif]--></div>

Exemple :
Vous devez voir dans le cadre rouge "Supérieure ou égale Internet Explorer 7 "
Descendre
Remonter

Hack css pour ie 6

Définition

Pour créer un css hack qui fonctionne que sous Internet Explorer <=6 vous pouvez utiliser le Hack css suivant :
Exemple de code :
* html identifiant{}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
* html #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :

Pour créer un hack qui fonctionne pas sous Internet Explorer <=6 vous pouvez utiliser le Hack css suivant :
Exemple de code :
*>identifiant{}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
*>#dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour ie 7

Définition

Pour créer un css hack qui fonctionne que sous Internet Explorer 7 vous devez utiliser le Hack css suivant :
Exemple de code :
*+html identifiant{}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
*+html #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :

Il semble que ie5 accepte aussi ce hack css.
Descendre
Remonter

l'underscore plus reconnu

Pour information l'underscore (_) n'est plus reconnu par Internet Explorer 7
Descendre
Remonter

Hack css pour Opéra

Définition

Pour créer un css hack qui fonctionne que sous Opéra vous devez utiliser le Hack css suivant :
Exemple de code :
html:first-child identifiant{}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
html:first-child #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :


Attention n'est plus valable sur Opéra >8 et est reconnut par Safari 3.
Descendre
Remonter

Hack css pour FireFox

Défintion

Pour créer un css hack qui fonctionne que sous le moteur Gecko soit Firefox, Netscape mais pas Internet Explorer, Safari, WebKit, Opera, Konqueror vous pouvez utiliser le Hack css suivant :
Exemple de code :
html:not([lang*=""]) identifiant{}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
html:not([lang*=""]) #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour FireFox >=1

Pour créer un css hack qui fonctionne que sous Firefox >=1 vous pouvez utiliser le Hack css suivant :
Exemple de code :
identifiant, x:-moz-any-link{}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
#dmc, x:-moz-any-link {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour FireFox >=3

Pour créer un css hack qui fonctionne que sous Firefox >=3 vous pouvez utiliser le Hack css suivant :
Exemple de code :
identifiant, x:-moz-any-link, x:default{}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
#dmc, x:-moz-any-link, x:default{
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour Safari

Hack css pour Safari < 3

Pour créer un css hack qui fonctionne que sous Safari < 3 vous pouvez utiliser le Hack css suivant :
Exemple de code :
identifiant{
  border:1px solid green;
  #
  border:1px solid red;
}

Tous les propriétés après le # sont ignorées.
Code css :
Exemple de code :
#dmc {
  border:1px solid green;
  #
  border:1px solid red;
  border:1px solid yellow;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour Safari 3.2

Pour créer un css hack qui fonctionne que sous Safari 3.2 (et peut être version inférieures mais je ne peux pas tester) vous pouvez utiliser le Hack css suivant :
Exemple de code :
html[xmlns*=""] body:last-child identifiant{}

Code css :
Exemple de code :
#dmc { border:1px solid green; }
html[xmlns*=""] body:last-child #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour Safari <=3.1

Pour créer un css hack qui fonctionne que sous Safari <= 3.1 vous pouvez utiliser le Hack css suivant :
Exemple de code :
html[xmlns*=""]:root identifiant{
  border:1px solid green;
}

Problème, ce hack est reconnu par Opéra
Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
html[xmlns*=""]:root #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour Safari 2

Pour créer un css hack qui fonctionne que sous Safari 2 vous pouvez utiliser le Hack css suivant :
Exemple de code :
html:first-child identifiant{
  border:1px solid green;
}

Problème, ce hack est reconnu par Opéra < 9.25 (Non testé)
Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
html:first-child #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour Safari 3+ & Chrome1+

Pour créer un css hack qui fonctionne que sous Safari >=3 et Chrome >=1 vous pouvez utiliser le Hack css suivant :
Exemple de code :
@media screen and (-webkit-min-device-pixel-ratio:0) {
  identifiant{
  border:1px solid green;
  }
}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #dmc {
    border:1px solid red;
  }
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css en cours de test

Hack css pour Ie 8

Pour créer un css hack qui fonctionne que sous internet explorer 8, vous pouvez utiliser le Hack css suivant :
Exemple de code :
/**//*/div.madiv {
  border:1px solid red;
}/* */

Code css :
Exemple de code :
#dmc7 {
  border:1px solid green;
}
/**//*/#dmc7 {
  border:1px solid red;
}/* */

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Tout les navigateurs sauf IE6 à 8

Pour créer un css hack qui fonctionne sur tous les navigateurs sauf internet explorer 6 à 8, vous pouvez utiliser le Hack css suivant :
Exemple de code :
:root *> #dmc8 { color: red }

Code css :
Exemple de code :
#dmc8 {
  border:1px solid green;
}
:root *> #dmc8 {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :

Date du Hack CSS : 17/04/2010
Descendre
Remonter

Hack css Internet Explorer 6 à 8

Pour créer un css hack qui fonctionne sur internet explorer 6 à 8, vous pouvez utiliser le Hack css suivant :
Exemple de code :
#dmc9 { color: red\9; }

Code css :
Exemple de code :
#dmc9 {
  border:1px solid green;
}
#dmc9 {
  border:1px solid red\9;
}

Résultat :
DMC CSS HACK

Copie d'écran :

Date du Hack CSS : 17/04/2010
Descendre
Remonter

Hack css pour IE 8

Pour créer un css hack qui fonctionne sur internet explorer 8, vous pouvez utiliser le Hack css suivant :
Exemple de code :
identifiant { color /*\**/: red\9; }

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
#dmc {
  border /*\**/:1px solid red\9;
}

Résultat :
DMC CSS HACK

Copie d'écran :

Date du Hack CSS : 17/04/2010
Descendre
Remonter

Hack css pour Ie7

Pour créer un css hack qui fonctionne que sous Internet Explorer 7 vous pouvez utiliser le Hack css suivant :
Exemple de code :
*:first-child+html identifiant{
  border:1px solid green;
}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
first-child+html #dmc {
  border:1px solid red;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css Pour Ie 6 et 7

Pour créer un css hack qui fonctionne que sous Internet Explorer 6 et 7 vous pouvez utiliser le Hack css suivant :
Exemple de code :
identifiant{
  border:1px solid green !zonecss;
}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
#dmc {
  border:1px solid red !zonecss;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter

Hack css pour IE 6 et 7

Pour créer un css hack qui fonctionne que sous Internet Explorer 6 et 7 vous pouvez utiliser le Hack css suivant :
Exemple de code :
identifiant{
  *border:1px solid green;
/* ou */
  #border:1px solid green;
}

Code css :
Exemple de code :
#dmc {
  border:1px solid green;
}
#dmc {
  *border:1px solid red ;
}

Résultat :
DMC CSS HACK

Copie d'écran :
Descendre
Remonter