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

CSS-Hacks

Browser und Standards. Ewige Verfolgung. Aufgrund von Inkonsistenzen mit Standards, die auf unterschiedliche Arten des Renderns von Seiten zurückzuführen sind, wird die meiste Zeit des Webdesigners damit verbracht, diese Inkonsistenzen zu beheben (mithilfe von Hacks). Als Ergebnis dessen, statt effektiver Arbeit, der Designer tritt unnatürliche Beziehungen mit Browsern ein und verliert wertvolle Zeit.

Css Hack ist ein spezielles CSS-Design, das einige Browser verstehen und ignorieren. Der Gebrauch von Hacks spricht oft von der mangelnden Professionalität des Laien. Aber es gibt Fälle, in denen der Hack der einzige Weg ist, das Problem zu lösen (zum Beispiel bekannte Browserfehler (siehe "Browserfehler")). Vergiss nicht, dass es in unserer Zeit eine häufige Erscheinung ist. Daher die Begriffe "für gestern" - niemand ist überrascht. Es gibt also keine Zeit zu verstehen, warum es nicht so kommt, wie Sie es wollen.

Plus css hackt

Dies ist eine schnelle Lösung für das Problem. Haben zusätzliche Linien registriert und alles ist ausgezeichnet, wir machen weiter.

Nachteile von css Hacks

  1. Es gibt keine Gewissheit, wie sich die Website bei der Veröffentlichung neuer Versionen von Browsern verhalten wird. Zum Beispiel haben sie einen Code mit einem Hack für Firefox geschrieben, eine neue Version von Safari wird in einem Monat veröffentlicht und es stellt sich heraus, dass sie diesen Hack auch wahrnimmt! Wir müssen es wiederholen.
  2. Viele Khakis bestehen keine Validierung - die Gefahr dafür ist im vorherigen Abschnitt beschrieben.

Wenn möglich, versuche Hacks zu vermeiden. Verwenden Sie eine separate CSS-Datei, die mit bedingten Kommentaren verbunden ist, um IE-Fehler zu korrigieren.

Glossar

Cross-Browser - Die Eigenschaft einer Site, die in allen gängigen Browsern angezeigt und funktionieren soll, ist identisch.

Hack - Beheben eines Fehlers oder Hinzufügen einer neuen Funktion durch Verwendung einer anderen undokumentierten oder falsch implementierten Funktion.

Ein schmutziger Hack ist eine schnelle Lösung für ein Problem, vor allem auf kurze Sicht, beraubt das Wesen des Codes der inneren Schönheit und Disharmonie mit seiner internen Anordnung.

CSS-Hacks für den Internet Explorer

ZOOM: 1:
Hack, entworfen, um hasLayout zu definieren
  * { Zoom : 1 ;
  }

	

PNG in IE6:
Für IE6 ist die htc-Datei iepngfix.htc für den korrekten Betrieb von PNG-Hintergrundbildern für alle Elemente in der Datei cssf-ie6.css verbunden. IE PNG Fix v1.0 RC4 neueste Version wird verwendet.
  * { behavior : url ( "css / iepngfix.htc" );
  }

	

Wenn Bytes wichtig sind, gibt es ein Beispiel für die Verwendung eines Filters für IE:
  .klasse {
  
   Hintergrund : keine;
  
 
   Filter : progid: DXImageTransform.Microsoft.AlphaImageLoader (
  
   src = '/images/png-image.png' ,
  
   lizingMethod = 'skalieren'
  
   );
  
  }

	

Trennung von Stilen von IE6:
  html> Körper.  Klasse {} Kopf + Körper.  Klasse {} html: erstes Kind.  Klasse {}

	

Trennung von Stilen von IE6 und IE7:
  html> / ** / Körper {}
 
 

Trennung von Stilen von IE6 - IE8:
  * | html.  Klasse {} html: nicht ([lang * = "" ]).  Klasse {}

	

Bedingte Kommentare in IE:
Bedingte Kommentare funktionieren nur im IE unter Windows, für andere Browser sind sie normale Kommentare, so dass sie problemlos verwendet werden können. Die Syntax ist dies:
 <! - [ wenn Bedingung]> < link href = " styles.css " rel = " stylesheet " media = " alle " /> < ! [endif] - > <! - [if! condition]> <link href = "styles.css" rel = "stylesheet" media = "alle" /> <! [endif] -> / * Wenn Sie einen Teil des Codes vom Explorer ignorieren möchten, verwenden Sie die Bedingung * / / * kann sein: IE - für jede Version von IE lt IE v - (kleiner als) für alle IE-Browser, deren Version weniger als v lte IE v - (kleiner oder gleich) für alle IE-Browser, deren Version ist weniger als v, oder die gleiche gte IE v - (größer als oder gleich) - für IE, deren Version größer oder gleich ist v gt IE v - (größer als) - für IE, dessen Version größer als v ist.
  * /
 

Bedingte Kommentare in IE6, IE7, IE8:
  <! - [if IE 6 ]> < link href = " ie6.css " rel = " stylesheet " media = " alle " /> < ! [endif] - > / * Stylesheet für IE6 * /
 
  <! - [wenn IE 7 ]> < link href = " ie7.css " rel = " stylesheet " media = " alle " /> < ! [endif] - > / * Stylesheet für IE7 * /
 
  <! - [wenn IE 8 ]> < link href = " ie8.css " rel = " stylesheet " media = " alle " /> < ! [endif] - > / * Stylesheet für IE8 * /
 
 

Boxmodell-Hack:
In IE gibt es Störungen, wenn Rand und Füllung in der Breite des Elements enthalten sind. Box Model Hack erfasst sie.
  .  Klasse {
 
  Polsterung: 4 cm; 
  Grenze: 1 em solid rot; 
  Breite: 30 cm; 
  Breite / ** /: / ** / 25 em; 
 }
 / * Bei IE ist die Breite des Blocks um den Betrag padding + border geringer /

	

Min-Breite und Max-Breite in IE:
IE versteht diese CSS-Eigenschaften nicht. Hack für den Block sieht so aus:
  .klasse {
  
   Mindestbreite : 500 px;
  
   Breite : Ausdruck (
  
   document.body.clientWidth < 500 ?
  "500px" : "automatisch"
  
   );
  } / * Für IE ist die Breite des Blocks weniger um den Betrag padding + border * /

	

  .klasse {
  
   Mindestbreite : 500 px;
  
   maximale Breite : 750 px;
  
   Breite : Ausdruck (
  
   document.body.clientWidth < 500 ?
  "500px" :
  
   document.body.clientBreite> 750 ?
  "750px" : "automatisch"
  
   );
  } / * Für IE ist die Breite des Blocks weniger um den Betrag padding + border * /

	

Min-Höhe-Hack von Dustin Diaz
  .klasse {
  
   Mindesthöhe : 100 %;
  
   Höhe : auto ! wichtig ;
  
   Höhe : 100 %;
  
  }

	

Einfache Selektoren:
Es ist nicht notwendig, eine separate Datei für verschiedene Browser zu erstellen. Sie können einzelne CSS-Selektoren in der Haupt-CSS-Datei verwenden:
  * html  class { } / * Falls die html-Seite Doctype hat, funktioniert dieser Hack in IE6 * / / * Im Quirks-Modus funktioniert Hack in IE6 und IE7.
  * / *: Erstes Kind + HTML.  Klasse { } / * Für IE 7 und niedriger (erstes Kind) * / * + html.  Klasse { } / * Für IE 7 * / *: first-child + html.  Klasse { } / * Für IE 7 * / html> body.  class { } / * Für IE 7 und normale Browser * / html> / ** / body .class {} / * Für normale Browser (außer IE 7) * / / * Beispiel:
 
  .class {Hintergrund: rot}
 
  * html .class {Hintergrund: grün}
 
  In allen Browsern mit Ausnahme von IE6 und darunter ist der Hintergrund rot und in Browsern IE6 und darunter - grün * /

	

Schmutzige Hacks für IE6:
  .  Klasse { _background : # F00;
  } .  Klasse {- Hintergrund : # F00;
  } .  Klasse { c # olor : # F00;
  } / * Funktioniert nicht vor den Buchstaben a, b, c, d, e, f * /

	

Schmutzige Hacks für IE7:
  > Körper { Hintergrund : # F00 ;
  } / * wählt das body-Element nur in IE7 * / html * { background : # F00 ;
  } / * markiert alle Elemente innerhalb des HTML-Elements.
  Nur für IE7 und darunter * / -, .class { background : # F00 ;
  } .class { Hintergrund : # F00 ! wichtig !
  ;
  } / * Hack funktioniert analog zur! Important-Eigenschaft.
  Funktioniert für IE7 und darunter * /

	

Schmutzige Hacks für IE8:
  .class { Hintergrund : # F00 \ 0 /;
  } / * wählt das body-Element nur in IE7 * /

	

Schmutzige Hacks arbeiten in IE6 und IE7:
  .class { * Hintergrund : # F00 ;
  } .class { // Hintergrund : # F00 ;
  } .class { Hintergrund : # F00 ! dh;
  } / * Hack funktioniert ähnlich wie die! Wichtig * /

	

CSS-Hacks für den Mozilla FireFox Browser

Khaki für alle Versionen von MFF:
  #klasse [id = klasse] { farbe : # F00 ;
  } @ -moz-Dokument URL-Präfix () { .class { color : # F00 ;
  } }
 *> .klasse { farbe : # F00 ;
  }

	

Für MFF 1,5 und höher:
  .class , x : -moz-any-link , x : nur-kind { color : # F00 ;
  }

	

Für MFF 2.0 und höher:
 body : leer .class { color : # F00 ;
  } #klasse [id = KLASSE] { color : # F00 ;
  } html > / ** / body.klasse , x : -moz-any-link { color : # F00 ;
  }
 

Für MFF 3.0 und möglicherweise höher:
  html> / ** / body.klasse, x: -moz-any-link, x: default {farbe: # F00;
  }
 
 

CSS-Hacks für den Google Chrome-Browser

  Körper : nth- of- type (1) .class {
 
   Hintergrund : # 000;
 
  }

	

CSS-Hacks für Opera-Browser

Khaki für alle Versionen von Opera:
  @ media all und (-webkit-min-device-pixel-ratio: 10000 ),
  
  nicht alle und (-webkit-min-device-pixel-ratio: 0 ) { 
  .style { Hintergrund : # F00 ;
  }

	 }
	

  @ media alle und (min-width: 0 px)
 
   { 
  .klasse {
  
   Farbe : # F00 ;
  
   }
 
	 }
	

Für Opera 6:
  @ media alle und (min-width: 1 px)
 
   { { }
 
  .klasse {
  
   Farbe : # F00 ;
  
   }
 
	 }
	

Für Opera 7, 8:
  @ media alle und (min-width: 1 px)
 
   { 
  .klasse {
  
   Farbe : # F00 ;
  
   }
 
	 }
	

Für Opera 9:
  @ media alle und (Breite)
 
   { 
  .klasse {
  
   Farbe : # F00 ;
  
   }
 
	 }
	

  @ media alle und (min-width: 0 px)
 
   { 
  Kopf ~ Körper.
  
   Farbe : # F00 ;
  
   }
 
	 }
	

CSS-Hacks für Safari-Browser

  body : first-of-type .class { Farbe : # F00 ;
  } html : root * .class { color : # F00 ;
  } body : first-of-type .class { Farbe : # F00 ;
  } body : first-of-type .class { Farbe : # F00 ;
  }

	

  @ media screen und (-webkit-min-device-pixel-ratio: 0 )
 
   { 
  .klasse {
  
   Farbe : # F00 ;
  
   }
 
 }
 / * Hack für Oper und Safari * /

	

Selector Hacks

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

	 / * IE6 und darunter * /
	 * html #uno {farbe: rot}

	 / * IE7 * /
	 *: first-child + html #dos {farbe: rot}

	 / * IE7, FF, Saf, Opera * /
	 html> body # tres {farbe: rot}

	 / * IE8, FF, Saf, Opera (Alles außer IE 6,7) * /
	 html> / ** / body #cuatro {farbe: rot}

	 / * Oper 9.27 und darunter, Safari 2 * /
	 html: erstes Kind #cinco {color: red}

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

	 / * Safari 3+, Chrom 1+, Opera9 +, ff 3.5+ * /
	 Körper: nth-of-type (1) #siete {farbe: rot}

	 / * Safari 3+, Chrom 1+, Opera9 +, ff 3.5+ * /
	 Körper: Ersttyp #ocho {Farbe: rot}

	 / * saf3 +, chrome1 + * /
	 @media screen und (-webkit-min-device-pixel-ratio: 0) {
	  #diez {farbe: rot}
	 }

	 / * iPhone / mobiles Webkit * /
	 @media screen und (max-device-width: 480px) {
	  #veintiseis {farbe: rot}
	 }


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

	 / * Safari 2 - 3.1, Oper 9.25 * /
	 * | html [xmlns * = ""] #catorce {farbe: rot}

	 / * Alles außer IE6-8 * /
	 : root *> #quince {farbe: rot}

	 / * IE7 * /
	 * + html #dieciocho {farbe: rot}

	 / * IE 10+ * /
	 @media screen und (-ms-high-contrast: aktiv), (-ms-high-contrast: none) {
	  #veintiun {Farbe: rot;  }
	 }

	 / * Nur Firefox.  1+ * /
	 #veinticuatro, x: -moz-any-link {farbe: rot}

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

	 / * FF 3.5 + * /
	 Körper: nicht (: - moz-handler-blocked) #cuarenta {Farbe: rot;  }
	

Attribut Hacks

  / ***** Attribut Hacks ****** /
 / * IE6 * /
 #once {_Farbe: blau}
 / * IE6, IE7 * /
 #doce {* Farbe: blau;  / * oder #Farbe: blau * /}
 / * Alles außer IE6 * /
 #diecisiete {farbe / ** /: blau}
 / * IE6, IE7, IE8, aber auch IE9 in einigen Fällen :( * /
	 #diecinueve {Farbe: blau \ 9;  }

	 / * IE7, IE8 * /
	 #veinte {Farbe / * \ ** /: blau \ 9;  }

	 / * IE6, IE7 - fungiert als ein! Wichtig * /
	 #veintesiete {Farbe: blau! dh;  } / * Zeichenfolge nach!  kann alles sein

	 / * IE8, IE9 * /
	 #anotherone {color: blue \ 0 /;} / * muss am Ende aller Regeln stehen * /

	 / * IE9, IE10 * /
	 @media screen und (min-width: 0 \ 0) {
	  #veintidos {farbe: rot}
	 }
	

Eigenschaftenpräfix-Hacks

 / * Präfix der Eigenschaft hacks * / / * Nur IE6 - jede Kombination dieser Zeichen * / _ -?  ¬ | / * Nur IE6 / 7 - jede Kombination dieser Zeichen * /!  $ & * () =% + @ ,.  / `[] # ~?  : <> | 

@Media hackt

	 / * @media hackt * /

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

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

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

	 / * IE8 / 9 * /
	 @media screen \ 0 {}
	

Liste von CSS-Hacks für verschiedene Browser, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

  / * hack nur für IE8 Nur * / .myClass { 
  Farbe: rot \ 0 /;  / * rot * /
  Padding: 70px \ 0 /;  / * Einzug 70px nur für Internet Explorer 8 * /
 }
 / * IE 6 Nur * / * html .myClass {
 ...
 } 
 / * Alle außer IE6-Standards * / .myClass { 
 Eigenschaft / ** /: Wert; 
 } 
 / * Firefox & IE 7 und höher * / html> body .myClass {
  ...
 }
 / * Nur moderne Browser (nicht IE 7) * / html> / ** / body .myClass {
 ...
 }
 / * IE 7 Nur * / *: first-child + html .myClass {
  ...
 }
 / * Nur Firefox * / @ -moz-Dokument URL-Präfix () {
 .myClass {
 ...
 }
 }
 / * Nur Opera * / noindex: -o-prefocus, .MyClass {
 Farbe: rot;
 }
 / * IE7 Nur * / div [Klasse ^ = "myClass"] .myClass2 { 
 ...
 }
 / * IE7 nur * / * + html .myClass { 
 ...
 } 
 / * Hack für Opera <= 9 * / html: first-kind .myClass {
 ...
 } 
 / * Firefox, Opera, Konqueror, Safari * / * | html.myClass { 
 ...
 }
 / * Nur IE8 Beta 2 (?) * / Html: Erstes Kind .myClass [attr | = ab] { 
 ...
 } 
 / * IE5 / nur Mac * / / * \ * // * / .myClass {property: value;  } / ** / 
 / * Gecko nur * / .myClass: nicht ([attr * = ""]) { 
 ...
 } 
 / * Opera * / @media alle und (min-width: 0px) { 
 html: erstes Kind .myClass { 
 ...
 } 
 } 
 / * Nur Safari * / .myClass: nicht (: root: root) { 
 ...
 } 
 / * Safari 3.0 und Chrome nur * / @ media Bildschirm und (-webkit-min-Device-Pixel-Verhältnis: 0) {
  .myClass {
  ....
  }
 }
 / * Chrome-Browser * / body: nth-of-type (1) .myClass {
  ...
 }
 / * Safari-Browser css hack * / body: Ersttyp .myClass {property: value;}

CSS für den Explorer

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

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

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

	 <! - [wenn IE 6]> 
		 .. wenn unter IE 6
	 <! [endif] -> 

	 <! - [wenn IE IE 5.5]> 
		 ... wenn es unter oder gleich IE 5.5 ist 
	 <! [endif] -> 

	 <! - [wenn gt IE 6]> 
		 ... wenn über IE 6 
	 <! [endif] ->
	

Semitransparenz von Hintergrund in IE, Firefox, Opera

  .myClass {
	 Hintergrundfarbe: # 000;	
	 -moz-Opazität: .82;  / * Firefox * / 
	 Opazität: .82;  / * Oper * /
	 Filter: Alpha (Opazität = 82);  / * IE * /
	 }
	

Entfernen Sie zusätzliche Füllung in der Schaltfläche in Firefox

  Knopf :: - moz-focus-inner { 
	  Grenze: 0;
	  Auffüllen: 0;
	 }
	

Chrome / Firefox ...?

  Knopf {
	  -webkit-border-fit: Linien;
	 }
	

Firefox 2

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

Firefox 3

  html > / ** / body .selector, x: -moz-any-link, x: default { Farbe : Kalk ;
  }
 

Irgendein Firefox

  @ -moz-Dokument URL-Präfix () {
 
  .selector { Farbe : Kalk ;
  } }
 

Fortgeschritten



Khaki für IE

Syntax Wer versteht es? Beispiel:
Validierung bestehen
* html IE6
		 div {
		 Hintergrund: # ff0000;
		 }
		 * html div {
		 Hintergrund: # 000;
		 }
		
wichtig IE6
  div {
		 Hintergrund: # ff0000! wichtig;  / * für alle Browser * /
		 Hintergrund: # 000;  / * für IE6 * /
		 }
		
*: Erstes Kind + HTML IE7
  div {
		 Hintergrund: # ff0000;
		 }
		 *: erstes Kind + html div {
		 Hintergrund: # 000;
		 }
		
* + HTML IE7 +
kann Opera 9 und darunter verstehen
  div {
		 Hintergrund: # ff0000;
		 }
		 * + html div {
		 Hintergrund: # 000;
		 }
		
html> Körper wird alles außer IE6 verstehen
  div {
		 Hintergrund: # ff0000;
		 }
		 html> Körper div {
		 Hintergrund: # 000;
		 }
		
# ie # fix versteh alles außer IE8
  div {
		 Hintergrund: # ff0000;  / * für ie8 * /
		 }
		 div, # ie # fix {
		 Hintergrund: # 000;  / * für andere Browser * /
		 }
		
Validierung nicht bestehen (nicht empfohlen)
_property: Wert
und
-property: Wert
IE6
  div {
		 Hintergrund: # ff0000;  / * für alle Browser * /
		 _background: # 000;  / * für IE6 * /
		 }
		
* Eigenschaft: Wert
und
// Eigenschaft: Wert
IE6
IE7
  div {
		 Hintergrund: # ff0000;  / * für alle Browser * /
		 * Hintergrund: # 000;  / * für IE6 und IE7 * /
		 }
		
html * IE6
IE7
Chrome
Safari
  div {
		 Hintergrund: # ff0000;
		 }
		 html * div {
		 Hintergrund: # 000;
		 }
		
! dh IE6
IE7
  div {
		 Hintergrund: # ff0000;  / * für alle Browser * /
		 Hintergrund: # 000! dh;  / * für IE6 und IE7 * /
		 }
		

Khaki für Firefox

Syntax Wer versteht es? Beispiel:
Validierung nicht bestehen (nicht empfohlen)
html: root FF 1,5+
Oper 9.6
Aktualisierung: 14/01/10
nicht aktuell
(Versteh die neuen Versionen
Oper, Chrom, Safari)
  div {
		 Hintergrund: # ff0000;
		 }
		 html: Wurzel div {
		 Hintergrund: # 000;
		 }
		
x: -moz-any-link FF 1,5+
IE7
  div {
		 Hintergrund: # ff0000;
		 }
		 div, x: -moz-any-link {
		 Hintergrund: # 000;
		 }
		
@ -moz-Dokument URL-Präfix () FF 1,5+
  div {
		 Hintergrund: # ff0000;
		 }
		 @ -moz-Dokument URL-Präfix () {
		 div {
		 Hintergrund: # 000;
		 }}
		

Hacks für die Oper

Syntax Wer versteht es? Beispiel:
Besteht die Validierung
html: erstes Kind Oper 7-9.01
  div {
		 Hintergrund: # ff0000;
		 }
		 html: erstes Kind div {
		 Hintergrund: # 000;
		 }
		
Validierung nicht bestehen (nicht empfohlen)
@media alle und (min-width: 0)
validiert CSS3
Oper 9-9.6
Update 14.01.10
nicht aktuell
(verstanden als neu
Versionen von ff, chrome, safari)
  div {
		 Hintergrund: # ff0000;
		 }
		 @media alle und (min-width: 0) {
		 div {
		 Hintergrund: # 000;
		 }}
		
html> / ** / body noindex: -o-vorfokussieren, html> / ** / body Oper 9.5-10
  html> / ** / body noindex: -o-vorfokussieren, html> / ** / body p {
		 Farbe: # 0f0
		 }
		

Hacks für Chrome und Safari

Syntax Wer versteht es? Beispiel:
Validierung nicht bestehen (nicht empfohlen)
Körper: N-Typ (1)
Update 14.01.10 - nicht relevant (es wird von neuen Versionen von Oper, ff, Safari, Chrom verstanden)
  div {
		 Hintergrund: # ff0000;
		 }
		 Körper: nth-of-type (1) div {
		 Hintergrund: # 000;
		 }
		
html: root *
Update 14.01.10 - nicht relevant (es wird von neuen Versionen von Oper, ff, Safari, Chrom verstanden)
  div {
		 Hintergrund: # ff0000;
		 }
		 html: Wurzel * div {
		 Hintergrund: # 000;
		 }
		
html *
Safari
Chrome
IE6
IE7
  div {
		 Hintergrund: # ff0000;
		 }
		 html * div {
		 Hintergrund: # 000;
		 }
		

Khaki Konqueror

Syntax Wer versteht es? Beispiel:
Validierung nicht bestehen (nicht empfohlen)
html: nicht (: nth-child (1)) #element
Konqueror
FF 3.5
  #div {
		 Hintergrund: # ff0000;
		 }
		 html: nicht (: nth-child (1)) #div {
		 Hintergrund: # 000;
		 }