CSS - Best Practices und Wartbarkeit

Browser-reset (S. 71-72)

Ein HTML-Dokument ohne CSS sieht ziemlich … langweilig aus und sehr nach Internet aus den Anfangszeiten des Internet. Einer der frühesten und bekanntesten Usability-Standards lässt sich auch heute noch beobachten, wenn eine Webseite ohne CSS dargestellt wird: der unterstrichene blaue Link, der nach einem Klick als bereits besuchter Link lila wird und auch heutzutage noch in der Suchergebnisliste von Google genauso funktioniert.

Als CSS-Autoren wissen wir, warum das so ist: Ein Ankerelement in HTML wird mit a in den CSS angesprochen, dazu gibt es die Pseudoklassen :link, :visited, :focus, :hover und :active. Ergo: Selbst ohne von CSS-Autoren eingebundene Style Sheets erfolgt ein Layout von HTML-Elementen aus dem Browser. Andernfalls würden sämtliche Inhalte eines HTML-Dokuments als unformatierter Text in einer Reihe dargestellt, es würde sich noch nicht einmal der Mauszeiger ändern beim Überfahren eines Links. Auch dieses Verhalten wird durch eine Deklaration a { cursor: pointer; } im Browser vorgegeben.

Auch ohne unser Zutun als CSS-Autoren oder eingebundene CSS des Nutzers sind also CSS aktiv. In den meisten Fällen ähneln sich die CSS, die Browserhersteller in den Browsern implementieren. Es kann allerdings Abweichungen geben, die in der Anpassung einer Webseite für grösstmögliche Browserkompatibilität zum Problem werden können. Mit Browser-Reset ist in diesem Zusammenhang nicht gemeint, den Browser mit geleertem Cache neu zu starten.

Ziel ist es vielmehr, die vom Browser mitgelieferten Style Sheets durch eigene CSS so zu ersetzen, dass eine einheitliche Darstellung aller Elemente erreicht wird, und zwar, bevor die eigentlichen Layoutarbeiten beginnen. So haben wir als CSS-Autoren größtmögliche Kontrolle darüber, dass unsere CSS nicht von denen des Browsers durchkreuzt werden. Die Anweisungen des Browsers greifen immer, wenn keine CSS anderer Herkunft (vom Nutzer oder von CSS-Autoren) vorhanden sind.

Sobald wir also alle Eigenschaften der Elemente, die in den Browser-CSS gestylt werden, einmal selbst notieren, ist gewährleistet, dass keine Anweisungen mehr vom Browser übernommen werden. Wie bereits im Kapitel über die Kaskade beschrieben, tritt diese in Kraft, wenn ein Element von mehreren Zuweisungen derselben Eigenschaft betroffen ist und sortiert in einem ersten Schritt die Zuweisungen nach Herkunft aus.