Spezialthema

War Ukraine Russland

CSS-Hacks

Browser und Standards. Das ewige Streben nach. Wegen Unstimmigkeiten Normen, aufgrund der unterschiedlichen Formen von Seiten der meisten der Web-Designer die Rendering-Zeit wird dafür ausgegeben für diese Diskrepanzen zu machen (zu Hacks verwenden). Als Ergebnis statt effektive Arbeit gibt der Designer in der unnatürlichen Beziehung mit Browsern, wertvolle Zeit zu verlieren.

Css Hack - spezifische CSS - Design, das einige Browser verstehen und die anderen ignorieren. Mit spricht Hacks oft unprofessionell Coder. Aber es gibt Fälle, in denen ein Hack - der einzige Weg, das Problem zu lösen (zum Beispiel bekannte Browser-Bugs (siehe "Browser Bugs")). Sie nicht auch, dass in unserer Zeit Eile vergessen - ein weit verbreitetes Phänomen. Daher werden die Begriffe "gestern" - keine Überraschung. Deshalb gibt es keine Zeit gibt, nicht zu beschäftigen nicht gehen, wie Sie möchten.

Plus-CSS-Hacks

Es ist eine schnelle Lösung. Schreiben zusätzliche Leitungen und alles ist in Ordnung, wir machen weiter.

Nachteile CSS-Hacks

Es gibt keine Gewissheit, wie Website mit der Veröffentlichung der neuen Versionen von Browsern zu verhalten. Zum Beispiel, Sie Code schreiben von Firefox zu hacken, in einem Monat gibt es eine neue Version von Safari, und es stellt sich heraus , dass sie wahrnimmt , auch zu hacken! Wir müssen es wiederholen.
Viele der Hacks der Gültigkeitsprüfung nicht - die Gefahr, dies wird in dem vorhergehenden Absatz beschrieben.

Wenn möglich, versuchen Sie es mit Hacks zu vermeiden. Um IE Fehler zu beheben, verwenden Sie eine separate CSS-Datei kotjry über bedingte Kommentare verbunden.

Glossar

Cross-Browser - Seite sind Eigentum erscheinen und arbeiten in allen gängigen Browsern identisch.

Haq - Fehler zu beheben oder neue Funktionen durch die Verwendung von anderen Menschen ohne Papiere oder schlecht implementierten Features hinzufügen.

Schmutzige Hack - eine schnelle Lösung für jedes Problem, vor allem auf kurze Sicht, das Wesen der Schönheit und innere Code verstimmt mit seiner inneren Struktur zu berauben.

CSS-Hacks für den Internet Explorer

ZOOM: 1:
Haq zur Bestimmung hasLayout

  * {Zoom: 1;
  }

PNG in IE6:
Für IE6 htc-Datei iepngfix.htc verbunden, PNG-Format für Hintergrundbilder für alle elementov in CSSF-ie6.css Datei korrekt zu arbeiten. Verwenden Sie IE PNG Fix v1.0 RC4 neueste Version verfügbar .

  * {Verhalten: url ( "css / iepngfix.htc");  }

Wenn signifikante Byte ist ein Beispiel eines Filters für IE zu verwenden:

  .class {
  
   Hintergrund: none;
  
 
   Filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (
  
   src = '/images/png-image.png',
  
   sizingMethod = 'scale'
  
   );
  
  }

Department of Styles von IE6:

  html> body.  Klasse {} Kopf + Körper.
  Klasse {} html: first-child .  Klasse {}

Department of Styles von IE6 und IE7:

  html> / ** / body {}

Department of Styles von IE6 - IE8:

  * | Html.  Klasse {} html: nicht ([ lang * = ""]).  Klasse {}

Bedingte Kommentare in IE:
Bedingte Kommentare funktionieren nur im Internet Explorer auf Windows, anderen Browsern sie üblichen Kommentare sind, so können sie sicher verwendet werden. Die Syntax lautet:

  <! - [If Bedingung]> <link href = "styles.css " rel = "stylesheet" media = "all" /> < ! [Endif] -> <! - [! Wenn Bedingung]> <link href = "styles.css" rel = " stylesheet" media = "all" /> < ! [endif] -> / * Wenn Sie den Explorer einige Stück Code zu ignorieren möchten, verwenden Sie die Bedingung * /!
 
  / * Kann der Zustand sein:
 
  IE - für jede Version von IE
 
  IE lt v - (weniger als) für alle IE - Browser - Version , die weniger als v ist
 
  lte IE v - (kleiner oder gleich) für alle IE - Browser - Version , die kleiner als V ist, oder die gleiche
 
  gte IE v - (größer oder gleich) - für IE, die auf Version v mehr als oder gleich ist
 
  gt IE v - (größer als) - für den Internet Explorer, Version größer ist als v.
  * /

Bedingte Kommentare in IE6, IE7, IE8:

  <! - [If IE 6]> <link href = "ie6.css " rel = "stylesheet" media = "all" /> < ! [Endif] -> / * Style - Sheet für IE6 * /
 
  <! - [If IE 7]> <link href = "ie7.css " rel = "stylesheet" media = "all" /> < ! [Endif] -> / * Style - Sheet für IE7 * /
 
  <! - [If IE 8]> <link href = "ie8.css " rel = "stylesheet" media = "all" /> < ! [Endif] -> / * Style - Sheet für IE8 * /

Box - Modell Hack:
In IE gibt es Störungen, wenn die Grenze und Polsterung in der Breite eines Elements enthalten. Box Model Hack Fixit sie.

  .  Klasse {
 
  padding: 4 em; 
  Grenze: 1 em solide rot; 
  Breite: 30 em; 
  Breite / ** /: / ** / 25 em; 
 }
 / * Für IE Breite des Blocks geringer ist als der Wert der Polsterung + Grenze * /

Min-Breite und max-width im IE:
IE nicht versteht, diese Eigenschaften CSS. Haq für die Einheit ist wie folgt:

  .class {
  
   min-Breite: 500 px;
  
   Breite: Ausdruck (
  
   document.body.clientWidth <500?
  "500px": "auto"
  
   );
  } / * Für IE Breite des Blocks geringer ist als der Wert der Polsterung + Grenze * /

  .class {
  
   min-Breite: 500 px;
  
   max-width: 750 Pixel;
  
   Breite: Ausdruck (
  
   document.body.clientWidth <500?
  "500px":
  
   document.body.clientWidth> 750?
  "750px": "auto"
  
   );
  } / * Für IE Breite des Blocks geringer ist als der Wert der Polsterung + Grenze * /

Min-Höhe Hack von Dustin Diaz

  .class {
  
   min-height: 100%;
  
   height: auto wichtig ;!
  
   height: 100%;
  
  }

Einfache Selektoren:
Sie müssen keine separate Datei für jeden Browser erstellen. Sie können einzelne CSS-Selektoren in der Haupt CSS-Datei:

  * Html.  Klasse {} / * Wenn Sie sich den HTML-Seiten ein Doctype haben, dieser Hack funktioniert in IE6 * / / * Im Falle von Macken-Modus, hacken Werke in IE6 und IE7.
  * / *: Erste-Kind + html.  Klasse {} / * für IE 7 und unten (first-child) * / * + html.  Klasse {} / * Für IE 7 * / *: first-child + html.  Klasse {} / * Für IE 7 * / html> body.
  Klasse {} / * für IE 7 und normalen Browser * / html> / ** / body .class {} / * Für den normalen Browsern (außer IE 7) * / / * Beispiel:
 
  .class {background: red}
 
  * Html .class {background: green}
 
  In allen Browsern außer IE6 und unten ist Hintergrund ist rot, und in IE6 und unten Browser - Grün * /

Unsaubere für IE6:

  .  Klasse {_background: # F00;
  }.
  Klasse {- background: # F00;
  }.
  Klasse {c \ olor: # F00 ;  } / * Nicht a, b, c, d, vor den Buchstaben Arbeits e, f * /

Unsaubere für IE7:

  > Body {background: # F00;  } / * Wählt das Körperelement nur in IE7 * / html * {background: # F00;  } / * Wählt alle Elemente innerhalb des HTML - Elements.
  Nur für IE7 und unten * / -, .class {background: # F00;  } .class {Background: # F00 wichtig !!  ;
  } / * Arbeitet Hack mit der Eigenschaft analog! Wichtig.
  Werke für IE7 und unten * /

Unsaubere für IE8:

  .class {background: # F00 \ 0 /;
  } / * Wählt das Körperelement von IE7 nur * /

Unsaubere Arbeit in IE6 und IE7:

  .class {* background: # F00;
  } .class {// Hintergrund: # F00 ;  } .class {Background: # F00 dh ;!  } / * Hack arbeitet mit der Eigenschaft analog! Wichtig * /

CSS-Hacks für Mozila FireFox-Browser

Khaki für alle Versionen MFR:

  #class [id = class] {color : # F00;  } @ -moz-Dokument - URL-Präfix () {.class {color: # F00;  }}

 *> .class {Color: # F00 ;  }

Für MFR 1.5 und höher:

  .class-, x: -moz-Any- Link, x: Nur-Kind {color: # F00;  }

Für MFR 2.0 und höher:

  Körper: leer .class {color: # F00;  } #class [Id = CLASS] { color: # F00;  } Html> / ** / body .class- , x: -moz-any-link {color: # F00;  }

Für MFR 3.0 und vielleicht vor:

  html> / ** / body .class-, x: -moz-any-Link, x: default {color: # F00;  }

CSS-Hacks für Google Chrome-Browser

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

CSS-Hacks für den Opera-Browser

Khaki für alle Versionen von Opera:

  @ Medien alle und (-webkit-min -device-Pixel-Verhältnis: 10.000)
  
  nicht alle und (-webkit-Min- geräte Pixel-Verhältnis: 0) { 
  .style {background: # F00;
  }

	 }

  @ Medien alle und (min-width : 0 px)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
	 }

Für Opera 6:

  @ Medien alle und (min-width : 1 px)
 
   {{}
 
  .class {
  
   color: # F00;
  
   }
 
	 }

Für Opera 7, 8:

  @ Medien alle und (min-width : 1 px)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
	 }

Für Opera 9:

  @ Medien alle und (Breite)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
	 }

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

CSS-Hacks für den Safari-Browser

  Körper: first-of-type .class {color: # F00;  } Html: root * .class {color : # F00;  } Körper: first-of-type .class {color: # F00;  } Körper: first-of-type .class {color: # F00;  }

  @ Media - Bildschirm und (-webkit-min -device-Pixel-Verhältnis: 0)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
 }
 / * Hack für Opera und Safari * /

Selector Hacks

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

	 / * IE6 und unten * /
	 * Html #uno {color: red}

	 / * IE7 * /
	 *: Erste-Kind + html #dos {color: red}

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

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

	 / * Opera 9.27 und unten, Safari 2 * /
	 html: first-child #cinco {color: red}

	 / * Safari 2-3 * /
	 html [Xmlns * = ""] Körper: last-child #seis {color: red}

	 / * Safari 3+, Chrom 1+, Opera9 +, ff 3.5+ * /
	 Körper: n-te-of-Typ (1) #siete {color: red}

	 / * Safari 3+, Chrom 1+, Opera9 +, ff 3.5+ * /
	 Körper: first-of-type #ocho {color: red}

	 / * Saf3 +, chrome1 + * /
	 @media Bildschirm und (-webkit-min-device-Pixel-Verhältnis: 0) {
	  #diez {color: red}
	 }

	 / * IPhone / Handy webkit * /
	 @media Bildschirm und (max-device-width: 480px) {
	  #veintiseis {color: red}
	 }


	 / * Die Safari 2-3,1 * /
	 html [Xmlns * = ""]: root #trece {color: red}

	 / * Safari 2-3,1, Opera 9.25 * /
	 * | Html [Xmlns * = ""] #catorce {color: red}

	 / * Alles außer IE6-8 * /
	 : Root *> #quince {color: red}

	 / * IE7 * /
	 * + Html #dieciocho {color: red}

	 / * IE 10+ * /
	 @media Bildschirm und (-ms-Hochkontrast: aktiv), (-ms-hohem Kontrast: keine) {
	  #veintiun {color: red;  }
	 }

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

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

	 / * FF 3.5+ * /
	 Körper: nicht (: - moz-Handler-blockiert) #cuarenta {color: red;  }

Attribut Hacks

 / ***** Attribut Hacks ****** / / * IE6 * / #once {_color: blue} / * IE6, IE7 * / #doce {* color: blue;  / * Oder #color: blau * /} / * Alles außer IE6 * / #diecisiete {color / ** /: blue} / * IE6, IE7, IE8, IE9, sondern auch in einigen Fällen  * / #diecinueve {Color: blue \ 9;  } / * IE7, IE8 * / #veinte {color / * \ ** /: blau \ 9;  } / * IE6, IE7 - fungiert als wichtiges * / #veintesiete {color: blue ie; !!  } / * String nach!  kann alles * / / * IE8, IE9 * / #anotherone {color: blue \ 0 /;} sein / * am Ende aller Regeln * / / * IE9, IE10 * / @ media-Bildschirm und (min-Breite gehen muss 0 \ 0) {#veintidos {color: red}}

Immobilien Präfix Hacks

 / * Eigenschaft Präfix Hacks * / / * nur IE6 - eine beliebige Kombination dieser Zeichen * / _ -?  ¬ | / * IE6 / 7 - nur eine beliebige Kombination dieser Zeichen * /!  $ & * () = +% @.  / `[] # ~?  : <> |

@media Hacks

	 / * @media Hacks * /

	 / * IE6 / 7 nur (über Keith Clarke) * /
	 @media Bildschirm \ {9}

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

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

	 / * Von IE8 / 9 * /
	 @media Bildschirm \ {0}

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

  / * Nur auf IE8 Hack nur * / .myClass {
 
  Farbe: rot \ 0 /;  / * Rot * /
  padding: 70px \ 0 /;  / * Padding 70px nur für den Internet Explorer 8 * /
 }
 / * IE 6 nur * / * html .myClass {

 ...
 } 
 / * Alle außer IE6 Standards * / .myClass { 
 Immobilien / ** /: Wert; 
 } 
 / * Firefox & IE 7 und höher * / html> body {.myClass

  ...
 }
 / * Moderne Browser nur (nicht IE 7) * / html> / ** / Körper .myClass {
 ...
 }
 / * IE 7 nur * / *: first-child + html .myClass {
  ...
 }
 / * Firefox Nur * / @ -moz -Dokument URL-Präfix () {
 .myClass {
 ...
 }
 }
 / * Opera Nur * / noindex: -o-Vorfokussierung, .MyClass {
 Farbe: rot;
 }
 / * IE7 nur * / div [ Klasse ^ = "myClass"] .myClass2 { 
 ...
 }
 / * IE7 nur * / * + html .myClass { 
 ...
 } 
 / * Für Opera Hack <= 9 * / html: first-child .myClass {
 ...
 } 
 / * Firefox, Opera, Konqueror, Safari * / * | html .myClass { 
 ...
 }
 / * IE8 Beta 2 nur * / html: first-child | (?) .myClass [Attr = ab] { 
 ...
 } 
 / * IE5 / Mac nur * / / * \ * // * / .myClass {Eigenschaft: Wert;  } / ** / 
 / * Gecko nur * / .myClass: nicht ([attr * = ""]) { 
 ...
 } 
 / * Opera * / @ media alle und (min-width: 0px) { 
 html: first-child .myClass { 
 ...
 } 
 } 
 / * Safari nur * / .myClass: nicht (: root: root) { 
 ...
 } 
 / * Safari 3.0 und Chrome nur * / @ media - Bildschirm und (-webkit-min-device-Pixel-Verhältnis: 0) {
  .myClass {
  ....
  }
 }
 / * Chrome - Browser * / body: n - te-of-Typ ( 1) .myClass {
  ...
 }
 / * Safari - Browser CSS - Hack * / Körper: first-of-type .myClass {Eigenschaft: Wert;}

CSS für Explorer

  <! - [If IE]> 
	 ... Wenn der Internet Explorer ..
	 <Link href = "ie-fix.css" type = "text / css" rel = "stylesheet"> 
	 <[Endif] -> 

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

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

	 <! - [If lt IE 6]> 
		 .. Wenn niedrigere IE 6
	 <[Endif] -> 

	 <! - [If lte IE 5.5]> 
		 ... Wenn es kleiner oder gleich IE 5.5 
	 <[Endif] -> 

	 <! - [If gt IE 6]> 
		 ... Wenn die oben IE 6 
	 <[Endif] ->

Durchlässiger Hintergrund im IE, Firefox, Opera

  .myClass {
	 background-color: # 000;	
	 -moz-Opazität: 0,82;  / * Firefox * / 
	 Opazität: 0,82;  / * Opera * /
	 Filter: alpha (Opazität = 82);  / * IE * /
	 }

Entfernen Sie die zusätzliche Polsterung in der Taste in Firefox

  Taste :: - moz-Fokus-Innen { 
	  border: 0;
	  padding: 0;
	 }

Chrome / Firefox ...?

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

Firefox 2

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

Firefox 3

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

Alle Firefox

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

zusätzlich

Hacks für den IE

Pass-Validierung
Syntax	Wer weiß ,	Beispiel
* html	IE6	div { Hintergrund: # ff0000; } * Html div { Hintergrund: # 000; }
! important	IE6	div { Hintergrund: # ff0000 wichtig ;! / * Für alle Browser * / Hintergrund: # 000; / * Für die von IE6 * / }
*: Erste-Kind + html	IE7	div { Hintergrund: # ff0000; } *: Erste-Kind + html div { Hintergrund: # 000; }
* + Html	IE7 + kann Opera 9 verstehen und unten	div { Hintergrund: # ff0000; } * + Html div { Hintergrund: # 000; }
html> body	verstehen alles außer IE6	div { Hintergrund: # ff0000; } html> body {div Hintergrund: # 000; }
# Dh # fix	verstehen alles außer IE8	div { Hintergrund: # ff0000; / * Für ie8 * / } div, # also # Korrektur { Hintergrund: # 000; / * Für andere Browser * / }
Sie die Überprüfung nicht bestanden (nicht empfohlen)
_svoystvo: Wert und -property: Wert	IE6	div { Hintergrund: # ff0000; / * Für alle Browser * / _background: # 000; / * Für die von 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 Chrom 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 * / }

Hacks für Firefox

Sie die Überprüfung nicht bestanden (nicht empfohlen)
Syntax	Wer weiß ,	Beispiel
~~html: root~~	FF 1.5+ Opera 9.6 Update: 14.01.10 nicht aktuell (Verstehen Sie die neue Version Oper, Chrome, Safari)	div { Hintergrund: # ff0000; } html: root 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 Opera

Pässe Validierung
Syntax	Wer weiß ,	Beispiel
html: first-child	Opera 7-9,01	div { Hintergrund: # ff0000; } html: first-child div { Hintergrund: # 000; }
Sie die Überprüfung nicht bestanden (nicht empfohlen)
~~@media alle und (min-width: 0)~~ gibt Validierung CSS3	Opera 9-9,6 Update 14.01.10 nicht aktuell (Bezieht sich auf neue Versionen ff, Chrome, Safari)	div { Hintergrund: # ff0000; } @media alle und (min-width: 0) { div { Hintergrund: # 000; }}
html> / / body noindex: -o-Vorfokussierung, html> / / body	Opera 9,5-10	html> / / body noindex: -o-Vorfokussierung, html> / / body p { color: # 0F0 }

Hacks für Chrome und Safari

Sie die Überprüfung nicht bestanden (nicht empfohlen)
Syntax	Wer weiß ,	Beispiel
~~Körper: n~~ - ~~te-of-Art (1)~~	Update 14.01.10 - Datum (Mittelwert neue Versionen der Oper, ff, Safari, Chrome)	div { Hintergrund: # ff0000; } Körper: n-te-of-Typ (1) div { Hintergrund: # 000; }
html: Wurzel *	Update 14.01.10 - Datum (Mittelwert neue Versionen der Oper, ff, Safari, Chrome)	div { Hintergrund: # ff0000; } html: root * div { Hintergrund: # 000; }
html *	Safari Chrom IE6 IE7	div { Hintergrund: # ff0000; } html * div { Hintergrund: # 000; }

Khaki Konqueror

Sie die Überprüfung nicht bestanden (nicht empfohlen)
Syntax	Wer weiß ,	Beispiel
html: nicht (: n-te-Kind (1)) #element	Konqueror FF 3.5	#div { Hintergrund: # ff0000; } html: nicht (: n-te-Kind (1)) {#div Hintergrund: # 000; }

Wie es? Abonnieren Sie RSS Nachrichten!
Sie können auch shram.kiev.ua unterstützen, klicken Sie auf:

Seien Sie nicht zu Ihren Freunden und finden Sie diese Informationen, teilen mit ihnen den Artikel nicht in Ordnung!

Erweitern / Reduzieren

Kommentare

im Auge kommentierte halten , dass der Inhalt und der Ton Ihrer Nachrichten , die Gefühle von echten Menschen verletzen können, Respekt und Toleranz gegenüber seinen Gesprächspartnern, auch wenn Sie Ihr Verhalten in Bezug auf die Meinungsfreiheit und die Anonymität des Internets, ändert ihre Meinung nicht teilen, nicht nur virtuell, sondern realen Welt. Alle Kommentare werden aus dem Index, Spam - Kontrolle versteckt.

Kostenlose Kreditkarte mit einem Limit von 15.000 US-Dollar.