http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Die Kaskade

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Die vielen Möglichkeiten, CSS einzubinden, weisen schon auf eine Besonderheit der Sprache hin: Das »C« in CSS steht für »Cascading« (kaskadierend). Damit ist gemeint, dass mehrere Stylesheets zusammenwirken können, nacheinander oder parallel, selbst wenn sie konkurrierende Regeln enthalten.

So ist das Browserstylesheet das erste Stylesheet, das auf eine Webseite angewandt wird. Darin stehen bestimmte Regeln, die sich zum größten Teil an den Initialwerten der CSS-Empfehlung anlehnen, aber auch häufig von ihnen abweichen – bei Schriftgrößen für Überschriften, Unterstreichungen für Links, Abständen für Formulare und Absätze und dergleichen mehr. Auch wenn nicht alle Browser tatsächlich ein in CSS geschriebenes Standardstylesheet verwenden, so lassen sich die mitgebrachten Formatierungsregeln doch größtenteils in CSS ausdrücken. Webautoren müssen sich der Tatsache bewusst sein, dass jeder Browser Standardeinstellungen mit sich bringt, die sich alle leicht voneinander unterscheiden. So erzeugt Opera den Abstand des Elements body zum Rand der Anzeigefläche mit der Eigenschaft padding, während Gecko und der Internet Explorer hierfür margin verwenden. Um den Abstand zu entfernen, müssen Webautoren daher beiden Eigenschaften den Wert 0 zuweisen und damit zwei unterschiedliche Browserstylesheets überschreiben.

Weiterhin werden zunehmend Userstylesheets eingesetzt. Dabei handelt es sich um CSS-Dateien, die sich Ihre Besucher erstellt haben, um bestimmte Vorlieben durchzusetzen, etwa eine bestimmte Schriftgröße oder eine Kombination aus Vorder- und Hintergrundfarben. Viele Browser bieten Konfigurationsmöglichkeiten, derartige Einstellungen ohne hinterlegtes CSS-Stylesheet vornehmen zu können. Opera bietet beispielsweise die Möglichkeit, die Unterstreichung von Links ein- oder auszuschalten sowie deren Farbe im besuchten und unbesuchten Zustand zu bestimmen. All diese nutzerspezifischen Einstellungen überschreiben die generellen Einstellungen im Browserstylesheet.

Schließlich können Sie auch Ihre Autorenstylesheets kaskadieren lassen, etwa indem Sie schon im Markup mehrere Stylesheets referenzieren oder mit der @import-Regel zusätzliche Stylesheets einbinden – all diese Stylesheets kaskadieren sozusagen zu einem Gesamtstylesheet.

Es liegt nahe, dass es durch Kaskade oft zu konkurrierenden Regeln kommt. So kann im Browserstylesheet die Schrift »Times New Roman« für body gesetzt sein, im Autorenstylesheet »Georgia« an der einen, »Arial« an der anderen Stelle und im Userstylesheet zudem »Verdana«. Selbst innerhalb eines einzigen Stylesheets oder gar innerhalb einer einzigen Regel können solche Situationen auftreten. Aber wovon hängt es ab, welche Deklaration gewinnt?

Zum Seitenanfang

Reihenfolge

Um die Regeln zu bestimmen, die für ein Element angewandt werden sollen, muss sich der Browser verhalten, als arbeite er diese Reihenfolge ab:

Finde alle Deklarationen, die in diesem Ausgabemedium für das Element angewandt werden müssen.
Sortiere die Deklarationen aufsteigend nach Wichtigkeit:

zuerst die Deklarationen des Browserstylesheets, dann die der Userstylesheets, dann die des Autors, dann die des Autors mit einem !important und zuletzt die des Userstylesheets mit einem !important.

DasSchlüsselwort !important kennzeichnet eine Deklaration als wichtiger gegenüber einer vergleichbaren Deklaration ohne dieses Schlüsselwort. Die Deklaration einer zusammenfassenden Eigenschaft als !important (z. B. background: transparent none !important;) ist äquivalent zur Deklaration aller ihrer untergeordneten Eigenschaften als !important.

Sortiere alle Deklarationen nach Gewicht, entsprechend der Spezifität der zugehörigen Selektoren.

Für jeden Selektor wird ein Wert berechnet, der die Relevanz des Selektors angibt, also dessen Durchsetzungsfähigkeit, wenn Sie so wollen. Diesen Wert bezeichnet man als »Spezifität«, der sich in Zahlenwerten ausdrücken lässt. Selektoren höherer Spezifität sind wichtiger als Selektoren geringerer Spezifität, solange kein !important im Spiel ist; der Selektor mit der höchsten Spezifität »gewinnt« und überschreibt die Regeln, deren Selektoren eine niedrigere Spezifität haben. Falls Ihr Stylesheet also nicht so funktioniert, wie Sie sich das vorstellen, eine Regel also anscheinend nicht angewandt wird, ist es wahrscheinlich, dass Sie sich die Spezifität der Selektoren genauer anschauen müssen.

Die Spezifität eines Selektors besteht aus vier einzelnen Werten, die nacheinander notiert werden: A, B, C und D.

  1. A wird für CSS-Regeln auf 1 gesetzt, die durch ein Attribut style im Quelltext definiert sind, ansonsten auf 0.
  2. B ist die Anzahl der id-Attribute eines Selektors.
  3. C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudoklassen innerhalb des Selektors.
  4. D ist die Anzahl der Elementnamen und Pseudoelemente, die der Selektor beinhaltet.

Die Spezifität ergibt sich aus der Verknüpfung der vier Zahlen. In CSS 2.1 werden die Beispiele aus Tabelle 6.18 aufgeführt, die nach Spezifität aufsteigend sortiert sind:

Tabelle 6.18: Berechnung der Spezifität von Selektoren
Selektor Wertzuweisung Spezifität
* A=0 B=0 C=0 D=0 0,0,0,0
li A=0 B=0 C=0 D=1 0,0,0,1
li:first-line A=0 B=0 C=0 D=2 0,0,0,2
ul li A=0 B=0 C=0 D=2 0,0,0,2
ul ol+li A=0 B=0 C=0 D=3 0,0,0,3
h1 + *[rel=up] A=0 B=0 C=1 D=1 0,0,1,1
ul ol li.red A=0 B=0 C=1 D=3 0,0,1,3
li.red.level A=0 B=0 C=2 D=1 0,0,2,1
#x34y A=0 B=1 C=0 D=0 0,1,0,0
style="" A=1 B=0 C=0 D=0 1,0,0,0
Sortiere die Deklarationen in der vorgegebenen Reihenfolge.

Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität, erhält die jeweils zuletzt angegebene den Vorrang.

Aus der Reihenfolge ist übrigens eines abzulesen: Der Leser hat stets das letzte Wort. Manche Autoren wollen das nicht einsehen und versuchen, ihren Lesern um jeden Preis etwas aufzudrängen (Schriftgrößen oder Breitenangaben sind die Klassiker). Profis wissen, dass sie nie gegen ihre Leser arbeiten können und sollen, sondern immer nur mit ihnen. Wer CSS verwendet, hat automatisch Koautoren.

Ein abschließendes Beispiel soll die Berechnung der Spezifität noch einmal verdeutlichen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Spezifität von Selektoren</title>
    
    <style type="text/css">
      em { color: blue; }
      em.foo { color: green; }
      p em { color: red; }
    </style>
  </head>
  
  <body>
    <p>Absatz mit einem <em class="foo">betonten</em> Wort</p>
  </body>
</html>
Listing 6.4: Spezifität von Selektoren

Elemente vom Typ em sollen in blauer Schriftfarbe angezeigt werden, em-Elemente der Klasse foo in Grün, solche in Absätzen p in Rot. In welcher Schriftfarbe zeigen Browser das em-Element nun an? Wissen Sie die Antwort? Falls nicht, werfen Sie einfach einen Blick auf die Spezifität der Selektoren:

Tabelle 6.19: Der Klassenselektor hat die höhere Spezifität
Selektor Wertzuweisung Spezifität
em A=0 B=0 C=0 D=1 0,0,0,1
em.foo A=0 B=0 C=1 D=1 0,0,1,1
p em A=0 B=0 C=0 D=2 0,0,0,2

Es gewinnt folglich die zweite Regel, nicht etwa die nachfolgende, wie Sie womöglich vermutet haben. Der betonte Text erscheint in grüner Schrift.