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

CSS hacks

Navigateurs et standards. Poursuite éternelle. En raison des incohérences avec les normes, en raison des différentes manières de rendre les pages, la plupart du temps du concepteur de Web est passé afin de compenser ces discordances (utilisation des hacks). En conséquence, au lieu d'un travail efficace, le concepteur entre des relations non naturelles avec les navigateurs, perdant un temps précieux.

Css Hack est un design CSS spécial que certains navigateurs comprennent et ignorent les autres. L'utilisation de hacks parle souvent du manque de professionnalisme du profane. Mais il y a des cas où le hack est le seul moyen de résoudre le problème (par exemple, des bugs de navigateur bien connus (voir "Bugs du navigateur")). Ne pas oublier que dans notre temps, la hâte est un phénomène courant. Par conséquent, les termes "pour hier" - personne n'est surpris. Il n'y a donc pas de temps pour comprendre pourquoi ça ne sort pas comme tu veux.

Plus css hacks

C'est une solution rapide au problème. Ont enregistré des lignes supplémentaires et tout est excellent, nous faisons plus loin.

Inconvénients des hacks de css

  1. Il n'y a aucune certitude quant à la façon dont le site se comportera avec la sortie de nouvelles versions de navigateurs. Par exemple, ils ont écrit un code avec un hack pour Firefox, une nouvelle version de Safari est sortie dans un mois, et il s'avère qu'elle perçoit aussi ce hack! Nous devons le refaire.
  2. Beaucoup de khakis ne réussissent 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 distinct, connecté à l'aide de commentaires conditionnels.

Glossaire

Cross-browser - la propriété d'un site à afficher et à travailler dans tous les navigateurs populaires est identique.

Hack - correction d'une erreur ou ajout d'une nouvelle fonction en utilisant une autre fonctionnalité non documentée ou mal implémentée.

Un hack sale est une solution rapide à un problème, principalement à court terme, privant l'essence du code de la beauté intérieure et désharmonisant avec son arrangement interne.

CSS hacks pour Internet Explorer

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

	

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

	

Si les octets sont importants, il existe un exemple d'utilisation d'un filtre pour IE:
  .class {
  
   arrière - plan : aucun;
  
 
   filtre : progid: DXImageTransform.Microsoft.AlphaImageLoader (
  
   src = '/images/png-image.png' ,
  
   sizingMethod = 'échelle'
  
   )
  
  }

	

Séparation des styles de IE6:
  html> corps.  class {} tête + corps.  class {} 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 ne fonctionnent que dans IE sous Windows, pour d'autres navigateurs, ils sont des commentaires normaux, donc ils peuvent être utilisés sans douleur. La syntaxe est la suivante:
  <! - [ if condition]> < lien href = " styles.css " rel = " stylesheet " media = " tous " /> < ! [endif] - > <! - [if! condition]> <lien href = "styles.css" rel = "stylesheet" media = "tous" /> <! [endif] -> / * Si vous voulez ignorer un morceau de code par l'explorateur, utilisez la condition * /
 
  / * La condition peut être:
 
  IE - pour toute version de 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 la même
 
  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:
  <! - [si IE 6 ]> < lien href = " ie6.css " rel = " stylesheet " media = " tous " /> < ! [endif] - > / * Feuille de style pour IE6 * /
 
  <! - [si IE 7 ]> < link href = " ie7.css " rel = " stylesheet " media = " tous " /> < ! [endif] - > / * Feuille de style pour IE7 * /
 
  <! - [if IE 8 ]> < lien href = " ie8.css " rel = " stylesheet " media = " tous " /> < ! [endif] - > / * Feuille de style pour IE8 * /
 
 

Box Modèle piratage:
Dans IE, il y a des problèmes, quand la bordure et le remplissage sont inclus dans la largeur de l'élément. Box Model hack les capture.
  .  class {
 
  rembourrage: 4 em; 
  bordure: 1 em rouge solide; 
  largeur: 30 em; 
  largeur / ** /: / ** / 25 em; 
 }
 / * Pour IE, la largeur du bloc est inférieure à la quantité padding + border * /

	

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

	

  .class {
  
   min-largeur : 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 inférieure à la quantité padding + border * /

	

Mini pirate de Dustin Diaz
  .class {
  
   min-hauteur : 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 { } / * Dans le cas où la page html a doctype, ce hack fonctionne dans IE6 * / / * Dans le cas de quirks-mode, 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 normaux * / html> / ** / body .class {} / * Pour les navigateurs normaux (sauf IE 7) * / / * Exemple:
 
  .class {arrière-plan: rouge}
 
  * html .class {arrière-plan: vert}
 
  Dans tous les navigateurs sauf IE6 et ci-dessous l'arrière-plan sera rouge, et dans les navigateurs IE6 et ci-dessous - vert * /

	

Dirty hacks pour IE6:
  .  class { _background : # F00;
  }
  class {- arrière - plan : # F00;
  }
  class { c \ olor : # F00;
  } / * Ne fonctionne pas avant les lettres a, b, c, d, e, f * /

	

Dirty hacks pour IE7:
  > body { arrière - plan : # F00 ;
  } / * sélectionne l'élément body uniquement dans IE7 * / html * { background : # F00 ;
  } / * met en surbrillance tous les éléments à l'intérieur de l'élément html.
  Uniquement pour IE7 et ci-dessous * / -, .class { background : # F00 ;
  } .class { background : # F00 ! important !
  ;
  } / * Hack fonctionne par analogie avec la propriété! Important.
  Fonctionne pour IE7 et ci-dessous * /

	

Dirty hacks pour IE8:
  .class { arrière - plan : # F00 \ 0 /;
  } / * sélectionne l'élément body uniquement dans IE7 * /

	

Les hacks sales travaillant dans IE6 et IE7:
  .class { * arrière - plan : # F00 ;
  } .class { // arrière - plan : # F00 ;
  } .class { background : # F00 ! ie;
  } / * Hack fonctionne d'une manière similaire à la! Important * /

	

CSS-hacks pour le navigateur Mozilla FireFox

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

	

Pour MFF 1.5 et plus:
  .class , x : -moz-any-link , x : only-enfant { couleur : # F00 ;
  }

	

Pour MFF 2.0 et plus:
  body : vide .class { couleur : # F00 ;
  } #class [id = CLASS] { color : # F00 ;
  } html > / ** / body. class , x : -moz-any-link { color : # F00 ;
  }

	

Pour MFF 3.0 et éventuellement supérieur:
  html> / ** / body. class, x: -moz-any-link, x: par défaut {color: # F00;
  }
 
 

CSS hacks pour le navigateur Google Chrome

  body : nth- of - type (1) .class {
 
   arrière - plan : # 000;
 
  }

	

CSS hacks pour le navigateur Opera

Khaki 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 { arrière - plan : # 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)
 
   { 
  head ~ body. class {
  
   couleur : # F00 ;
  
   }
 
	 }
	

CSS hacks pour le navigateur Safari

  body : premier-de-type .class { color : # F00 ;
  } html : root * .class { color : # F00 ;
  } body : premier-de-type .class { color : # F00 ;
  } body : premier-de-type .class { color : # F00 ;
  }

	

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

	

Sélecteur Hacks

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

	 / * IE6 et ci-dessous * /
	 * html #uno {couleur: rouge}

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

	 / * IE7, FF, Saf, Opéra * /
	 html> body #tres {couleur: rouge}

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

	 / * Opera 9.27 et ci-dessous, safari 2 * /
	 html: premier-enfant #cinco {couleur: rouge}

	 / * Safari 2-3 * /
	 html [xmlns * = ""] body: dernier-enfant #seis {couleur: rouge}

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

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

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

	 / * Webkit iPhone / mobile * /
	 Écran @media et (max-device-width: 480px) {
	  #veintiseis {couleur: rouge}
	 }


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

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

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

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

	 / * IE 10+ * /
	 @media screen et (-ms-high-contrast: actif), (-ms-high-contrast: aucun) {
	  #veintiun {couleur: rouge;  }
	 }

	 / * Firefox seulement.  1+ * /
	 #veinticuatro, x: -moz-any-link {couleur: rouge}

	 / * Firefox 3.0+ * /
	 #veinticinco, x: -moz-any-link, x: par défaut {couleur: rouge}

	 / * FF 3,5 + * /
	 body: non (: - moz-handler-blocked) #cuarenta {couleur: rouge;  }
	

Attributs Hacks

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

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

	 / * IE6, IE7 - agit comme un! Important * /
	 #veintesiete {couleur: bleu!  } / * 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 @media et (min-width: 0 \ 0) {
	  #veintidos {couleur: rouge}
	 }
	

Hacheurs de préfixe de propriété

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

@media hacks

	 / * @media hacks * /

	 / * IE6 / 7 seulement (via Keith Clarke) * /
	 Écran @media \ 9 {}

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

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

	 / * IE8 / 9 * /
	 Écran @media \ 0 {}
	

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

  / * bidouille uniquement pour IE8 Only * / .myClass { 
  couleur: rouge \ 0 /;  / * rouge * /
  rembourrage: 70px \ 0 /;  / * indent 70px uniquement pour Internet Explorer 8 * /
 }
 / * IE 6 Only * / * html .myClass {
 ...
 } 
 / * Tous sauf les standards IE6 * / .myClass { 
 propriété / ** /: valeur; 
 } 
 / * Firefox & IE 7, et ci-dessus * / html> body .myClass {
  ...
 }
 / * Navigateurs modernes uniquement (pas IE 7) * / html> / ** / body .myClass {
 ...
 }
 / * IE 7 Only * / *: premier-enfant + html .myClass {
  ...
 }
 / * Firefox uniquement * / @ -moz-document url-prefix () {
 .myClass {
 ...
 }
 }
 / * Opera uniquement * / noindex: -o-prefocus, .MyClass {
 couleur: rouge;
 }
 / * IE7 Seulement * / div [class ^ = "myClass"] .myClass2 { 
 ...
 }
 / * IE7 seulement * / * + 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 seulement * / .myClass: non ([attr * = ""]) { 
 ...
 } 
 / * Opera * / @media all et (min-width: 0px) { 
 html: premier-enfant .myClass { 
 ...
 } 
 } 
 / * Safari seulement * / .myClass: non (: root: root) { 
 ...
 } 
 / * Écran Safari 3.0 et Chrome uniquement * / @media et (-webkit-min-device-pixel-ratio: 0) {
  .myClass {
  ....
  }
 }
 / * Navigateur Chrome * / body: nth-of-type (1) .myClass {
  ...
 }
 / * Safari navigateur css hack * / body: premier-de-type .myClass {property: value;}

CSS pour l'explorateur

  <! - [si IE]> 
	 ... si Internet Explorer ..
	 <link href = "ie-fix.css" type = "texte / 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 IE IE 6]> 
		 .. si ci-dessous IE 6
	 <! [endif] -> 

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

	 <! - [si gt IE 6]> 
		 ... si ci-dessus IE 6 
	 <! [endif] ->
	

Fond semi-transparent dans IE, Firefox, Opera

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

Enlever le rembourrage supplémentaire dans le bouton dans Firefox

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

Chrome / Firefox ...?

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

Firefox 2

  html > / ** / body .selector, x: -moz-any-link { couleur : lime ;
  }
 

Firefox 3

  html > / ** / body .selector, x: -moz-any-link, x: par défaut { color : lime ;
  }
 

Tout Firefox

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

Avancé



Kaki pour IE

Syntaxe Qui comprend Exemple:
Passer la validation
* html IE6
		 div {
		 arrière-plan: # ff0000;
		 }
		 * html div {
		 arrière-plan: # 000;
		 }
		
! important IE6
  div {
		 background: # ff0000! important;  / * pour tous les navigateurs * /
		 arrière-plan: # 000;  / * pour IE6 * /
		 }
		
*: premier-enfant + html IE7
  div {
		 arrière-plan: # ff0000;
		 }
		 *: premier-enfant + html div {
		 arrière-plan: # 000;
		 }
		
* + html IE7 +
peut comprendre Opera 9 et ci-dessous
  div {
		 arrière-plan: # ff0000;
		 }
		 * + html div {
		 arrière-plan: # 000;
		 }
		
html> corps comprendra tout sauf IE6
  div {
		 arrière-plan: # ff0000;
		 }
		 html> body div {
		 arrière-plan: # 000;
		 }
		
# c'est-à-dire # fix tout comprendre sauf IE8
  div {
		 arrière-plan: # ff0000;  / * pour ie8 * /
		 }
		 div, # ie # fix {
		 arrière-plan: # 000;  / * pour les autres navigateurs * /
		 }
		
Ne pas réussir la validation (non recommandé)
_property: valeur
et
-property: 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 * /
		 * arrière-plan: # 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!  / * pour IE6 et IE7 * /
		 }
		

Khaki pour Firefox

Syntaxe Qui comprend Exemple:
Ne pas réussir la validation (non recommandé)
html: root FF 1.5+
Opera 9.6
mise à jour: 14/01/10
hors de propos
(Comprendre les nouvelles versions
opéra, chrome, safari)
  div {
		 arrière-plan: # ff0000;
		 }
		 html: root 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 Opera

Syntaxe Qui comprend Exemple:
Passer 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 réussir la validation (non recommandé)
@media all et (min-width: 0)
valide CSS3
Opéra 9-9.6
mise à jour 14.01.10
pas pertinent
(compris comme nouveau
versions de 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

Syntaxe Qui comprend Exemple:
Ne pas réussir la validation (non recommandé)
corps: nth-of-type (1)
mise à jour 14.01.10 - non pertinente (elle est comprise par les nouvelles versions d'opéra, ff, safari, chrome)
  div {
		 arrière-plan: # ff0000;
		 }
		 corps: nth-of-type (1) div {
		 arrière-plan: # 000;
		 }
		
html: root *
mise à jour 14.01.10 - non pertinente (elle est comprise par les nouvelles versions d'opéra, 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

Syntaxe Qui comprend Exemple:
Ne pas réussir la validation (non recommandé)
html: not (: nth-child (1)) #élément
Konqueror
FF 3,5
  #div {
		 arrière-plan: # ff0000;
		 }
		 html: non (: nth-child (1)) #div {
		 arrière-plan: # 000;
		 }