Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Die Kaskade: !important, Spezifität und Reihenfolge im CSS – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

Die Kaskade: !important, Spezifität und Reihenfolge im CSS

“

In diesem Kapitel erfahren Sie, was es mit der namensgebenden Kaskade, der Cascading Stylesheets, auf sich hat und welche Rolle Vererbung und Standardwert dabei spielen. Das Kapitel ist eher theoretischer Natur und Sie können es gerne erst einmal überspringen, aber falls Sie in Ihren Stylesheets vor scheinbar unlösbaren Phänomenen stehen, kommen Sie zurück, schauen Sie es sich in Ruhe an, es ist die Antwort auf viele Rätsel. Bevor wir uns die Kaskade anschauen, geht es erst einmal darum: Was muss ein Browser beim CSS eigentlich machen? Und er muss zum Gestalten einer Webseite für jedes HTML-Element im DOM-Baum, und das können ganz schön viele sein, für jede CSS-Eigenschaft, und das sind ganz schön viele, genau einen einzigen Wert finden. Damit man sich das ein bisschen besser vorstellen kann, ist hier ein ganz simples Dokument und ich öffne mal das Developer-Tool, also jedes HTML-Element im Baum, das ist hier links, das sind hier nicht so viele, und für jedes Element muss er für jede Eigenschaft einen Wert finden. Und das sind beileibe nicht alle, es gibt hier im Chrome in den Entwicklertools bei Computed den schönen Button »Show all« und jetzt sieht man hier, das sind doch eine ganze Menge CSS-Eigenschaften. Und für jedes Element links im Baum muss der Browser für jede CSS-Eigenschaft, die Sie hier in der Liste sehen, einen Wert finden und da hat er ganz schön zu tun. Das ist also die Aufgabe des Browsers und helfen tun ihm dabei drei Konzepte namens Kaskade, Vererbung und Standardwert. Los geht es jetzt mit der Kaskade. Wenn ein Browser eine Webseite gestalten soll, dann sammelt er zunächst für jede CSS-Eigenschaft alle relevanten Anweisungen, die er irgendwo findet, und schreibt sie auf einen metaphorischen Zettel. Wenn es für eine Eigenschaft mehrere passende Anweisungen gibt, dann macht er die folgenden drei Schritte: Zuerst schaut er, ob eine der Anweisungen den Zusatz !important hat. Die gilt als wichtig und gewinnt. Wenn es keine gibt, die diesen Zusatz haben, oder wenn es mehrere gibt, die diesen Zusatz haben, dann geht es weiter zu Schritt 2, dann schaut er nach der Spezifität und der Selektor mit den meisten Punkten gewinnt. Auch hier gilt, wenn es mehrere gibt, dann geht es weiter zu Schritt 3, dann zählt die Reihenfolge im CSS. Da kann es kein Unentschieden geben, denn die stehen immer in irgendeiner Form hintereinander und der Browser nimmt den Wert aus der zuletzt notierten Anweisung. Ziel dieser Kaskade ist es also wie gesagt, eine Anweisung zu finden für eine CSS-Eigenschaft und die wird der Browser dann anwenden.

Inhalt