Regine Heidorn

CSS –

Grundlagen und Best Practices

ISBN: 978-3-86802-404-3
© 2012 entwickler.press
Ein Imprint der Software & Support Media GmbH

1 Wie wird CSS vom Browser verarbeitet?

Bevor in diesem Shortcut auf die Details eingegangen wird, sollen zur Einführung die wichtigsten Begriffe definiert und die Bearbeitung geladener HTML-/CSS-Dokumente durch den Browser (User Agent) erklärt werden.

Durch die Nutzung der Vorgänge, die im Browser ohnehin stattfinden, wird es möglich, gut wartbare CSS zu erstellen oder vorhandene CSS effizienter zu bearbeiten. Gleiches gilt für die Fehlersuche und Browser-Bugs: Wenn wir verstehen, wie der Browser arbeitet, können wir entscheiden, welche Anweisung ihm hilft, das gewünschte Ergebnis zu liefern. Interessant wird es da, wo das Verhalten von Browsern von den Standards abweicht oder die Empfehlungen des W3C zu ungenau formuliert sind. Das gilt auch für ungeliebte Stiefkinder wie den Internet-Explorer.

CSS-Anweisung

Abbildung 1.1: Bestandteile einer CSS-Anweisung

Eine CSS-Anweisung besteht aus Selektor und Deklaration. Selektoren bezeichnen die HTML-Elemente mit eventuellen ID- und Klassennamen. In der Deklaration wird festgelegt, wie das ausgewählte Element vom Browser dargestellt werden soll. Die Deklaration enthält den Namen einer Eigenschaft und den ihr zugewiesenen Wert.

Schnell kann es passieren, dass einem Element mehrere Eigenschaftswerte zugewiesen werden. Ein Beispiel sich überschreibender Anweisungen sind die im Browser hinterlegten CSS, die durch die im HTML-Dokument mitgelieferten CSS überschrieben werden. Das betrifft unter anderem eine der frühesten Usability-Regeln des Netzes: den unterstrichenen Link in blauer Schriftfarbe (wie er in der Abbildung im Browser-CSS von Opera 10.51 formatiert ist). Sind die Eigenschaftswerte widersprüchlich (im Screendesign sind beispielsweise keine blauen Links vorgesehen), muss der Browser entscheiden, welche Zuweisung letztlich gewinnt.

Browserbearbeitung geladener HTML-/CSS-Dokumente

Gemäß der Spezifikation für CSS2.1 des W3C1 analysiert der Browser zuerst das HTML-Dokument und konstruiert daraus den Dokumentenbaum.2 Danach werden jedem Element Eigenschaftswerte für seine Darstellung zugewiesen.

Abbildung 1.2: Verarbeitung von CSS-Eigenschaftswerten im Browser. In diesem Fall entspricht der errechnete Wert dem angewandten und dem tatsächlichen Wert.

Diese Zuweisung wird in vier Schritten3 ermittelt:

• Festgelegter Wert (Specified Value): Wert, der durch Kaskade, Vererbung oder Initialwert (ursprünglicher Wert laut Spezifikation, zum Beispiel background-color: transparent) zugewiesen wird, und zwar in dieser Reihenfolge. Wird also weder durch Kaskade, noch durch Vererbung ein Wert zugewiesen, wird der Initialwert festgelegt.
• Errechneter Wert (Computed Value): Festgelegte Werte werden zu errechneten Werten aufgelöst, beispielsweise werden relative Angaben wie Größen in em4 zu absoluten Zahlenwerten verrechnet. Dabei muss der Browser das Dokument nicht rendern. Prinzipiell kann jedes Element alle Eigenschaften haben.5 Auch wenn manche Eigenschaften nicht gerendert werden, also die Darstellung des Elements nicht verändern, sind sie im errechneten Wert enthalten.

Profitipp: Eigenschaften, die die Darstellung eines Elements ohnehin nicht beeinflussen, sollten gar nicht erst in den CSS notiert werden. Sie können zu Verwirrung im Debugging führen, da ihre Werte möglicherweise unsichtbar an andere Elemente weitergegeben werden oder das Verhalten umgebender Elemente beeinflussen könnten. Außerdem blasen sie den Code unnötig auf. Das betrifft sowohl die Wartbarkeit als auch die Dateigröße.

• Angewandter Wert (Used Value): Der angewandte Wert wird für die Elemente errechnet, für die aufgrund von Abhängigkeiten zu übergeordneten Elementen noch kein errechneter Wert feststeht, beispielsweise wenn die Breite eines Elements in Prozent angegeben ist; der absolute Wert in Pixel kann erst errechnet werden, nachdem der absolute Wert des übergeordneten Elements feststeht. Der angewandte Wert ist quasi ein Zwischenschritt für noch nicht errechnete Werte.
• Tatsächlicher Wert (Actual Value): Es ist im Wesentlichen der angewandte Wert, der schließlich zum Rendern verwendet werden soll. Allerdings können nicht alle angewandten Werte von allen User Agents gleich interpretiert werden. Zum Beispiel können manche Browser nur mit ganzzahligen Pixelwerten umgehen.

Profitipp: Das Yahoo-Entwicklerteam hat das Problem des unterschiedlichen Schrift-Renderings in verschiedenen Browsern mit ihrem YUI-2-Framework gelöst. Es definiert Prozentzahlen für Schriftgrößen, die in allen Browsern gleich gerendert werden: http://developer.yahoo.com/yui/fonts/.

Im ersten Schritt wird also über Kaskade, Vererbung und Initialwert (in dieser Reihenfolge) festgelegt, welche Eigenschaften für ein HTML-Element gelten sollen. Diese Eigenschaften werden in den folgenden Schritten in Werte umgerechnet, aus denen das Layout finalisiert wird. Sofern es um Browser-Bugs geht, ist es bereits hilfreich, zu wissen, aus welchem dieser vier Schritte eine unerwartete Darstellung resultiert. Tatsächlich wäre es hilfreich, Browser-Bugs in Zukunft bei einem dieser Schritte beziehungsweise Bestandteile des ersten Schrittes zu verorten, um eine Orientierung in der Analyse des abweichenden Browserverhaltens zu erhalten.

Schauen wir uns nun an, wie Vererbung und Kaskade funktionieren, um verstehen zu können, wie die Festlegung auf gültige Eigenschaften erfolgt. Schließlich ist dieser erste Schritt, die Bestimmung des festgelegten Werts, die eigentliche Arena, in der die Eigenschaften um ihre Vorherrschaft kämpfen.

Der Browser: im Herzen arabisch?

Im letzten Abschnitt wurde erläutert, wie der Browser die Zusammenarbeit zwischen HTML-Dokument und CSS umsetzt. Das Ziel besteht darin, den Elementen des Dokumentenbaums eindeutige Stilanweisungen zuzuordnen, aus denen sich finale Werte errechnen lassen. Was wir noch nicht wissen, ist, wie der Browser eigentlich die CSS ausliest und auf die Elemente abgleicht.

Hier lauert der Teufel im Detail: In Abbildung 1.2 wird deutlich, dass zuerst alle Selektoren und Werte ausgelesen werden, um zu einem eindeutigen errechneten Wert zu kommen. Allerdings steht noch nicht fest, wie der Abgleich zwischen Stilanweisung und Element funktioniert, das so genannte Selector Matching. Diesen Abgleich nimmt der Browser sinistrograd, also ähnlich dem Schriftsystem arabischer oder hebräischer Schriften, von rechts nach links vor.6

Die Logik dahinter besteht darin, zuerst das bezeichnete Schlüsselelement im Selektor auszuwählen. Im zweiten Schritt folgt die Verortung im Dokumentenbaum. Das Schlüsselelement ist das Element, das durch einen Selektor letztlich bezeichnet wird und daher ganz rechts im Selektor steht.

Beispiel: header nav a { text-decoration: none; }: Im Selektor header nav a ist das bezeichnete Schlüsselelement der Linkanker a.

Wie wir im nächsten Kapitel sehen werden, spielen Klassen, IDs und die Länge des Selektors eine entscheidende Rolle, um dem Browser den Abgleich von Selektor und Element zu erleichtern und damit eine bessere Performance der Website insgesamt zu erreichen.