Websiteentwicklung: CSS: Kaskadierung, Spezifität und Vererbung

Da die CSS-Anweisungen, die für ein Element gelten, aus verschiedenen Ressourcen stammen können und aufgrund verschiedener Selektoren zutreffen können, legt CSS genau fest, welche Anweisungen letztlich für die Präsentation eines Elementes wirksam werden, wenn mehrere zutreffen.

Auch hinsichtlich der für die Präsentation verwendeten Werte kann es Abweichungen zu den Angaben des Autors geben, zum Beispiel, wenn zur angegebenen Schriftgröße kein passender Schriftsatz verfügbar ist, oder wenn es aufgrund von Anzeigekonflikten notwendig ist, Angaben des Autors zu ignorieren oder zu korrigieren, um den Inhalt überhaupt präsentieren zu können.

Von den angegebenen zu den tatsächlichen Werten

Bevor Stilvorlagen auf ein Element im Dokument angewendet werden, muss das Darstellungsprogramm analysieren, welche Eigenschaften mit welchen Werten verwendet werden. Ist für eine Eigenschaft ein Wert angegeben (englisch: specified value), so wird dieser verwendet. Sonst wird der Wert vom Elternelement geerbt (englisch: inherited value), sofern für die Eigenschaft spezifiziert ist, dass sie vom Elternelement vererbt wird. Ansonsten gibt es zu jeder Eigenschaft einen Anfangswert, welcher in der Spezifikation festgelegt ist, der wirksam wird (englisch: initial value).

Vor der Darstellung werden die so ermittelten Werte eine Eigenschaft allerdings in berechnete Werte umgerechnet (englisch: computed value), das sind dann Werte in Einheiten, mit denen das Darstellungsprogramm eine Präsentation realisieren kann - bei der Darstellung auf einem Monitor müssen etwa alle Längeneinheiten (insbesondere relative Angaben) in Pixel des Monitors umgerechnet werden.

Insbesondere bei Prozentangaben und vergleichbaren relativen Größen kann die absolute Größe manchmal allerdings erst bestimmt werden, wenn die Vergleichsgröße des Elternelementes absolut festliegt. Das Ergebnis dieser Umrechnung wird in CSS dann auch der verwendete Wert genannt (englisch: used value).

Die so bestimmten Werte können immer noch Probleme bei der Darstellung bereiten, etwa wenn zur so ermittelten Größe kein passender Schriftsatz vorliegt oder wenn für die Größe eines Elementes kein ganzzahliger Pixelwert berechnet wurde oder wenn eine Farbangabe auf einen Wert gerundet werden muß, der auf dem Monitor darstellbar ist. Das Darstellungsprogramm muss dann folglich runden oder nähern, um zu einer Präsentation zu gelangen. Der dafür verwendete Wert ist der tatsächliche Wert (englisch: actual value).

Somit ist für den Autor der Stilvorlage von vorne herein ziemlich klar, dass die von ihm angegebenen Werte nicht zwangsläufig exakt die sind, die bei der Präsentation verwendet werden. Entsprechend tolerant gegenüber Abweichungen und Unwägbarkeiten sind dann die Stilvorlagen auszulegen, damit sie bei verschiedenen Darstellungsprogrammen und verschiedenen Endgeräten eine sinnvolle Präsentation des Inhaltes ergeben.

Vererbung

Wie bereits erwähnt, können Eigenschaftswerte vom Elternelement auf das Kindelement vererbt werden. Dies erfolgt automatisch, wenn in der CSS-Spezifikation für die Eigenschaft bereits angegeben ist, dass sie vererbt wird und mit keinem Selektor eine direkte Angabe vorliegt. Allerdings kann der Eigenschaft in einer Stilvorlage auch der Wert 'inherit' zugewiesen werden, damit der Eigenschaftswert vom Elternelement geerbt wird. Dies trifft dann auch auf Eigenschaften zu, die sonst nicht automatisch vererbt werden.

Vererbt wird immer der berechnete Wert.

Die Kaskade

Ressourcen der Kaskade

Wie bereits angesprochen können CSS-Anweisungen aus verschiedenen Ressourcen stammen. Die Anweisungen stammen auch nicht zwangsläufig immer vom Autor, welcher die Stilvorlage erstellt.

Insbesondere kommen anwendbare Stilvorlagen vom Darstellungsprogramm und gegebenenfalls vom Nutzer des Dokumentes und gegebenenfalls auch vom Autor.

Das Darstellungsprogramm hat für bekannte Dateiformate eine Stilvorlage, die eine Präsentation eine Dokumentes erlauben, ohne dass der Autor oder Nutzer Vorgaben machen müßte. Diese Stilvorlage ist bereits so ausgereift, dass sinnvoller Inhalt damit bereits gut aufbereitet, zugänglich und lesbar ist. Andere Stilvorlagen müssen dies also gegebenenfalls überschreiben, um einen Effekt auf die Präsentation zu haben. Das birgt allerdings auch das Risiko, die Zugänglichkeit und Lesbarkeit der Inhalte für einige oder alle Nutzer zu verschlechtern. Wer Stilvorlagen verwendet, bekommt damit also nicht nur reichhaltige Möglichkeiten, Inhalte nach eigenem Ermessen zu dekorieren, sondern übernimmt damit auch die Verantwortung, dass der Inhalt weiterhin zugänglich und lesbar bleibt.

Für bekannte Formate wie (X)HTML oder SVG gibt es in den Spezifikationen Empfehlungen, wie die von einem Darstellungsprogramm zu verwendende voreingestellte Stilvorlage aussehen kann. In den SVG-Spezifikationen gibt es sogar für einige wenige Eigenschaften Vorgaben, mit welchen effektiv die Anfangswerte aus der CSS-Spezifikation überschrieben werden, weil dies für SVG-Dokumente als Ausgangswerte sinnvoller ist.

Nutzer von Darstellungsprogrammen und Dokumenten können eigene Stilvorlagen bereitstellen oder am Darstellungsprogramm Einstellungen vornehmen, die einer eigenen Stilvorlage gleichkommen. Dies hat primär den Zweck, dass der Nutzer eine komfortable Möglichkeit hat, die Präsentation für seine eigenen (persönlichen oder technischen) Möglichkeiten zu optimieren. Typisch kann der Nutzer etwa die minimale und normale Schriftgröße festlegen, um für seine Sehfähigkeit und die Auflösung seines Monitors eine optimale Lesbarkeit von Texten zu bekommen und zu verhindern, dass durch ungeeignete Angaben durch den Autor die Schriftgröße so klein wird, dass Texte nicht mehr lesbar sind.

Die Angaben aus diesen drei Quellen haben unterschiedliches Gewicht. Geringstes Gewicht hat die voreingestellte Stilvorlage des Darstellungsprogrammes. Der Nutzer kann diese mit eigenen Angaben überschreiben, die also ein höheres Gewicht haben und im Konfliktfalle also statt der voreingestellten Werte verwendet werden. Die Stilvorlagen des Autors haben wiederum ein höheres Gewicht als die des Nutzers, überschreiben diese also im Konfliktfalle.

Weil bei dieser Gewichtung Angaben des Autors die optimalen Einstellungen des Nutzers zunichte machen können, gibt es allerdings eine Sonderregel: Setzt der Nutzer hinter seine Anweisungen ein '!important' (siehe Abschnitt unten), hat dies mehr Gewicht als die Angabe des Autors. Generell werden etwa auch Einstellungen zur minimalen Schriftgröße so gehandhabt, als habe der Nutzer diese Sonderregel verwendet. Damit kann dann komfortabel vom Nutzer gewährleistet werden, dass Texte immer lesbar bleiben, ohne sich in CSS einarbeiten zu müssen. Bei den meisten anderen Eigenschaften ist es allerdings notwendig, dass der Nutzer explizit dem Darstellungsprogramm eine Stilvorlage mit Verwendung der Regel '!important' verfügbar macht, um weitergehende Optimierungen mit höherem Gewicht als die der Stilvorlage des Autors auch wirklich durchzusetzen.

Für Autoren heißt das andererseits, dass sie vermeiden sollten, Angaben zu machen, die zu einer starken Abweichung von den optimalen Einstellungen des Nutzers führen, insbesondere bei der Schriftgröße, weil es für den Nutzer erhöhten Aufwand bedeutet, die optimale Lesbarkeit wieder herzustellen.

Kaskadenreihenfolge

Das Darstellungsprogramm muß also alle Anweisungen zu einem Element in eine definierte Reihenfolge bringen, um zu beurteilen, welche Werte letztlich für die Präsentation wirksam werden.

Zunächst werden dazu alle Anweisungen zusammengesucht, die für eine Eigenschaft eines Elementes zutreffen. Die Sammlung erfolgt natürlich für jeden Medientyp getrennt, beziehungsweise nur für den, für welchen eine Präsentation erfolgen soll, andere sind belanglos.

Dann werden alle gefundenen Anweisungen sortiert, von niedrigem zu hohem Gewicht:

Angaben des Darstellungsprogrammes
Normale Angaben des Nutzers
Normale Angaben des Autors
Angaben des Autors mit '!important'
Angaben des Nutzers mit '!important'

Als letzte Möglichkeit oder letzten Ausweg bei Problemen muß das Darstellungsprogramm dem Nutzer immer die Möglichkeit geben, die Stilvorlagen des Autors komplett abzuschalten, es werden dann also nur die des Nutzers und die des Darstellungsprogrammes wirksam. Da beides zusammen nach Voraussetzung immer eine zugängliche Präsentation von sinnvoll strukturiertem Inhalt gewährleistet, hat so der Nutzer immer eine Möglichkeit, Probleme, Fehler und Mängel der Stilvorlage des Autors durch Abschalten zu kompensieren. Daraus folgt für den Autor, dass er die Inhalte immer so strukturieren muß, dass sie auch oder insbesondere ohne seine Stilvorlagen zugänglich und lesbar sind. Damit reduziert sich dann für den Autor auch das Risiko, dass Inhalte aufgrund mangelhafter Stilvorlagen oder auch einer mangelhaften Interpretation der Stilvorlagen durch das Darstellungsprogramm unzugänglich werden.

Nun kann es bei gleicher Quelle oder Herkunft (Darstellungsprogramm, Nutzer, Autor) mehrere zutreffende Angaben geben. Diese werden gemäß Spezifität sortiert (siehe Abschnitt weiter unten).

Die Angabe aus einer Quelle mit höherem Gewicht hat Vorrang. Stammen die Angaben aus derselben Quelle, so hat Vorrang, was die höhere Spezifität hat. Haben zwei Angaben die gleiche Spezifität, hat jene Vorrang, die später im Quelltext auftritt. Dabei werden externe und importierte Stilvorlagen gemäß der Reihenfolge ihrer Referenzierung eingeordnet. Sie werden zudem vor den internen Stilvorlagen eingeordnet, welche also direkt im Dokument stehen.

Die Kaskade kann also recht komplex werden. Um insbesondere zu überschauen, was im eigenen Verantwortungsbereich liegt und was aus Angaben aus anderen Quellen resultiert, sollten Autoren und Nutzer also erstmal eher einfache Strukturen mit exakt einer Quelle anstreben. Dies hilft auch einstweilen beim Erlernen von CSS. Später kann es sich aber in der Praxis besonders für Autoren als hilfreich erweisen, verschiedene Teile von Stilvorlagen zu strukturieren, indem sie auf verschiedene externe Dokumente verteilt werden. Über die Reihenfolge der Referenzierung kann dann leicht festgelegt werden, welche spezielleren Angabe zuvor notierte einfachere Angaben überschreiben sollen.

Die Regel '!important'

Wie bereits beschrieben erlaubt es die Regel '!important', eine CSS-Anweisung stärker zu gewichten. Sie kann vom Autor und vom Nutzer verwendet werden. Die Einordnung der Gewichtung ist bereits im vorherigen Abschnitt beschrieben worden.

Beispiel zur Verwendung:

p {font-size: 15px !important}

In der Stilvorlage des Autors notiert, hat dies ein höheres Gewicht als die sonstigen Angaben in der Autorenstilvorlage, den normalen Angaben in der Stilvorlage des Nutzers oder der des Darstellungsprogrammes. Da Pixel als Einheit für die Schriftgröße für Autoren-Stilvorlagen ungeeignet ist, würde obige Anweisung einer absichtlichen 'Pessimierung' der Präsentation für den Nutzer gleichkommen. Generell sollte beim Autor der Verdacht aufkommen, dass seine Stilvorlagen schlecht strukturiert sind oder das zu dekorierende Dokumente zu wenige Klassen und Fragmentidentifizierer aufweist, wenn der dringende Bedarf besteht, die Regel '!important' zu verwenden. Meistens ist es also deutlich sinnvoller, die Struktur des Dokumentes oder die Stilvorlage zu überdenken, statt diese Regel zu verwenden.

In einer Stilvorlage des Nutzers notiert, hat die Angabe allerdings eine wichtige Funktion und ein höheres Gewicht als sämtliche anderen Angaben, also insbesondere auch die des Autors. Bei dem Beispiel kann der Nutzer also durchsetzen, dass die Schriftgröße in Absätzen immer 15px groß ist. Während der Autor px und ähnliche absolute Größen für die Schrift vermeiden sollte, kann der Nutzer den Sinngehalt ja direkt prüfen, von daher ist das eine für ihn geeignete Angabe, da er sie jederzeit an seine Sehgewohnheiten und seine Ausgabegeräte anpassen kann.

Hinsichtlich der Beurteilung des Verhaltens sehr alter Darstellungsprogramme ist noch zu beachten, dass die hier erklärte Regelung ab CSS 2.0 gilt. Bei CSS 1.0 hatte noch die Regel '!important' des Autors Vorrang vor der des Nutzers. Allerdings hat CSS keine Versionskennung, es kann also nicht direkt bestimmt werden, welcher Version eine Stilvorlage folgt. In der Praxis sollte es allerdings genügen, wenn Nutzer technisch aktuelle Darstellungsprogramme nutzen, um ihr höheres Gewicht auch praktisch durchzusetzen.

Die Spezifität

Die Spezifität ist zu berechnen, wenn aus derselben Quelle, etwa vom Autor, mehrere Angaben zu einer Eigenschaft eines Elementes kommen.

Die Spezifität eines Selektors ergibt sich dabei aus mehreren Summen. Es werden dazu die Summen a, b, c, d wie folgt gebildet:

a ist 1, falls sich die Anweisung direkt im Attribut style befindet, sonst 0.
b ist die Anzahl aller id-Attribute (Fragmentidentifizierer) in einem Selektor
c ist die Anzahl aller sonstigen Attribute und Pseudo-Klassen in einem Selektor
d ist die Anzahl aller Elementnamen in einem Selektor

Ist a = 1, so hat die Anweisung direkt im Attribut style die höchste Spezifität.
Ist a = 0, wird b betrachtet. Die Anweisung mit dem größten Wert für b hat die höchste Spezifität.
Ist auch b = 0, so wird c betrachtet. Die Anweisung mit dem größten Wert für c hat die höchste Spezifität.
Ist auch c = 0, so wird d betrachtet. Die Anweisung mit dem größten Wert für d hat die höchste Spezifität.

Zu beachten ist insbesondere bei Fragmentidentifizierern, dass es auf den genaue Notation ankommt. '[id=menue]' zählt als normales Attribut zur Summe c, während '#menue' als Fragmentidentifizierer zur Summe b zählt.

Die spezielle Notation für eine Klasse '.tip' ist gleichrangig mit der Angabe eines Attributes '[class~=tip]'.

Auch hier ist ein Versionsproblem zu beachten, diesmal zwischen CSS 2.0 und CSS 2.1. In CSS 2.0 wird der Wert von a zu b gezählt, bevor die Spezifität ermittelt wird. In CSS 2.0 ist es also deutlich einfacher, eine Angabe im Attribut style zu überschreiben als in CSS 2.1, wo das praktisch komplett ausgeschlossen ist.

Ferner tragen in CSS 2.0 Pseudo-Elemente mit 0 zur Summe bei, werden also ignoriert.

Neuere Darstellungsprogramme werden eher die hier erläuterten Regeln für CSS 2.1 wählen. Da CSS aber keine Versionskennung hat, ist das Verhalten strenggenommen undefiniert, wenn man mit den Regeln von CSS 2.1 und CSS 2.0 zu einem unterschiedlichen Ergebnis kommt. Ist dies der Fall, sollte man versuchen, durch eine Umformulierung des Selektors ein eindeutiges Ergebnis zu erhalten.

Präsentationsattribute

Im Dokument können auch Präsentationsattribute notiert sein, dies sind Attribute, die äquivalent zu CSS-Eigenschaften sind. Während es davon in (X)HTML nur noch wenige gibt, sind diese etwa in SVG von zentraler Bedeutung. Präsentationsattribute können die Lesbarkeit und Zugänglichkeit von Dokumenten deutlich verbessern, jedenfalls in Bezug auf (X)HTML jene, die nicht bereits in den strikten Versionen oder in XHTML1.1 gestrichen wurden. Bei SVG gibt es auch Profile und konforme Darstellungsprogramme, die keine Stilvorlagen per CSS erlauben, beziehungsweise diese ignorieren, daher ist bei SVG der Einsatz von Präsentationsattributen dringend geboten, damit der Inhalt auch ohne optionale Stilvorlagen einen Sinn ergibt (sonst sind in SVG die meisten Strukturen entweder schwarz oder unsichtbar). Bei einem Graphikformat wie SVG ist es meistens eine Entscheidung des Autors, was inhaltlich relevant ist und was nur Dekoration. Bei (X)HTML beschränkt sich dies meist hingegen auf die bessere Lesbarkeit von Tabellen oder die Größe von eingebundenen Graphiken.

Somit kann es also sinnvoll sein, neben der Basisversion eines Dokumentes mit Präsentationsattributen zusätzliche Stilvorlagen anzubieten, was dann zur Folge hat, dass festgelegt sein muß, welche Spezifität solche Präsentationsattribute in der CSS-Kaskade haben.

Dazu wird festgelegt, dass Präsentationsattribute so behandelt werden, als würden sie ganz vorne, noch vor den externen und importierten Stilvorlagen in der Kaskade stehen. Dabei wird ihre Spezifität in allen Summen als 0 angesetzt (In CSS 1.0 allerdings auf d = 1). So ergibt sich für ein Präsentationsattribut immer die niedrigstmögliche Spezifität, sie ist also leicht durch Angaben in Stilvorlagen zu überschreiben.

Formal ist diese Regelung in CSS für (X)HTML und in SVG festgelegt. Bei anderen Formaten muß eigentlich explizit in der Spezifikation angegeben werden, welche Attribute Präsentationsattribute sind und zu welchen CSS-Eigenschaften sie äquivalent sind.

Eine Komplikation tritt bei deklarativer Animation (SMIL, SVG) auf, weil dort sowohl Präsentationsattribute als auch CSS-Eigenschaften animiert, also auch geändert werden können. Formal gilt auch für die animierten Attribute oder Eigenschaften die gleiche Einordnung hinsichtlich der Kaskade und Spezifität. Animationen insbesondere in SVG gehören allerdings zum Inhalt, sind also nicht dekorativ, wie Stilvorlagen. Stilvorlagen werden also animierte Attribute überschreiben und damit die Animation unsichtbar machen. Werden hingegen die Eigenschaften animiert, so erhalten die animierten Eigenschaften eine hohe Priorität gegenüber den Stilvorlagen, überschreiben also sämtliche Angaben in den Stilvorlagen, einmal abgesehen von den Angaben des Nutzers, welcher die Regel '!important' verwendet. Zu unterscheiden ist die Situation wiederum von den Arbeitsentwürfen für CSS-Animationen und CSS-Übergänge, wo die Animation also in der Stilvorlage immer als rein dekorativ und inhaltlich nicht relevant verwendet wird. Wie dies zu einer deklarativen Animation mit SMIL oder SVG zu gewichten ist, ist noch im Arbeitsentwurf festzulegen. Um Konflikte auszuschließen, sollten Autoren es bis auf Weiteres vermeiden, dass die beiden Animationstypen aufeinandertreffen, also dieselbe Eigenschaft animieren.

Zurück zu Syntax |

Hoch zu CSS |

Vor zu numerische Angaben