Cascading Stylesheets

Obwohl CSS in einzelnen Regeln einfach ist, zeigen Änderungen von CSS-Stilen nicht immer die gewünschte Wirkung. Meist liegt dann eine weitere CSS-Regel für dasselbe Element an anderer Stelle – z.B. im style-Element im Head der HTML-Datei.

Da legen wir die Schriftgröße in einer CSS-Regel für das body-Element in der CSS-Datei fest, setzen aber für p-Elemente font-size auf einen spezifischen Wert und ändern anschließend die Schriftgröße für p-Elemente einer CSS-Klasse. Je spezifischer die Regel, desto stärker setzt sie sich durch.

Das läßt sich noch gut nachvollziehen, denn bei CSS-Regeln heißt die Devise

» Wer zuletzt kommt, der gewinnt.«

CSS-Regeln können aus fünf Quellen kommen:

p { font-size: 16px; }

vom Browser, der eigene Stile mitbringt, wenn keine CSS-Regeln für das Element definiert sind (z.B. Schriftgröße, Farbe und margin für p-Elemente)

p { font-size: 86%; }

aus einer externen CSS-Datei

<style>p { font-size: 86%; }</style>

von CSS-Regeln im style-Tag der Webseite

<p style="font-size: larger;">

aus dem style-Attribut eines HTML-Tags (CSS Inline)

body { zoom: 90%; }

aus dem Stylesheet des Besuchers, wenn der Browser das Laden eines eigenen Stylesheets erlaubt.

Zu guter Letzt kommt dann Javascript und setzt ein style-Attribut, ändert ein vorhandenes oder fügt noch eine Klasse hinzu. Wenn da etwas schief läuft, ist detektivische Feinarbeit angebracht.

CSS Cascading and Inheritance Level 3

CSS-Konflikte lösen

Wenn CSS-Stile in Konflikt geraten, weil sie extern in der CSS-Datei, im style-Tag, in einer inline-Regel und im Stylesheet des Benutzers unterschiedlich deklariert sind, löst die Kaskade den Konflikt. Die Regel, die dem Element am nächsten liegt, hat die höhere Priorität.

CSS Cascade: Überschreiben von CSS-Eigenschaften

Eine CSS-Eigenschaft überschreibt die vom Browser vorgegebene Eigenschaft.
Führen CSS-Stile zu Konflikten innerhalb des globalen Stylesheets, übertrumpft die Regel, die zuletzt im globalen Stylesheet aufgeführt wird.
Eine genauer definierte Stylesheet-Regel überschreibt eine weniger genau deklarierte Regel.
```
.post h4 { color: teal; }
h4 { color: darkorange; }
```
Ein style-Attribut im HTML-Tag überschreibt eine Eigenschaft aus einer globalen Regel im style-Element des HTML-Dokuments oder aus einer CSS-Datei. Das style-Attribut im HTML-Tag wirkt also wie eine Regel, die im globalen Stylesheet zuletzt aufgeführt wurde.
```
<style type="text/css" title="text/css" media="screen">
   h4 { color: teal; }
</style>
…
<body>
   …
   <h4 style="color: darkorange;"> … </h4>
   …
</body>
```
Ein CSS-Stil aus dem Stylesheet des Besuchers überschreibt die CSS-Stile des Webdesigners.

Spezifität: Fiese kleine CSS-Fallen

Wenn in der HTML-Datei ein style-Element vor dem Link zu einer externen CSS-Datei liegt, siegt natürlich die Regel aus der CSS-Datei, da sie nach dem style-Tag geladen wird.

Auch bei zwei Regeln für ein Element innerhalb einer CSS-Datei gilt: Der Letzte macht die Regel. Aber nicht immer …

p { font-size: 0.9em; } /** Aus der CSS-Datei **/
…
…
p { font-size: 0.82em; } /** Aus dem style-Element im head der Seite **/

Die Spezifizität der CSS-Deklarationen ist eine weitere Falle:

ul.menu li.active { color: blue; } /** Gewinnt **/
li.active { color: red; }          /** Verliert, da geringere Spezifität **/

Auch wenn li.active im CSS erst nach ul.menu li.active steht, wird die Regel li.active {} keine Wirkung zeigen, weil ul.menu li.active genauer spezifiziert ist. Wer am CSS für WordPress arbeitet, weiß ein Lied davon zu singen, denn das CSS für Gutenberg arbeitet mit einer hohen Spezifität.

.entry .entry-content .has-dark-gray-color {
	color: #111;
}

Um diese Regel zu überschreiben, muss sie mindestens dieselbe Spezifität aufweisen.

CSS !IMPORTANT-Regel

Diese Regeln können wiederum vom Autor durch das Schlüsselwort !IMPORTANT außer Kraft gesetzt werden.

li { margin: 0 !IMPORTANT; }
…
.featured li { margin: 4px 0; }

Am Ende hat der Besucher wieder die Oberhand, denn er kann auch wieder eine !important-Regel in sein persönliches Stylesheet legen.

CSS revert und unset

Beim Anpassen von Themes für WordPress oder andere Content Management Systeme liegen die CSS-Dateien in ganzen Stapeln übereinander und für ein individuelles Themes werden Stile überschrieben.

revert und unset setzen Stile zurück auf die Standard-Browser-Darstellung (revert) oder nehmen einen Stil komplet weg.

H1: revert oder unset?

color:revert und color:unset haben dieselbe Wirkung: Die Browser setzen Schwarz als Standardfarbe bei Text. font-size:revert setzt die Schriftgröße auf den Standardwert der Browser, font-size:unset auf die Standard-Schriftgröße überhaupt: 1em.

revert ist eine relativ junge Eigenschaft, wird aber von allen immergrünen Browsern unterstützt (nicht IE);

Neben CSS revert und unset gibt es noch die Werte inherit und initial, um CSS-Eigenschaften zurückzusetzen (CSS reset).

CSS in der Browser-Konsole untersuchen

Wer Javascript programmiert kennt die Browser-Konsole, die sich mit einem Rechtsklick und Element untersuchen oder Element-Informationen unter oder neben dem Dokument öffnet.

Hier zeigen die Browser, welche CSS-Stile auf jedes einzelne Element wirken.

Wenn die CSS-Regeln aus einem halben Dutzend CSS-Dateien stammen, die Eigenschaften eines Elements immer wieder überschreiben (klassischer Fall von Content Management System wie WordPress), oder Eigenschaften bei bestimmten Breakpoints prüfen wollen, hilft Javascript mit getComputedStyle.

const elem = document.querySelectorAll ("h2")[0];
const allStyles  = window.getComputedStyle (elem);
	
document.querySelector("#h2Styles").textContent =
`font-size ${allStyles.getPropertyValue("font-size")}`;