Die verschiedenen Arten

Wir haben in CSS diverse Möglichkeiten Styles einzubinden. Einen klaren Favoriten gibt es allerdings nicht. Jede der hier aufgeführten Varianten ist beliebig oft auf Webseiten zu finden. Jedoch soll an dieser Stelle ein kleiner Grundgedanke eingeführt werden:

Wenn man von einem Webdesign spricht, dann hat das auch zur Folge, dass wir dieses Design auf allen Dokumenten unserer Website wiederfinden. Aus diesem Grund ist es natürlich von Vorteil, wenn man diese Regeln in eine externe Datei auslagert und diese dann lediglich einbindet. Somit ersparen wir uns das erneute Definieren von Regeln. Allerdings bringt das keinerlei Performance-Vorteil, denn der Code wird auf jeder Seite so oder so eingebunden.

Performance können wir in CSS lediglich durch Vermeidung von Mehrfachdeklarationen und Benutzung von Shortcuts (margin: 10px;) erreichen.

Jedoch treffen wir bei einem Design häufig auf eine kleine Individualität. Ist diese auf ein Element beschränkt (geänderte Farbe der Überschrift), sollte das style="" Attribut verwendet werden. Für eine Regeländerung von mehreren Elementen innerhalb eines Elements ist es vorteilhafter, wenn wir das <style></style> Element benutzen.

Einbindung über das style-Attribut

Diese Methode trägt die größtmögliche Gewichtung und wird in fast jedem Fall (außer !important wird benutzt) angewendet. Sie wird für kleine stilistische Änderungen am Element selbst angewendet und mithilfe des style="" Attributs im Element selber eingebunden:

  • Html
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1 style="color: red;">Eine rote Überschrift</h1> </body> </html>

Einbindung über das style-Element

Bei dieser Wahl müssen wir die Regeln mithilfe des style="" Elements im Kopfbereich des HTML Dokuments einbinden:

  • Html
  • Ergebnis
<!DOCTYPE html> <html> <head> <style> h1 { color: red; } </style> </head> <body> <h1>Eine rote Überschrift</h1> </body> </html>

Einbindung einer externen CSS-Datei

Möchten wir mehrere Regeln in eine separate Datei auslagern, geben wir dieser die Endung .css. Diese lässt sich nun auf zwei Arten einbinden:

Mit der ersten Möglichkeit können wir diese Datei mithilfe des <link> Elements im Kopfbereich referenzieren:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="PFAD_ZUR_DATEI.css"> </head> <body> <h1>Eine rote Überschrift</h1> </body> </html>
h1 { color: red; }

Mit dem Attribut rel="" geben wir an, dass wir ein Stylesheet einbinden wollen. Da Sylesheets nicht nur mit CSS generiert sind, müssen wir noch angeben, dass es sich um ein solches handelt: text/css. Mit dem Attribut media="" geben wir das Ausgabemedium an. Handelt es sich um eine Anzeige auf einem Bildschirm oder handelt es sich um Styles für den Drucker? Das wichtigste Attribut ist href="". Damit geben wir den Pfad zur Datei an.

Die zweite Möglichkeit knüpft unmittelbar an die erste an mit dem kleinen Unterschied, dass wir nun CSS dafür benutzen.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head> <style> @import url(PFAD_ZUR_DATEI.css) screen; </style> </head> <body> <h1>Eine rote Überschrift</h1> </body> </html>
h1 { color: red; }

Da wir die externe Datei innerhalb eines <style></style> Elements einbinden, können wir uns die Angaben der Relation und Art sparen.

Mit der Anweisung @import geben wir an, dass wir eine CSS-Datei einbinden wollen. In dem Ausdruck url() geben wir den Pfad zur Datei an. Die Angabe des Ausgabemediums können wir einfach dahinter schreiben.

Bedingte Einbindung

Da nicht alle Browser das gesamte Regelwerk von CSS einheitlich unterstützen, muss es einen Weg finden, unterschiedliche Stylesheets einzubinden. Diesen haben wir mithilfe der bedingten Einbindung (eng. Conditional Comments). Da der Internet Explorer in der Regel für das Design-Desaster verantwortlich ist, gebührt ihm tatsächlich ein separates Sprachkonstrukt in HTML:

<!--[if IE]> Einbindungs-Code <![endif]-->

Ja, das IE der bedingten Einbindung steht für den Internet Explorer. Dieses Sprachkonstrukt hat 5 Operatoren, die im Folgenden aufgeführt sind:

OperatorBeschreibungBeispiel
!Not (nicht)

Wird direkt vor einem Wert platziert und negiert diesen.
Wird der Internet Explorer 7 nicht verwendet?

<!--[if !IE 7]>
ltLower Than (kleiner als)

Vergleicht zwei Werte.
Wird eine Version kleiner als 7 des Internet Explorers verwendet?

<!--[if lt IE 7]>
gtGreater Than (größer als)

Vergleicht zwei Werte.
Wird eine Version größer als 7 des Internet Explorers verwendet?

<!--[if gt IE 7]>
lteLower Than Equals (kleiner oder gleich)

Vergleicht zwei Werte.
Wird eine Version kleiner oder gleich 7 des Internet Explorers verwendet?

<!--[if lte IE 7]>
gteGreater Than Equals (größer oder gleich)

Vergleicht zwei Werte.
Wird eine Version größer oder gleich 7 des Internet Explorers verwendet?

<!--[if gte IE 7]>

Die bedingte Einbindung hat allerdings auch einen Nachteil, denn mit jeder weiteren Einbindung, die hinzukommt, haben wir auch einen weiteren HTTP-Request, was zu lasten der Performance geht. Paul Irish entwickelte deshalb die Methode der bedingten <body>-Tags.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head> <title>Bedingte Body-Tags</title> </head> <!--[if IE 6]> <body class="ie6"> <![endif]--> <!--[if IE 7]> <body class="ie7"> <![endif]--> <!--[if IE 8]> <body class="ie8"> <![endif]--> <!--[if IE 9]> <body class="ie9"> <![endif]--> <h1>Im Internet Explorer mit Farbe</h1> </body> </html>
.ie6 h1{ color: red; } .ie7 h1{ color: blue; } .ie8 h1{ color: green; } .ie9 h1{ color: orange; }

Bei dieser Version wird die bedingte Einbindung dafür verwendet, unterschiedliche Klassen im <body>-Tag zu definieren. Diese Klassen sind in einer einzigen .css-Datei definiert. Dieses Konzept spart HTTP-Requests, macht die Datei an sich jedoch größer. Hier müssen wir also abwägen, ob es wesentliche Änderungen oder nur kleine Regeln sind, die wir je nach Version verändern.