hacks CSS

Les navigateurs et les normes. L'éternelle poursuite. En raison des normes d'incohérences, en raison de différentes façons de rendre les pages de la plupart du temps du web designer est dépensé sur elle pour compenser ces écarts (à utiliser hacks). En conséquence, au lieu de travail efficace, le concepteur entre dans la relation contre nature avec les navigateurs, perdre un temps précieux.

Css Hack - conception CSS spécifique, que certains navigateurs comprennent et ignorer les autres. En utilisant hacks parle souvent du codeur professionnel. Mais il y a des cas où un hack - la seule façon de résoudre le problème (par exemple, les bogues des navigateurs bien connus (voir «Bugs Browser»)). Ne pas oublier également que, dans notre hâte de temps - un phénomène commun. Par conséquent, les termes "hier" - sans surprise. Voilà pourquoi il n'y a pas de temps à traiter ne va pas comme vous le souhaitez.

Ainsi hacks css

Il est une solution rapide. Rédaction de lignes supplémentaires et tout va bien, nous faisons sur.

Inconvénients css hacks

  1. Il n'y a pas de certitude comment se comporter site avec la sortie de nouvelles versions des navigateurs. Par exemple, vous écrivez du code pour pirater de Firefox, dans un mois , il y a une nouvelle version de Safari, et il se trouve qu'elle perçoit également ce hack! Nous devons refaire.
  2. La plupart des hacks 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 bugs d'IE, utilisez un kotjry CSS-fichier séparé connecté via des commentaires conditionnels.

glossaire

Cross-browser - propriété de site apparaissent et le travail dans tous les navigateurs populaires identiques.

Haq - corriger des bugs ou ajouter de nouvelles fonctionnalités grâce à l'utilisation d'autres fonctions non documentées ou mal mises en œuvre.

sale hack - une solution rapide à un problème, surtout à court terme, ce qui prive l'essence de la beauté et le code interne de phase avec sa structure interne.

CSS-hacks pour Internet Explorer

ZOOM: 1:
Haq pour déterminer hasLayout
  * {Zoom: 1;
  }

	

PNG dans IE6:
Pour IE6 connecté htc fichier iepngfix.htc, format PNG pour les images d'arrière-plan fonctionne correctement pour tous les elementov dans le fichier-ie6.css CSSF. Utilisez IE PNG Fix v1.0 RC4 dernière version.
  * {Comportement: url ( "css / iepngfix.htc");  }

	

Si l'octet significatif est un exemple d'utilisation d'un filtre pour IE:
  .class {
  
   background: none;
  
 
   Filtre: progid: DXImageTransform.Microsoft.AlphaImageLoader (
  
   src = "/images/png-image.png",
  
   sizingMethod = 'échelle'
  
   );
  
  }

	

Département des styles de IE6:
  html> body.  classe {} tête + corps.
  class {} html: first-child .  class {}

	

Département des styles de IE6 et IE7:
  html> / ** / body {} 
 

Département des styles de IE6 - IE8:
  * | Html.  class {} html: non ([ lang * = ""]).  class {}

	

Les commentaires conditionnels dans IE:
Les commentaires conditionnels ne fonctionnent que dans IE sur Windows, les autres navigateurs, ils sont les commentaires habituels, afin qu'ils puissent être utilisés en toute sécurité. La syntaxe est:
  <! - [Si] état> <link href = "styles.css " rel = "stylesheet media" = "all" /> <[endif] -> <! - [! Si condition]> <link href = "styles.css" rel = " media stylesheet" = "all" /> <[endif] -> / * Si vous voulez ignorer l'explorateur un morceau de code, utilisez la condition * /!
 
  / * La condition peut être:
 
  IE - pour toute version de IE
 
  lt IE v - (moins) pour tous les navigateurs IE version qui est inférieure à V
 
  lte IE v - (inférieur ou égal) pour tous les navigateurs IE version qui est inférieure à V, ou le même
 
  gte IE v - (supérieur ou égal) - pour IE, qui est supérieure ou égale à la version v
 
  gt IE v - (supérieur à) - pour IE, la version supérieure v.
  * /
 
 

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

Box Model Hack:
Dans IE, il y a des pépins, lorsque la frontière et le rembourrage sont inclus dans la largeur d'un élément. Box Model Hack Fixit eux.
  .  class {
 
  padding: 4 em; 
  border: 1 em solide rouge; 
  largeur: 30 em; 
  largeur / ** /: / ** / 25 em; 
 }
 / * Pour largeur IE du bloc est inférieure à la valeur de padding + frontière * /

	

Min-width et max-width dans IE:
IE ne comprend pas ces propriétés css. Haq pour l'unité est la suivante:
  .class {
  
   min-width: 500 px;
  
   largeur: expression (
  
   document.body.clientWidth <500?
  "500px": "auto"
  
   );
  } / * Pour largeur IE du bloc est inférieure à la valeur de padding + frontière * /

	

  .class {
  
   min-width: 500 px;
  
   max-width: 750 px;
  
   largeur: expression (
  
   document.body.clientWidth <500?
  "500px":
  
   document.body.clientWidth> 750?
  "750px": "auto"
  
   );
  } / * Pour largeur IE du bloc est inférieure à la valeur de padding + frontière * /

	

Min-hauteur pirater par Dustin Diaz
  .class {
  
   min-height: 100%;
  
   height: auto importante ;!
  
   hauteur: 100%;
  
  }

	

sélecteurs simples:
Vous ne devez pas créer un fichier distinct pour chaque navigateur. Vous pouvez utiliser chaque css-sélecteurs dans le css-fichier principal:
  * Html.  class {} / * Si les pages HTML ont un doctype, ce hack fonctionne dans IE6 * / / * Dans le cas de bizarreries-mode, pirater des œuvres dans IE6 et IE7.
  * / *: First-child + html.  class {} / * pour IE 7 et ci - dessous (first-child) * / * + html.  class {} / * Pour IE 7 * / *: first-child + html.  class {} / * Pour IE 7 * / html> body.
  class {} / * pour IE 7 et navigateurs normaux * / html> / ** / body .class {} / * Pour les navigateurs normaux (sauf IE 7) * / / * Exemple:
 
  .class {background: red}
 
  * Html .class {background: vert}
 
  Dans tous les navigateurs sauf IE6 et ci - dessous est fond est rouge, et IE6 et ci - dessous les navigateurs - Vert * /

	

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

hacks sales pour IE7:
 > Body {background: # F00;  } / * Sélectionne l'élément de corps que dans IE7 * / html * {background: # F00;  } / * Sélectionne tous les éléments dans l'élément html.
  Seulement pour IE7 et ci - dessous * / -, .class {background: # F00;  {} Contexte: # F00 importante !!  ;
  } / * Hack fonctionne par analogie avec la propriété! Important.
  Travaux pour IE7 et ci - dessous * /
 

Hacks sales pour IE8:
  .class {background: # F00 \ 0 /;
  } / * Sélectionne l'élément de corps seulement IE7 * /

	

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

	

CSS-hacks pour Mozila FireFox navigateur

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

 *> .class {Color: # F00 ;  }

	

Pour MFF 1.5 et au- dessus:
  .class, x: -moz-Anywhere lien, x: only-child {color: # F00;  }

	

Pour MFF 2.0 et ci - dessus:
  corps: vide .class {color: # F00;  } #class [Id = CLASS] { color: # F00;  } Html> / ** / body .class , x: -moz-any-link {color: # F00;  }

	

Pour MFF 3.0 et peut - être au- dessus:
  html> / ** / body .class, x: -moz-any-link, x: default {color: # F00;  }
 
 

CSS-hacks pour navigateur Google Chrome

  corps: nth- de - type (1) .class {
 
   background: # 000;
 
  }

	

CSS-hacks pour le navigateur Opera

Kaki pour toutes les versions de Opera:
  @ Médias tous et (-webkit-min -device-pixel-rapport: 10.000)
  
  pas tous et (-webkit-min- device-pixel ratio: 0) { 
  .style {background: # F00;
  }

	 }
	

  @ Médias tous et (min-width : 0 px)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
	 }
	

Pour Opera 6:
  @ Médias tous et (min-width : 1 px)
 
   {{}
 
  .class {
  
   color: # F00;
  
   }
 
	 }
	

Pour Opera 7, 8:
  @ Médias tous et (min-width : 1 px)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
	 }
	

Pour Opera 9:
  @ Médias tous et (largeur)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
	 }
	

  @ Médias tous et (min-width : 0 px)
 
   { 
  tête ~ corps .class {
  
   color: # F00;
  
   }
 
	 }
	

CSS-hacks pour le navigateur Safari

  corps: la première de type .class {color: # F00;  } Html: root * .class {color : # F00;  } Corps: première de type .class {color: # F00;  } Corps: première de type .class {color: # F00;  }

	

  @ Écran Média et (-webkit-min -device-pixel-rapport: 0)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
 }
 / * Hack pour Opera et Safari * /

	

Hacks Selector

	 / ***** Selector Hacks ****** /

	 / * IE 6 et au-dessous * /
	 * Html #uno {color: red}

	 / * IE7 * /
	 *: First-child + html #dos {color: red}

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

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

	 / * Opera 9.27 et ci-dessous, safari 2 * /
	 html: first-child #cinco {color: red}

	 / * Safari 2-3 * /
	 html [xmlns * = ""] corps: {la couleur: rouge} du dernier enfant

	 / * Safari 3+, chrome 1+, Opera9 +, ff 3.5+ * /
	 corps: nth-of-type (1) #siete {color: red}

	 / * Safari 3+, chrome 1+, Opera9 +, ff 3.5+ * /
	 corps: la première de type #ocho {color: red}

	 / * Saf3 +, chrome1 + * /
	 écran @media et (-webkit-min-device-pixel ratio: 0) {
	  #diez {color: red}
	 }

	 / * IPhone / webkit mobiles * /
	 écran @media et (max-device-width: 480px) {
	  #veintiseis {color: red}
	 }


	 / * Le 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 {color: red}

	 / * IE 10+ * /
	 écran @media et (-ms-fort contraste: actif), (-ms-contraste élevé: none) {
	  #veintiun {color: red;  }
	 }

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

	 / * Firefox 3.0+ * /
	 #veinticinco, x: -moz-any-link, x: default {color: red}

	 / * FF 3.5+ * /
	 corps: pas (: - moz-gestionnaire-bloqué) #cuarenta {color: red;  }
	

Attribut Hacks

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

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

	 / * IE6, IE7 - agit comme un important * /!
	 #veintesiete {color: blue-à-dire ;!  } / * Chaîne après!  peut être quelque chose * /

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

	 / * IE9, IE10 * /
	 écran @media et (min-width: 0 \ 0) {
	  #veintidos {color: red}
	 }
	

hacks préfixe de propriété

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

hacks @media

	 / * @media Hacks * /

	 / * IE 6/7 seulement (via Keith Clarke) * /
	 écran @media \ {9}

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

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

	 / * De IE8 / 9 * /
	 écran @media \ {0}
	

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

  / * Hack seulement à IE8 seulement * / .myClass {
 
  couleur: rouge \ 0 /;  / * Rouge * /
  padding: 70px \ 0 /;  / * 70px Rembourrage uniquement pour Internet Explorer 8 * /
 }
 / * IE 6 seulement * / * html .myClass {

 ...
 } 
 / * Tous sauf les normes IE6 * / .myClass { 
 Propriété / ** /: valeur; 
 } 
 / * Firefox et IE 7 et au- dessus * / html> .myClass du corps {

  ...
 }
 / * Les navigateurs modernes uniquement (pas IE 7) * / html> / ** / corps .myClass {
 ...
 }
 / * IE 7 seulement * / *: first-child + html .myClass {
  ...
 }
 / * Firefox seulement * / @ -moz -Document url-prefix () {
 .myClass {
 ...
 }
 }
 / * Opera seulement * / noindex: -o-préfocalisée, .MyClass {
 color: red;
 }
 / * IE7 seulement * / div [ class = "^ myClass"] .myClass2 { 
 ...
 }
 / * IE7 uniquement * / * + html .myClass { 
 ...
 } 
 / * Hack pour Opera <= 9 * / html: first-child .myClass {
 ...
 } 
 / * Firefox, Opera, Konqueror, Safari * / * | html .myClass { 
 ...
 }
 / * IE8 bêta 2 uniquement * / html: first-child | (?) .myClass [Attr = ab] { 
 ...
 } 
 / * IE5 / Mac uniquement * / / * \ * // * / .myClass {propriété: valeur;  } / ** / 
 / * Gecko uniquement * / .myClass: pas ([attr * = ""]) { 
 ...
 } 
 / * Opera * / @media tous et (min-width: 0px) { 
 html: first-child .myClass { 
 ...
 } 
 } 
 / * Safari uniquement * / .myClass: pas (: root: root) { 
 ...
 } 
 / * Safari 3.0 et Chrome seulement * / écran @media et (-webkit-min-device-pixel ratio: 0) {
  .myClass {
  ....
  }
 }
 / * Chrome navigateur * / corps: nième-of-type ( 1) .myClass {
  ...
 }
 / * Navigateur Safari css bidouille * / corps: la première de type .myClass {propriété: valeur;}

CSS pour l'Explorateur

  <! - [Si IE]> 
	 ... Si l'Internet Explorer ..
	 <Link href = Type "ie-fix.css" = "text / css" rel = "stylesheet"> 
	 <[Endif] -> 

	 <! - [Si IE 6.0]> 
		 ... Si IE6 
	 <[Endif] -> 
		
	 <! - [Si IE 7]> 
		 ... Si IE7
	 <[Endif] -> 

	 <! - [If gte IE 5]> 
		 ... Si IE5 +
	 <[Endif] -> 

	 <! - [Si lt IE 6]> 
		 .. Si IE inférieure 6
	 <[Endif] -> 

	 <! - [Si lte IE 5.5]> 
		 ... Si elle est inférieure ou égale à 5,5 IE 
	 <[Endif] -> 

	 <! - [Si gt IE 6]> 
		 ... Si IE 6 ci-dessus 
	 <[Endif] ->
	

fond translucide dans IE, Firefox, Opera

  .myClass {
	 background-color: # 000;	
	 -moz-opacity: 0,82;  / * Firefox * / 
	 opacité: 0,82;  / * Opera * /
	 filtre: alpha (opacity = 82);  / * IE * /
	 }
	

Retirez le rembourrage supplémentaire dans le bouton dans Firefox

  bouton :: - moz-focus-inner { 
	  border: 0;
	  padding: 0;
	 }
	

Chrome / Firefox ...?

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

Firefox 2

  html> / ** / body .Sélecteur, x: -moz-any-link {color: chaux;  }
 

Firefox 3

  html> / ** / body .Sélecteur, x: -moz-any-link, x: default {color: chaux;  }
 

Tous Firefox

  @ -moz-Document de url-prefix ( ) { 
  .Sélecteur {color: chaux;
  }}
 

en outre



Hacks pour IE

syntaxe Qui sait exemple
validation passe
* html IE6
		 div {
		 background: # ff0000;
		 }
		 * Html div {
		 background: # 000;
		 }
		
! important IE6
  div {
		 background: # ff0000 importante ;!  / * Pour tous les navigateurs * /
		 background: # 000;  / * Pour de IE6 * /
		 }
		
*: First-child + html IE7
  div {
		 background: # ff0000;
		 }
		 *: First-child + html div {
		 background: # 000;
		 }
		
* + Html IE7 +
peut comprendre Opera 9 et au-dessous
  div {
		 background: # ff0000;
		 }
		 * + Html div {
		 background: # 000;
		 }
		
html> body comprendre tout sauf IE6
  div {
		 background: # ff0000;
		 }
		 html> body div {
		 background: # 000;
		 }
		
# Ie # fix comprendre tout sauf IE8
  div {
		 background: # ff0000;  / * Pour IE8 * /
		 }
		 div, # ie # fix {
		 background: # 000;  / * Pour les autres navigateurs * /
		 }
		
Ne pas passer la validation (non recommandé)
_svoystvo: valeur
et
-property: valeur
IE6
  div {
		 background: # ff0000;  / * Pour tous les navigateurs * /
		 _background: # 000;  / * Pour de IE6 * /
		 }
		
* Propriété: valeur
et
// Propriété: valeur
IE6
IE7
  div {
		 background: # ff0000;  / * Pour tous les navigateurs * /
		 * Contexte: # 000;  / * Pour IE6 et d'IE7 * /
		 }
		
html * IE6
IE7
chrome
safari
  div {
		 background: # ff0000;
		 }
		 html * div {
		 background: # 000;
		 }
		
! ie IE6
IE7
  div {
		 background: # ff0000;  / * Pour tous les navigateurs * /
		 background: # 000 ie ;!  / * Pour IE6 et d'IE7 * /
		 }
		

Hacks pour Firefox

syntaxe Qui sait exemple
Ne pas passer la validation (non recommandé)
html: root FF 1.5+
Opera 9.6
mise à jour: 14.01.10
sans importance
(Comprendre la nouvelle version
Opéra, Chrome, Safari)
  div {
		 background: # ff0000;
		 }
		 html: root div {
		 background: # 000;
		 }
		
x: -moz-any-link FF 1.5+
IE7
  div {
		 background: # ff0000;
		 }
		 div, x: -moz-any-link {
		 background: # 000;
		 }
		
@ -moz-Document url-prefix () FF 1.5+
  div {
		 background: # ff0000;
		 }
		 @ -moz-Document url-prefix () {
		 div {
		 background: # 000;
		 }}
		

Hacks pour Opera

syntaxe Qui sait exemple
Passes validation
html: first-child Opera 7-9.01
  div {
		 background: # ff0000;
		 }
		 html: div first-child {
		 background: # 000;
		 }
		
Ne pas passer la validation (non recommandé)
@media tous et (min-width: 0)
passe validation CSS3
Opera 9 à 9,6
mise à jour 14.01.10
est en retard
(Se rapporte à nouveau
versions ff, chrome, safari)
  div {
		 background: # ff0000;
		 }
		 @media tous et (min-width: 0) {
		 div {
		 background: # 000;
		 }}
		
html> / ** / body noindex: -o-préfocalisée, html> / ** / body Opera 9,5-10
  html> / ** / body noindex: -o-préfocalisée, html> / ** / body p {
		 color: # 0f0
		 }
		

Hacks pour Chrome et Safari

syntaxe Qui sait exemple
Ne pas passer la validation (non recommandé)
corps: nth-of-type (1)
mettre à jour 14.01.10 - Date (moyenne de nouvelles versions de l'opéra, ff, safari, chrome)
  div {
		 background: # ff0000;
		 }
		 corps: nth-of-type (1) div {
		 background: # 000;
		 }
		
html: root *
mettre à jour 14.01.10 - Date (moyenne de nouvelles versions de l'opéra, ff, safari, chrome)
  div {
		 background: # ff0000;
		 }
		 html: root * div {
		 background: # 000;
		 }
		
html *
safari
chrome
IE6
IE7
  div {
		 background: # ff0000;
		 }
		 html * div {
		 background: # 000;
		 }
		

Kaki Konqueror

syntaxe Qui sait exemple
Ne pas passer la validation (non recommandé)
html: non (: nth-child (1)) #element
Konqueror
FF 3.5
  #div {
		 background: # ff0000;
		 }
		 html: non (: nth-child (1)) {#div
		 background: # 000;
		 }