Hack Css - Les cours Css

Qu'est-ce qu'un Hack Css?

Définition d'un Hack Css

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 correct.
Certains hacks CSS rendent vos fichiers CSS non valides (lors de l'utilisation de filtres Explorer par exemple).
Certains hacks CSS ne sont plus valables au fils du temps car ils utilisaient des fonctionnalités non implémentées comme par exemples les Hacks css se basant sur les sélecteurs Css.

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

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 versions d'Internet Explorer.

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

Exemple :

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

Exemple :

C'est pas Internet Explorer

Pour détecter une 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, 7, 8,et 9. Pour les versions supérieures les commentaires conditionnels ne sont plus reconnus.

Exemples

C'est pas Internet Explorer :

Code HTML : 
<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 :

Code HTML : 
<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+ :

Code HTML : 
<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 :

Code HTML : 
<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 :

Code HTML : 
<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 "

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 :

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 :

Code CSS : 
*+html identifiant{}

Le code CSS:
#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.

l'underscore plus reconnu

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

Hack css pour Ie7

Pour créer un css hack qui fonctionne que sous Internet Explorer 7 vous pouvez utiliser le Hack css suivant :

Code CSS : 
*:first-child+html identifiant{
  border:1px solid green;
}

Le code CSS :
#dmc {
  border:1px solid green;
}
*:first-child+html #dmc {
  border:1px solid red;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Hack css pour ie 6 et 7

Hack css de l'étoile

Pour créer un css hack qui fonctionne que sous Internet Explorer 6 et 7 vous pouvez utiliser le Hack css suivant :

Code CSS : 
identifiant{
  *border:1px solid green;
/* ou */
  #border:1px solid green;
}

Le code CSS :
#dmc {
  border:1px solid green;
}
#dmc {
  *border:1px solid red ;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Hack css !

Pour créer un css hack qui fonctionne que sous Internet Explorer 6 et 7 vous pouvez utiliser le Hack css suivant :

Code CSS : 
identifiant{
  border:1px solid green !zonecss;
}

Le code CSS :
#dmc {
  border:1px solid green;
}
#dmc {
  border:1px solid red !zonecss;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Hack css pour ie 8 et 9

Définition

Pour créer un css hack qui fonctionne sur internet explorer 8 et 9, vous pouvez utiliser le Hack css suivant :

Code CSS : 
identifiant { color: red0/; }

Le code CSS :
#dmc {
  border:1px solid green;
}
#dmc  {
  border :1px solid red0/;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Date du Hack CSS : 17/04/2010

Hack css pour ie 9

Définition

Pour créer un css hack qui fonctionne que sous Internet Explorer 9 vous pouvez utiliser le Hack css suivant :

Code CSS : 
:root .identifant{ color:green/IE9; }

Le code CSS :
#dmc {
  border:1px solid green;
}
:root #dmc {
  border:1px solid red/IE9;
}

Résultat :

DMC CSS HACK

Copie d'écran :

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 :

Code CSS : 
html:first-child identifiant{}

Le code CSS :
#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.

Hack css pour Opera 9.5+

Pour créer un css hack qui fonctionne sur Opera 9.5+, vous pouvez utiliser le Hack css suivant :

Code CSS : 
x:-o-prefocus, identifant  { color: red; }

Le code CSS :
#dmc99 {
  border:1px solid green;
}
x:-o-prefocus, #dmc99  {
  border:1px solid red;
}

Résultat :

DMC CSS HACK

Copie d'écran :

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 :

Code CSS : 
html:not([lang*=""]) identifiant{}

Le code CSS :
#dmc {
  border:1px solid green;
}
html:not([lang*=""]) #dmc {
  border:1px solid red;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Attention n'est plus valable sur Opéra >9.5 et est reconnut par Safari 3.2 et Internet Explorer 9.

Hack css pour FireFox >=1.5

Pour créer un css hack qui fonctionne que sous Firefox >=1.5 vous pouvez utiliser le Hack css suivant :

Code CSS : 
@-moz-document url-prefix() {
  identifiant {
  }
}

Le code CSS :
#dmc {
  border:1px solid green;
}
@-moz-document url-prefix() {
  #dmc {
    border:1px solid red;
  }
}

Résultat :

DMC CSS HACK

Copie d'écran :

Hack css pour FireFox >=1

Pour créer un css hack qui fonctionne que sous Firefox >=1 vous pouvez utiliser le Hack css suivant :

Code CSS : 
identifiant, x:-moz-any-link{}

Le code CSS :
#dmc {
  border:1px solid green;
}
#dmc, x:-moz-any-link {
  border:1px solid red;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Hack css pour FireFox >=3

Pour créer un css hack qui fonctionne que sous Firefox >=3 vous pouvez utiliser le Hack css suivant :

Code CSS : 
identifiant, x:-moz-any-link, x:default{}

Le code CSS :
#dmc {
  border:1px solid green;
}
#dmc, x:-moz-any-link, x:default{
  border:1px solid red;
}

Résultat :

DMC CSS HACK

Copie d'écran :

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 :

Code CSS : 
identifiant{
  border:1px solid green;
  #
  border:1px solid red;
}

Toutes les propriétés après le # sont ignorées.

Le code CSS :
#dmc {
  border:1px solid green;
  #
  border:1px solid red;
  border:1px solid yellow;
}

Résultat :

DMC CSS HACK

Copie d'écran :

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 :

Code CSS : 
html[xmlns*=""] body:last-child identifiant{}

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

Résultat :

DMC CSS HACK

Copie d'écran :

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 :

Code CSS : 
html[xmlns*=""]:root identifiant{
  border:1px solid green;
}

Problème, ce hack est reconnu par Opéra

Le code CSS :
#dmc {
  border:1px solid green;
}
html[xmlns*=""]:root #dmc {
  border:1px solid red;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Hack css pour Safari 2

Pour créer un css hack qui fonctionne que sous Safari 2 vous pouvez utiliser le Hack css suivant :

Code CSS : 
html:first-child identifiant{
  border:1px solid green;
}

Problème, ce hack est reconnu par Opéra < 9.25 (Non testé)

Le code CSS :
#dmc {
  border:1px solid green;
}
html:first-child #dmc {
  border:1px solid red;
}

Résultat :

DMC CSS HACK

Copie d'écran :

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 :

Code CSS : 
@media screen and (-webkit-min-device-pixel-ratio:0) {
  identifiant{
  border:1px solid green;
  }
}

Le code CSS :
#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 :

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 :

Code CSS : 
/**//*/div.madiv {
  border:1px solid red;
}/* */

Le code CSS :
#dmc7 {
  border:1px solid green;
}
/**//*/#dmc7 {
  border:1px solid red;
}/* */

Résultat :

DMC CSS HACK

Copie d'écran :

Tous 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 :

Code CSS : 
:root *> #dmc8 { color: red }

Le code CSS :
#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

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 :

Code CSS : 
#dmc9 { color: red9; }

Le code CSS :
#dmc9 {
  border:1px solid green;
}
#dmc9  {
  border:1px solid red9;
}

Résultat :

DMC CSS HACK

Copie d'écran :

Date du Hack CSS : 17/04/2010

Hack css pour Windows Phone 7

Commentaires conditionnels

Depuis l'arrivé de Windows Phone 7, les commentaires conditionnels propres à Internet Explorer acceptent la valeur IEMobile avec ou sans version.

Pour détecter si c'est Internet Explorer Mobile :
<!--[if IEMobile]> 
<div>C'est Internet Explorer Mobile.</div>
<![endif]-->
<!--[if IEMobile 7]> 
<div>C'est Internet Explorer Mobile.</div>
<![endif]-->

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

Hack css pour ie 9+, f3.5, s4, ...

Les medias queries

Depuis l'arrivé des Media Queries, vous pouvez cible simplement les navigateurs suivant FireFox 3.5+, Safari 4+, Internet Explorer 9+, Opera 9+ sans pour autant faire vraiment de la Media Queries, il se base dur le mot cle "only".
Ce hack est particulièrement, intéressant pour ie9+ quand vous utilisez des propriétés filter css pour les versions antérieures. Il permet de mettre la propriété css filter à none pour les versions ie9+.

Le code CSS :
#dmc33{border:1px solid green;}
@media only screen{
  #dmc33{border:1px solid red;}	
}

Résultat :

DMC CSS HACK

Copie d'écran :

La règle @supports

Tester une propriété et sa valeur en css

La règle est apparue en Css3. Elle permet de tester si une propriété ou sa valeur sont reconnues par le navigateur. On peut cumuler les tests et y jouter les opérateurs not, or et and.

Exemple de test avec @supports : 
@supports not (font-size: calc(15px + 1rem)) {
  body { font-size: 16px } 
}