This page has been robot translated, sorry for typos if any. Original content here.

Hacks CSS

Navigateurs et standards. Poursuite éternelle. En raison d'incohérences par rapport aux normes et de différentes manières de rendre les pages, un concepteur de site Web a généralement besoin de lisser ces incohérences (utiliser des hacks). En conséquence, au lieu d'un travail efficace, le concepteur entre dans des relations artificielles avec les navigateurs, perdant ainsi un temps précieux.

Css Hack est une construction CSS spéciale que certains navigateurs comprennent et ignore d'autres. L'utilisation de hacks parle souvent du typographe peu professionnel. Mais il existe des cas où le piratage est le seul moyen de résoudre le problème (par exemple, des erreurs de navigateur connues (voir "Problèmes de navigation dans les navigateurs")). N'oubliez pas qu'à notre époque, la hâte est un phénomène courant. Par conséquent, le moment choisi pour "hier" - personne ne sera surpris. Donc, il n'y a pas de temps pour comprendre pourquoi cela ne va pas comme vous voulez.

Plus hacks css

C'est une solution rapide. Lignes supplémentaires prescrites et tout va bien, imposer plus loin.

Inconvénients des hacks CSS

  1. Il n'y a aucune certitude quant au comportement du site avec la publication de nouvelles versions de navigateurs. Par exemple, ils ont écrit du code avec un piratage pour Firefox, un mois plus tard, une nouvelle version de Safari est sortie et il s’avère qu’elle perçoit également ce piratage! Nous devons le refaire.
  2. Beaucoup de piratages ne passent pas la validation - le danger de ceci est décrit dans le paragraphe précédent.

Si possible, essayez d'éviter d'utiliser des hacks. Pour corriger les erreurs IE, utilisez un fichier CSS séparé, connecté à l'aide de commentaires conditionnels.

Glossaire

Cross-browser - la propriété du site à afficher et à utiliser dans tous les navigateurs populaires est identique.

Pirater - corriger une erreur ou ajouter une nouvelle fonction en utilisant une autre fonctionnalité non documentée ou implémentée de manière incorrecte.

Un bidouillage sale est une solution rapide à un problème, principalement à court terme, privant l'essence du code de la beauté intérieure et en contradiction avec sa structure interne.

Piratages CSS pour navigateur Internet Explorer

ZOOM
Hack conçu pour déterminer hasLayout
  * { zoom : 1 ;
  }

	

PNG dans IE6:
Pour IE6, le fichier htc iepngfix.htc est inclus dans le fichier cssf-ie6.css afin de permettre le bon fonctionnement des images de fond du format PNG pour tous les éléments. Utilisé IE PNG Fix v1.0 RC4 dernière version.
  * { behavior : url ( "css / iepngfix.htc" );
  }

	

Si les octets sont importants, voici un exemple d'utilisation d'un filtre pour IE:
  .class {
  
   fond : aucun;
  
 
   filtre : progid: DXImageTransform.Microsoft.AlphaImageLoader (
  
   src = '/images/png-image.png' ,
  
   sizingMethod = 'scale'
  
   )
  
  }

	

Séparation des styles de IE6:
  html> corps.  classe {} tête + corps.  classe {} html: premier-enfant.  classe {}

	

Séparation des styles de IE6 et IE7:
  html> / ** / body {}
 
 

Séparation des styles de IE6 - IE8:
  * | html.  class {} html: not ([lang * = "" ])).  classe {}

	

Commentaires conditionnels dans IE:
Les commentaires conditionnels fonctionnent uniquement dans IE sous Windows. Pour les autres navigateurs, ils sont des commentaires normaux. Vous pouvez donc les utiliser sans conséquences graves. La syntaxe est la suivante:
  <! - [ if condition]> < link href = " styles.css " rel = " stylesheet " media = " all " /> < ! [endif] - > <! - [if! condition]> <link href = "styles.css" rel = "stylesheet" media = "all" /> <! [endif] -> / * Si vous souhaitez ignorer un morceau de code avec un explorateur, utilisez! condition * /
 
  / * La condition peut être:
 
  IE - pour n'importe quelle version d'IE
 
  lt IE v - (inférieur à) pour tous les navigateurs IE, dont la version est inférieure à v
 
  lte IE v - (inférieur ou égal) pour tous les navigateurs IE dont la version est inférieure à v, ou identique
 
  gte IE v - (supérieur ou égal) - pour IE dont la version est supérieure ou égale à v
 
  gt IE v - (supérieur à) - pour IE, dont la version est supérieure à v.
  * /
 
 

Commentaires conditionnels dans IE6, IE7, IE8:
  <! - [if IE 6 ]> < link href = " ie6.css " rel = " stylesheet " media = " all " /> < ! [endif] - > / * Feuille de style pour IE6 * /
 
  <! - [if IE 7 ]> < link href = " ie7.css " rel = " stylesheet " media = " all " /> < ! [endif] - > / * Feuille de style pour IE7 * /
 
  <! - [if IE 8 ]> < link href = " ie8.css " rel = " stylesheet " media = " all " /> < ! [endif] - > / * Feuille de style pour IE8 * /
 
 

Modèle de boîte bidouille:
Dans IE, il y a des problèmes lorsque la bordure et le remplissage sont inclus dans la largeur de l'élément. Modèle de boîte bidouille les fixer.
  .  classe {
 
  rembourrage: 4 em; 
  bord: 1 em rouge solide; 
  largeur: 30 em; 
  largeur / ** /: / ** / 25 em; 
 }
 / * Pour IE, la largeur du bloc est inférieure au padding + border * /

	

Min-width et max-width dans IE:
IE ne comprend pas ces propriétés css. Le bloc bidouille ressemble à ceci:
  .class {
  
   largeur min : 500 px;
  
   width : expression (
  
   document.body.clientWidth < 500 ?
  "500px" : "auto"
  
   )
  } / * Pour IE, la largeur du bloc est raccourcie avec padding + border * /

	

  .class {
  
   largeur min : 500 px;
  
   largeur maximale : 750 px;
  
   width : expression (
  
   document.body.clientWidth < 500 ?
  "500px" :
  
   document.body.clientWidth> 750 ?
  "750px" : "auto"
  
   )
  } / * Pour IE, la largeur du bloc est raccourcie avec padding + border * /

	

Taille minimum de Dustin Diaz
  .class {
  
   hauteur min . : 100 %;
  
   hauteur : auto ! important ;
  
   hauteur : 100 %;
  
  }

	

Sélecteurs simples:
Il n'est pas nécessaire de créer un fichier séparé pour différents navigateurs. Vous pouvez utiliser des sélecteurs css individuels dans le fichier css principal:
  * html.  class { } / * Si la page html a un doctype, ce hack fonctionne dans IE6 * / / * Dans le cas du mode quirks, le hack fonctionne dans IE6 et IE7.
  * / *: premier-enfant + html.  class { } / * Pour IE 7 et inférieur (premier-enfant) * / * + html.  class { } / * Pour IE 7 * / *: premier-enfant + html.  class { } / * Pour IE 7 * / html> body.  class { } / * Pour IE 7 et les navigateurs classiques * / html> / ** / body .class {} / * Pour les navigateurs classiques (sauf IE 7) * / / * Exemple:
 
  .class {background: red}
 
  * html .class {background: green}
 
  Dans tous les navigateurs sauf IE6 et les versions antérieures, l’arrière-plan sera rouge, et dans les navigateurs IE6 et les versions antérieures, vert * /

	

Hacks sales pour IE6:
  .  classe { _background : # F00;
  } .  classe {- background : # F00;
  } .  classe { c \ olor : # F00;
  } / * Ne fonctionne pas avant les lettres a, b, c, d, e, f * /

	

Hacks sales pour IE7:
  > body { background : # F00 ;
  } / * sélectionne l'élément body uniquement dans IE7 * / html * { background : # F00 ;
  } / * sélectionne tous les éléments à l'intérieur de l'élément html.
  Seulement pour IE7 et ci-dessous * / -, .class { background : # F00 ;
  } .class { background : # F00 ! important !
  ;
  } / * Le hack fonctionne par analogie avec la propriété! Important.
  Fonctionne pour IE7 et les versions antérieures * /

	

Hacks sales pour IE8:
  .class { background : # F00 \ 0 /;
  } / * sélectionne l'élément body uniquement dans IE7 * /

	

Les hacks sales travaillant dans IE6 et IE7:
  .class { * background : # F00 ;
  } .class { // background : # F00 ;
  } .class { background : # F00 ! ie;
  } / * Hack fonctionne par analogie avec la propriété! Important * /

	

Les hacks CSS pour le navigateur Mozila FireFox

Hacks pour toutes les versions de MFF:
  #class [id = class] { color : # F00 ;
  } @ -moz-document url-prefix () { .class { color : # F00 ;
  } }
 *> .class { color : # F00 ;
  }

	

Pour le CFP 1.5 et supérieur:
  .class , x : -moz-tout-lien , x : only-child { color : # F00 ;
  }

	

Pour CFP 2.0 et supérieur:
  corps : vide .class { color : # F00 ;
  } #class [id = CLASS] { color : # F00 ;
  } html > / ** / body .class , x : -moz-any-link { color : # F00 ;
  }

	

Pour MFF 3.0 et éventuellement au-dessus:
  html> / ** / body .class, x: -moz-tout-lien, x: default {color: # F00;
  }
 
 

Les hacks CSS pour le navigateur Google Chrome

 corps : nième de type (1) .class { background : # 000;
  }
 

Hacks CSS pour navigateur Opera

Hacks pour toutes les versions d'Opera:
  @ media all et (-webkit-min-device-pixel-ratio: 10000 ),
  
  pas tous et (-webkit-min-device-pixel-ratio: 0 ) { 
  .style { background : # F00 ;
  }

	 }
	

  @ media all et (min-width: 0 px)
 
   { 
  .class {
  
   couleur : # F00 ;
  
   }
 
	 }
	

Pour Opera 6:
  @ media all et (min-width: 1 px)
 
   { { }
 
  .class {
  
   couleur : # F00 ;
  
   }
 
	 }
	

Pour Opera 7, 8:
  @ media all et (min-width: 1 px)
 
   { 
  .class {
  
   couleur : # F00 ;
  
   }
 
	 }
	

Pour Opera 9:
  @ media all et (largeur)
 
   { 
  .class {
  
   couleur : # F00 ;
  
   }
 
	 }
	

  @ media all et (min-width: 0 px)
 
   { 
  tête ~ corps. classe {
  
   couleur : # F00 ;
  
   }
 
	 }
	

Hacks CSS pour le navigateur Safari

  corps : premier du type .class { color : # F00 ;
  } html : root * .class { color : # F00 ;
  } body : premier du type .class { color : # F00 ;
  } body : premier du type .class { color : # F00 ;
  }

	

  @ écran média et (-webkit-min-device-pixel-ratio: 0 )
 
   { 
  .class {
  
   couleur : # F00 ;
  
   }
 
 }
 / * Hack pour Opera et Safari * /

	

Hacks sélecteur

	 / ***** Sélecteur Hacks ****** /

	 / * IE6 et ci-dessous * /
	 * html #uno {color: red}

	 / * IE7 * /
	 *: premier-enfant + html #dos {couleur: rouge}

	 / * IE7, FF, Saf, Opera * /
	 html> body #tres {color: red}

	 / * IE8, FF, Saf, Opera (Tout sauf IE 6.7) * /
	 html> / ** / body #cuatro {couleur: rouge}

	 / * Opera 9.27 et inférieur, safari 2 * /
	 html: premier-enfant #cinco {couleur: rouge}

	 / * Safari 2-3 * /
	 html [xmlns * = ""] body: last-child #seis {color: red}

	 / * safari 3+, chrome 1+, opera9 +, ff 3.5+ * /
	 body: nth-of-type (1) #siete {couleur: rouge}

	 / * safari 3+, chrome 1+, opera9 +, ff 3.5+ * /
	 corps: premier-de-type #ocho {couleur: rouge}

	 / * saf3 +, chrome1 + * /
	 Écran @média et (-webkit-min-device-pixel-ratio: 0) {
	  #diez {couleur: rouge}
	 }

	 / * iPhone / kit web mobile * /
	 Écran @média et (largeur maximale du périphérique: 480px) {
	  #veintiseis {color: red}
	 }


	 / * Safari 2 - 3.1 * /
	 html [xmlns * = ""]: root #trece {color: red}

	 / * Safari 2 - 3.1, Opera 9.25 * /
	 * | html [xmlns * = ""] #catorce {color: red}

	 / * Tout sauf IE6-8 * /
	 : root *> #quince {color: red}

	 / * IE7 * /
	 * + html #dieciocho {couleur: rouge}

	 / * IE 10+ * /
	 Écran @média et (-ms-haut-contraste: actif), (-ms-haut-contraste: aucun) {
	  #veintiun {color: red;  }
	 }

	 / * Firefox uniquement.  1+ * /
	 #veinticuatro, x: -moz-any-link {color: red}

	 / * Firefox 3.0+ * /
	 #veinticinco, x: -moz-tout-lien, x: défaut {couleur: rouge}

	 / * FF 3.5+ * /
	 corps: non (: - moz-handler-block) #cuarenta {couleur: rouge;  }
	

Hacks d'attributs

  / ***** Attribute Hacks ****** /
 / * IE6 * /
 #once {_color: blue}
 / * IE6, IE7 * /
 #doce {* color: blue;  / * ou #color: blue * /}
 / * Tout sauf IE6 * /
 #diecisiete {color / ** /: blue}
 / * IE6, IE7, IE8, mais aussi IE9 dans certains cas :( * /
	 #diecinueve {color: blue \ 9;  }

	 / * IE7, IE8 * /
	 #veinte {color / * \ ** /: blue \ 9;  }

	 / * IE6, IE7 - agit comme un important * /
	 #veintesiete {color: blue! ie;  } / * chaîne après!  peut être n'importe quoi * /

	 / * IE8, IE9 * /
	 #anotherone {color: blue \ 0 /;} / * doit aller à la fin de toutes les règles * /

	 / * IE9, IE10 * /
	 Écran @média et (largeur minimale: 0 \ 0) {
	  #veintidos {couleur: rouge}
	 }
	

Préfixe de propriété

 / * Propriété préfixe hacks * / / * IE6 uniquement - toute combinaison de ces caractères * / _ -?  ¬ ¦ / * IE6 / 7 uniquement - toute combinaison de ces caractères * /!  $ & * () =% + @ ,.  / `[] # ~?  : <> | 

@ media hacks

	 / * @media hacks * /

	 / * IE6 / 7 uniquement (via Keith Clarke) * /
	 @ media screen \ 9 {}

	 / * IE6 / 7/8 (via Keith Clarke) * /
	 @media \ 0screen \, screen \ 9 {}

	 / * IE8 (via Keith Clarke) * /
	 @media \ 0screen {}

	 / * IE8 / 9 * /
	 Écran @média \ 0 {}
	

Liste des hacks CSS pour différents navigateurs, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

  / * hack pour IE8 uniquement * / .myClass { 
  couleur: rouge \ 0 /;  / * rouge * /
  remplissage: 70px \ 0 /;  / * indent 70px pour Internet Explorer 8 uniquement * /
 }
 / * IE 6 uniquement * / * html .myClass {
 ...
 } 
 / * Tous sauf les normes IE6 * / .myClass { 
 propriété / ** /: valeur; 
 } 
 / * Firefox et IE 7, et au-dessus * / html> body .myClass {
  ...
 }
 / * Navigateurs modernes uniquement (pas IE 7) * / html> / ** / body .myClass {
 ...
 }
 / * IE 7 uniquement * / *: premier-enfant + html .myClass {
  ...
 }
 / * Firefox uniquement * / @ -moz-document url-prefix () {
 .myClass {
 ...
 }
 }
 / * Opera Only * / noindex: -o-prefocus, .MyClass {
 couleur: rouge;
 }
 / * IE7 uniquement * / div [class ^ = "myClass"] .myClass2 { 
 ...
 }
 / * IE7 uniquement * / * + html .myClass { 
 ...
 } 
 / * bidouille pour Opera <= 9 * / html: premier-enfant .myClass {
 ...
 } 
 / * Firefox, Opera, Konqueror, Safari * / * | html .myClass { 
 ...
 }
 / * IE8 beta 2 seulement (?) * / Html: premier-enfant .myClass [attr | = ab] { 
 ...
 } 
 / * IE5 / Mac uniquement * / / * \ * // * / .myClass {property: value;  } / ** / 
 / * Gecko uniquement * / .myClass: not ([attr * = ""]) { 
 ...
 } 
 / * Opera * / @media all et (min-width: 0px) { 
 html: premier-enfant .myClass { 
 ...
 } 
 } 
 / * Safari uniquement * / .myClass: not (: root: root) { 
 ...
 } 
 / * Safari 3.0 et Chrome uniquement * / @ Écran multimédia et (-webkit-min-device-pixel-ratio: 0) {
  .myClass {
  ....
  }
 }
 / * Navigateur Chrome * / body: nth-of-type (1) .myClass {
  ...
 }
 / * Safari css du navigateur Safari * / body: premier du type .myClass {propriété: valeur;}

CSS pour l'explorateur

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

	 <! - [si IE 6.0]> 
		 ... si IE6 
	 <! [endif] -> 
		
	 <! - [si IE 7]> 
		 ... si IE7
	 <! [endif] -> 

	 <! - [si gte IE 5]> 
		 ... si IE5 +
	 <! [endif] -> 

	 <! - [si lt IE 6]> 
		 .. si inférieur à IE 6
	 <! [endif] -> 

	 <! - [si lte IE 5.5]> 
		 ... si inférieur ou égal à IE 5.5 
	 <! [endif] -> 

	 <! - [si gt IE 6]> 
		 ... si IE 6 est plus élevé 
	 <! [endif] ->
	

Opacité du fond dans IE, Firefox, Opera

  .myClass {
	 couleur de fond: # 000;	
	 -moz-opacité: 0,82;  / * Firefox * / 
	 opacité: 0,82;  / * Opéra * /
	 filtre: alpha (opacité = 82);  / * IE * /
	 }
	

Supprimer le bouton de remplissage supplémentaire dans Firefox

  bouton :: - moz-focus-inner { 
	  bordure: 0;
	  rembourrage: 0;
	 }
	

Chrome / Firefox ...?

  bouton {
	  -webkit-border-fit: lignes;
	 }
	

Firefox 2

  html > / ** / body .selector, x: -moz-tout-lien { color : lime ;
  }
 

Firefox 3

  html > / ** / body .selector, x: -moz-tout-lien, x: default { color : lime ;
  }
 

Tout firefox

  @ -moz-document url-prefix () {
 
  .selector { couleur : citron vert ;
  } }
 

Avancée



Hacks pour IE

La syntaxe Qui comprend Exemple
Pass validation
* html IE6
		 div {
		 arrière-plan: # ff0000;
		 }
		 * html div {
		 arrière-plan: # 000;
		 }
		
! important IE6
  div {
		 arrière-plan: # ff0000! important;  / * pour tous les navigateurs * /
		 arrière-plan: # 000;  / * pour IE6 * /
		 }
		
*: premier-enfant + html IE7
  div {
		 arrière-plan: # ff0000;
		 }
		 *: first-child + html div {
		 arrière-plan: # 000;
		 }
		
* + html IE7 +
peut comprendre Opera 9 et inférieur
  div {
		 arrière-plan: # ff0000;
		 }
		 * + html div {
		 arrière-plan: # 000;
		 }
		
html> corps tout comprendre sauf IE6
  div {
		 arrière-plan: # ff0000;
		 }
		 html> body div {
		 arrière-plan: # 000;
		 }
		
# ie # correctif tout comprendre sauf IE8
  div {
		 arrière-plan: # ff0000;  / * pour ie8 * /
		 }
		 div, # ie # correctif {
		 arrière-plan: # 000;  / * pour les autres navigateurs * /
		 }
		
Ne pas passer la validation (non recommandé)
_propriété: valeur
et
-propriété: valeur
IE6
  div {
		 arrière-plan: # ff0000;  / * pour tous les navigateurs * /
		 _background: # 000;  / * pour IE6 * /
		 }
		
* propriété: valeur
et
// propriété: valeur
IE6
IE7
  div {
		 arrière-plan: # ff0000;  / * pour tous les navigateurs * /
		 * fond: # 000;  / * pour IE6 et IE7 * /
		 }
		
html * IE6
IE7
Chrome
Safari
  div {
		 arrière-plan: # ff0000;
		 }
		 html * div {
		 arrière-plan: # 000;
		 }
		
! ie IE6
IE7
  div {
		 arrière-plan: # ff0000;  / * pour tous les navigateurs * /
		 fond: # 000! ie;  / * pour IE6 et IE7 * /
		 }
		

Hacks pour Firefox

La syntaxe Qui comprend Exemple
Ne pas passer la validation (non recommandé)
html: root FF 1.5+
Opera 9.6
mise à jour: 14/01/10
non pertinent
(comprendre les nouvelles versions
opéra, chrome, safari)
  div {
		 arrière-plan: # ff0000;
		 }
		 html: racine div {
		 arrière-plan: # 000;
		 }
		
x: -moz-any-link FF 1.5+
IE7
  div {
		 arrière-plan: # ff0000;
		 }
		 div, x: -moz-any-link {
		 arrière-plan: # 000;
		 }
		
@ -moz-document url-prefix () FF 1.5+
  div {
		 arrière-plan: # ff0000;
		 }
		 @ -moz-document url-prefix () {
		 div {
		 arrière-plan: # 000;
		 }}
		

Hacks pour l'opéra

La syntaxe Qui comprend Exemple
Passe la validation
html: premier enfant Opéra 7-9.01
  div {
		 arrière-plan: # ff0000;
		 }
		 html: premier-enfant div {
		 arrière-plan: # 000;
		 }
		
Ne pas passer la validation (non recommandé)
@media all et (min-width: 0)
validé par CSS3
Opera 9-9.6
mise à jour 14/01/10
pas pertinent
(compris par nouveau
versions ff, chrome, safari)
  div {
		 arrière-plan: # ff0000;
		 }
		 @media all et (min-width: 0) {
		 div {
		 arrière-plan: # 000;
		 }}
		
html> / ** / body noindex: -o-prefocus, html> / ** / body Opera 9.5-10
  html> / ** / body noindex: -o-prefocus, html> / ** / body p {
		 couleur: # 0f0
		 }
		

Hacks pour Chrome et Safari

La syntaxe Qui comprend Exemple
Ne pas passer la validation (non recommandé)
corps: nième de type (1)
mise à jour 14.01.10 - non pertinent (compris par les nouvelles versions de opera, ff, safari, chrome)
  div {
		 arrière-plan: # ff0000;
		 }
		 corps: nième de type (1) div {
		 arrière-plan: # 000;
		 }
		
html: root *
mise à jour 14.01.10 - non pertinent (compris par les nouvelles versions de opera, ff, safari, chrome)
  div {
		 arrière-plan: # ff0000;
		 }
		 html: root * div {
		 arrière-plan: # 000;
		 }
		
html *
Safari
Chrome
IE6
IE7
  div {
		 arrière-plan: # ff0000;
		 }
		 html * div {
		 arrière-plan: # 000;
		 }
		

Khaki Konqueror

La syntaxe Qui comprend Exemple
Ne pas passer la validation (non recommandé)
html: not (: nth-child (1)) #element
Konqueror
FF 3.5
  #div {
		 arrière-plan: # ff0000;
		 }
		 html: not (: nth-child (1)) #div {
		 arrière-plan: # 000;
		 }