CSS-Hack ist eine Abhilfe, die verwendet wird, wenn Standard-CSS nicht mit den Anzeigeeffekten verschiedener Browser kompatibel ist, bis sich die Browserhersteller darauf einigen, wie CSS analysiert wird, können wir diese Methode nur zur Durchführung solcher Aufgaben verwenden. Möglicherweise können Sie im Internet nach vielen CSS-Hacks suchen, aber Sie verstehen möglicherweise nicht alle, die ich heute veröffentlicht habe, da es sich um CSS-Hacks handelt, die nur auf einen einzelnen Browser abzielen.
Um Ihnen zu zeigen, dass diese CSS-Hacks funktionieren, habe ich sechs neue P-Tags erstellt und jedem P-Tag eine eindeutige ID gegeben. Dies zeigt Ihnen den CSS-Hack in Aktion.
| <p id="opera">Ich komme von Opera 7.2 – 9.5</p> <p id="safari">Ich bin die magische Safari</p> <p id="firefox">Ich komme von Firefox</p> <p id="firefox12">Ich bin ein FF Senior Firefox 1–2 </p> <p id="ie7">Ich bin 囧IE7</p> <p id="ie6">Ich habe einen kaputten IE 6</p> |
Dann lasse ich diese P-Tags standardmäßig nicht anzeigen
| <style type="text/css"> Körper p{Anzeige: keine;} </style> |
Verwenden Sie bedingte IE-CSS-Kommentare, um IE-Browser zu unterscheiden
Der einfachste Weg, IE-Browser zu unterscheiden, ist natürlich die Verwendung ihrer bedingten Kommentare. Microsoft hat eine leistungsstarke Syntax erstellt, die es uns ermöglicht, diese Funktionalität zu erreichen. Ich möchte die bedingten Kommentare des IE nicht im Detail vorstellen. Ich denke, Sie können in der Suchmaschine nach Zehntausenden von Suchbegriffen suchen. Ich brauche hier nur diese beiden:
| <!--[if IE 7]> <style type="text/css"> </style> <![endif]--> <!--[if IE 6]> <style type="text/css"> </style> <![endif]--> |
Verwenden Sie CSS-Parser-Hacks, um IE zu unterscheiden
Obwohl IE-bedingte Kommentare sehr einfach und leicht zu verwenden sind, müssen Sie andere Methoden verwenden, wenn Sie das gesamte CSS in einer Datei unterbringen möchten. Beachten Sie, dass der IE 7-Hack hier nur auf IE7 funktioniert, da IE6 den >-Selektor überhaupt nicht kennt. Dabei ist zu beachten, dass der >-Selektor auch für andere Browser ungültig ist.
| /* IE 7 */ html > Körper #ie7 {*display: block;} /* IE 6 */ Körper #ie6 {_display: block;} |
CSS-Hack zur Differenzierung von Firefox
Der erste verwendet body:empty, um zwischen Firefox 1 und 2 zu unterscheiden. Der zweite Hack verwendet eine proprietäre Erweiterung für alle Firefox-Browser – moz. -moz ist nur für Firefox gültig. Sie müssen sich bei der Verwendung dieses Hacks keine Sorgen über die Auswirkungen anderer Browser machen.
| /* Firefox 1 - 2 */ Körper:leer #firefox12 {Anzeige: Block;} /* Firefox */ @-moz-document url-prefix() {#firefox { display: block }} |
CSS-Hack unterscheidet Safari
Der CSS-Hack von Safari sieht dem Firefox-Hack sehr ähnlich. Er verwendet die proprietäre Erweiterung des Safari-Browsers – das Webkit – und ist nur für den Safari-Browser wirksam.
| /* Safari */ @media screen und (-webkit-min-device-pixel-ratio:0) {#safari { display: block }} |
CSS-Hack zeichnet Opera aus
| /* Oper */ @media alle und (-webkit-min-device-pixel-ratio:10000), nicht alle und (-webkit-min-device-pixel-ratio:0) {head~body #opera { display: block }} |
Dann fügen Sie alles zusammen und es wird
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <Kopf> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS-Browser-Hacks</title> <style type="text/css"> Körper p { Anzeige: keine; } /* Oper */ html:first-child #opera { Anzeige: Block; } /* IE 7 */ html > Körper #ie7 { *Anzeige: Block; } /* IE 6 */ Körper #ie6 { _display: block; } /* Firefox 1 - 2 */ Körper:leer #firefox12 { Anzeige: Block; } /* Firefox */ @-moz-document url-prefix() { #firefox { display: block } } /* Safari */ @media screen und (-webkit-min-device-pixel-ratio:0) { #safari { display: block } } /* Oper */ @media alle und (-webkit-min-device-pixel-ratio:10000), nicht alle und (-webkit-min-device-pixel-ratio:0) { head~body #opera { display: block } } </style> </head> <Körper> <p id="opera">Ich komme von Opera 7.2 – 9.5</p> <p id="safari">Ich bin die magische Safari</p> <p id="firefox">Ich komme von Firefox</p> <p id="firefox12">Ich bin ein FF Senior Firefox 1–2 </p> <p id="ie7">Ich bin 囧IE7</p> <p id="ie6">Ich habe einen kaputten IE 6</p></body> </html> |
Obwohl CSS Hack gut und bequem mit verschiedenen Browsern kompatibel ist, kann es die W3C-Verifizierung nicht bestehen, sodass Sie abwägen müssen, ob es notwendig ist, es zu verwenden.