Tutorials
[ Zurück ]


CSS Hacks


Erst einmal die Frage, die sicherlich einige hier im Kopf haben, wenn sie den Titel dieses Tutorials gelesen haben:

Was sind CSS Hacks?

CSS Hacks sind im Prinzip Browserweichen, anhand derer man Bereiche in Stylesheets nur für bestimmte Browser zugänglich machen kann. CSS Hacks werden oft gebraucht, wenn einer der Browser einen Teil der Seite nicht so darstellt, wie es eigentlich sein sollte.
 

CSS Hacks

Ich werde hier erst einmal die Hacks aufführen und dann erklären, die Wirkungsweise und auch, welche Browser damit ausgeschlossen werden.
 

/* Beispiel 1 */
p[id] {
  eigenschaft:wert;
}

/* Beispiel 2 */
html>body #ID {
  eigenschaft:wert;
} 

/* Beispiel 3 */
* html #ID {
  eigenschaft:wert;
} 

/* Beispiel 4 */
*:first-child+html #ID {
  eigenschaft:wert;
} 

/* Beispiel 5 */
#ID/* */ {
  eigenschaft:wert;
}

/* Beispiel 6 */
* html #id {
  e\igenschaft:wert;
}

/* Beispiel 7 */
selektor {
  eigenschaft:wert; /* Deklaration fuer IE 5.x */
  voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
  voice-family:inherit;
  eigenschaft:wert;  /* Korrektur fuer andere Browser */
}

/* Beispiel 8 */
p.note
{
  eigenschaft:wert !important; 
  eigenschaft:wert; /* nur für den IE */
}

/* Beispiel 9 */
html* div {
  width : 20em;
}

/* Beispiel 10 */
:root div {
  color : blue;
}

/* Beispiel 11 */
div {
   color : blue;
   background-image : url(\\');
   color : red;
}



Jetzt zur Erklärung:
 

Beispiel 1

Dieses Beispiel schließt alle Versionen des Internet Explorers bis Version 6 aus. Hier wird festgelegt, dass alle p Elemente, die ein id Attribut enthalten, angesprochen werden.
 

Beispiel 2
 

Hier werden ebenfalls alle Versionen des Internet Explorers bis Version 6 ausgeschlossen. Der Hack funktioniert so: Das Body Element muss durch den Kindselektor (>) ein direktes Kind (also eine Ebene direkt unter) von html sein. Das ist an sich logisch, wird aber vom IE in den älteren Versionen nicht interpretiert. Dann wird das Element mit der ID #ID gewählt.
 

Beispiel 3

Hier sind alle Browser bis auf den IE bis Version 6 für Windows ausgeschlossen.
Dieser Hack ist unsinnig, da html kein übergeordnetes Element haben kann, was der Universalselektor (*) aber meint!
 

Beispiel 4

Diesen Hack versteht nur der Internet Explorer 7, alle anderen Browser und Versionen sind ausgeschlossen. Der Plus-Selektor (+) beschreibt, dass das nachfolgende Element direkt nach dem ersten folgen muss
 

Beispiel 5

Ein Kommentar schließt den Internet Explorer 4 und 5 aus.

Beispiel 6

Diesen Hack versteht nur der Internet Explorer 5, alle anderern Browser sind ausgeschlossen. Zu beachten ist hierbei, dass der Backslash (\) nicht vor die Buchstaben a bis f gesetzt wird, da sie sonst als Hexadezimale Zeichen verstanden werden.

Beispiel 7

ist im Code schon gezeigt. Der IE 5 interpretiert die geschlossene geschweifte Klammer fälschlicherweise als Ende des Style-Bereiches.

Beispiel 8

Der Internet Explorer versteht die Anweisung !important nicht, mit der eigentlich sichergestellt werden soll, dass genau diese Anweisung und nicht eine andere benutzt wird. Deshalb ist der Internet Explorer hier ausgeschlossen!

Beispiel 9

Hier wird der Leerraum zwischen html und dem Universalelement * fälschlicherweise weggelassen. Das wird von Firefox und Opera nicht ausgelesen, vom IE und von Safari hingegen schon.

Beispiel 10

Die Klasse :root beachten Firefox, Safari und Konquerer. Der Internet Explorer und Opera sind damit ausgeschlossen. Diese Klasse gehört zum normalen CSS-Standard.

Beispiel 11

Opera würde den Text in diesem Beispiel blau darstellen, alle anderen Browser rot. Das liegt daran, dass Opera an dem einzelnen Anführungsstrich bei der Hintergrundangabe scheitert.

Und was ist mit Conditional Comments?

Ja, die gibt es auch noch. Aber darauf werde ich jetzt nicht weiter eingehen, die sind weder kompliziert noch schwierig im Netz zu finden.

Ich habe noch Fragen!

Dann sprich mich einfach an, ich bin gerne bereit, Fragen zu beantworten!

Erstellt:12.03.09 10:03
Autor: kaenguruhs

Letzte Änderung: 12.03.09 10:33
Geändert von: kaenguruhs

Bewertungen:1
Bewertung: 4.0

Freigeschaltet: Ja
Views 4558

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 67] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE