(msc) Es kommt bei der Gestaltung von Webseiten immer wieder vor, dass das Resultat im Browser nicht den Vorstellungen des Designers entspricht. Die sorgfältig aufgestellten Layoutvorgaben in der Stildatei scheinen willkürlich verändert oder nur ungenügend umgesetzt.

In so einem Fall ist menschliches Versagen nicht ganz auszuschliessen und auch browserseitiges Versagen kommt vor. Mit anderen Worten: Der Fehler könnte in der Stildatei liegen oder am Browser, der die Angaben im CSS nicht korrekt umsetzt. Häufig liegt das Problem aber in den Tücken der Kaskade.

Die Kaskade bestimmt, wie der Browser aus unterschiedlichen Formatierungsvorschriften die endgültige Darstellung ermittelt. Das Verfahren ist einigermassen komplex; aber gerade deswegen sollten Webdesigner eine Ahnung von diesem Mechanismus haben. Das Verständnis hilft, Fehlern in den Stildateien auf die Schliche zu kommen und zweckmässige CSS-Deklarationen zu entwickeln.

Die Ausgangslage ist die: Jedesmal, wenn eine Webseite zur Anzeige gelangt, muss der Browser eine Reihe von Stilvorgaben berücksichtigen. Auch bei simpel formatierten HTML-Seiten nehmen drei bis vier Stildateien Einfluss auf das Aussehen: Das Browserstyle­sheet bestimmt das Aussehen «nackter» HTML-Seiten, d.h. von Webseiten ohne verknüpfte CSS-Datei. Es legt die Schriftgrössen der Überschriften fest und definiert die Einrückung von Aufzählungen, Listen und Ähnliches.

Manche Surfer haben auf ihrem Browser eine eigene Stildatei eingerichtet. Dieses Benutzerstyle­sheet sorgt beispielsweise über grössere Schriften für eine bessere Lesbarkeit der Texte. Das Autorenstylesheet ist dasjenige, das der Webdesigner mit der HTML-Seite verknüpft hat – es bestimmt den individuellen Look einer Seite.

Als erstes berücksichtigt der Browser die Herkunft einer Regel und zwar nach folgender Priorität:

1. Benutzerstylesheet mit !important
2. Autorstylesheet mit !important
3. Autorstylesheet
4. Benutzerstylesheet
5. Browserstylesheet

Nun kann es sein, dass die Formatierungsvorgaben in ein und derselben CSS-Datei miteinander konkurrieren – das kommt sogar recht häufig vor, wenn man mit Absatz- und Inline-Stilen arbeitet und Selektoren verwendet. Die Website Css4you.de zeigt dazu ein einleuchtendes Beispiel (http://css4you.de/wscss/css06.html):

Eine HTML-Datei enthält den folgenden Code:

<p>Ein Absatz mit p\ nun in einem span-Tag<span class=»em»>und jetzt sogar mit class-Selektor <span id=»id»>gefolgt von einem ID-Selektor</span></span></span></p>

Formatiert wird es über folgende Stilangaben:

span {color: blue;}
p {color: black;}
p span {color: green;}
span.em {color: yellow;}
#id {color: red;}

Das Resultat ist das folgende:

Ein Absatz mit p nun in einem span-Tag und jetzt sogar mit class-Selektor gefolgt von einem ID-Selektor

Man sieht: Der ID-Selektor hat Vorrang vor allen anderen Deklarationen. An zweiter Stelle der Hackordnung ist der Inline-Stil mit Klasse em, danach folgt der verschachtelte Selektor p span, der die Formatierungsangaben für Inline-Formatierungen vorgibt, die innerhalb von <p>-Elementen erscheinen. Der Browser bestimmt diese Reihenfolge anhand der Spezifität, die wie folgt berechnet wird.

Je höher dieser Wert, desto spezifischer – und wichtiger – ist eine Formatierungsanweisung. Wenn zwei Werte mit gleicher Spezifität aufeinander treffen, gewinnt die, die weiter unten in der Stildatei steht.