The CSS Podcast – 004: The Cascade
CSS steht für Cascading Stylesheets. Die Kaskadenfunktion ist der Algorithmus zur Lösung von Konflikten, bei denen mehrere CSS-Regeln für ein HTML-Element gelten. Dies ist der Grund dafür, dass der Text der Schaltfläche mit dem folgenden CSS-Code blau ist.
button {
color: red;
}
button {
color: blue;
}
Der Kaskadenalgorithmus hilft Ihnen zu verstehen, wie der Browser solche Konflikte löst. Der Kaskadenalgorithmus gliedert sich in vier verschiedene Phasen.
- Position und Reihenfolge der Darstellung: die Reihenfolge, in der Ihre CSS-Regeln angezeigt werden
- Spezifität: ein Algorithmus, der bestimmt, welcher CSS-Selektor die stärkste Übereinstimmung hat
- Ursprung: die Reihenfolge, in der CSS angezeigt wird und woher es stammt, z. B. ein Browserdesign, CSS aus einer Browsererweiterung oder Ihr selbst erstelltes CSS
- Wichtigkeit: Einige CSS-Regeln werden stärker gewichtet als andere, insbesondere beim Regeltyp
!important.
Position und Reihenfolge des Erscheinens
Die Reihenfolge, in der Ihre CSS-Regeln angezeigt werden und wie sie erscheinen, wird bei der Berechnung der Konfliktlösung berücksichtigt.
Die Demo direkt zu Beginn dieser Lektion ist das einfachste Beispiel für eine Position. Es gibt zwei Regeln mit identischen Selektoren. Die letzte zu deklarierende Regel hat also gewonnen.
Stile können aus verschiedenen Quellen auf einer HTML-Seite stammen, z. B. aus einem <link>-Tag, einem eingebetteten <style>-Tag und Inline-CSS, wie im style-Attribut eines Elements definiert.
Wenn du ein <link> hast, das CSS ganz oben auf deiner HTML-Seite enthält, dann ein weiteres <link> mit CSS am Ende der Seite: Die untere <link> hat die größte Spezifität.
Dasselbe passiert auch mit eingebetteten <style>-Elementen.
Je weiter sie sich auf der Seite befinden, desto spezifischer werden sie.
<link />-Element enthalten ist.
Eine CSS-Regel, durch die sie als dunkel festgelegt wird, befindet sich in einem zweiten verknüpften Stylesheet und wird aufgrund ihrer späteren Position angewendet.Diese Reihenfolge gilt auch für eingebettete <style>-Elemente.
Wenn sie vor einem <link> deklariert werden, ist der CSS-Code des verknüpften Stylesheets am spezifischsten.
<style> wird in der Datei <head> deklariert, das Element <link /> in der Datei <body>.
Das bedeutet, dass es spezifischer wird als das Element <style>.Ein Inline-style-Attribut, in dem CSS deklariert ist, überschreibt jeden anderen CSS-Code unabhängig von seiner Position, es sei denn, in einer Deklaration ist !important definiert.
Die Position gilt auch in der Reihenfolge Ihrer CSS-Regel.
In diesem Beispiel hat das Element einen violetten Hintergrund, da background: purple als Letztes deklariert wurde.
Da der grüne Hintergrund vor dem lila Hintergrund deklariert wurde, wird er jetzt vom Browser ignoriert.
.my-element {
background: green;
background: purple;
}
Die Möglichkeit, zwei Werte für dieselbe Eigenschaft anzugeben, kann eine einfache Möglichkeit sein, Fallbacks für Browser zu erstellen, die einen bestimmten Wert nicht unterstützen.
Im nächsten Beispiel wird font-size zweimal deklariert.
Wenn clamp() im Browser unterstützt wird, wird die vorherige font-size-Deklaration verworfen.
Wenn clamp() vom Browser nicht unterstützt wird, wird die ursprüngliche Deklaration berücksichtigt und die Schriftgröße beträgt 1, 5 rem.
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über die Kaskade
Wenn Ihre Seite folgenden HTML-Code enthält:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<button>I am a button</button>
<style>
button {
background: pink;
}
</style>
</body>
</html>
Innerhalb von styles.css befindet sich die folgende CSS-Regel:
button {
background: yellow;
}
Welche Farbe hat der Hintergrund der Schaltfläche?
<style> befindet sich auf der Seite weiter unten als das <link>-Tag. Obwohl button dieselbe Spezifität hat, ist die Position der Stilregel vorzuziehen.
Spezifität
Spezifität ist ein Algorithmus, der bestimmt, welcher CSS-Selektor am spezifischsten ist. Hierfür wird ein Gewichtungs- oder Bewertungssystem verwendet. Wenn Sie eine Regel spezifischer gestalten, wird sie auch dann angewendet, wenn ein anderer CSS-Code, der mit dem Selektor übereinstimmt, später im CSS-Code erscheint.
In der nächsten Lektion erfahren Sie mehr über die Berechnung der Spezifität. Wenn Sie jedoch einige Dinge beachten, können Sie zu viele Spezifitätsprobleme vermeiden.
Bei Preisvergleichsportalen, die auf eine Klasse für ein Element ausgerichtet sind, wird diese Regel spezifischer. Die Anwendung wird daher als wichtiger angesehen, als auf das CSS, das nur auf das Element ausgerichtet ist.
Das bedeutet, dass im folgenden CSS-Code das h1 rot dargestellt wird, obwohl beide Regeln übereinstimmen und die Regel für den h1-Selektor weiter unten im Stylesheet angezeigt wird.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
Durch id wird der CSS-Code noch spezifischer, d. h., auf eine ID angewendete Stile überschreiben diese auf andere Weise.
Dies ist einer der Gründe, warum es generell keine gute Idee ist, Stile an ein id-Objekt anzuhängen.
Dadurch ist es unter Umständen schwierig, diesen Stil mit etwas anderem zu überschreiben.
Spezifität ist kumulativ
Wie Sie in der nächsten Lektion erfahren, werden jedem Selector-Typ Punkte zugewiesen, die angeben, wie spezifisch er ist. Die Punkte für alle Selectors, die Sie für das Targeting auf ein Element verwendet haben, werden addiert.
Wenn Sie also ein Element mit einer Selektorliste wie a.my-class.another-class[href]:hover ausrichten, kann es ziemlich schwierig sein, es mit anderem CSS zu überschreiben.
Aus diesem Grund und um Ihr CSS leichter wiederverwendbar zu machen, sollten Sie Ihre Selektoren so einfach wie möglich halten.
Verwenden Sie Spezifität als Tool, um Elemente bei Bedarf zu finden. Ziehen Sie jedoch immer eine Refaktorierung langer, spezifischer Selektorlisten in Betracht, wenn möglich.
Ursprung
Das von Ihnen geschriebene CSS ist nicht das einzige CSS, das auf eine Seite angewendet wird. Die Kaskade berücksichtigt den Ursprung des CSS-Codes. Zu diesem Ursprung gehören das interne Stylesheet des Browsers, von Browsererweiterungen oder dem Betriebssystem hinzugefügte Stile sowie Ihr erstellter CSS-Code. Die Reihenfolge der Spezifität dieser Ursprünge, von der am wenigsten spezifischen bis zum spezifischsten, sieht so aus:
- Basisstile des User-Agents: Dies sind die Stile, die Ihr Browser standardmäßig auf HTML-Elemente anwendet.
- Lokale Nutzerstile: Diese können von der Betriebssystemebene stammen, z. B. von einer Basisschriftgröße oder einer Einstellung für reduzierte Bewegung. Sie können auch aus Browsererweiterungen stammen, z. B. einer Browsererweiterung, mit der Nutzer eigenen benutzerdefinierten CSS-Code für eine Webseite schreiben können.
- Erstelltes CSS. Das von Ihnen verfasste Preisvergleichsportal.
- Autor:
!important. Alle!important, die Sie Ihren erstellten Deklarationen hinzufügen. - Lokale Nutzerstile
!important. Alle!important, die von der Betriebssystemebene oder der CSS-Ebene der Browsererweiterung stammen. - User-Agent
!important. Alle!important, die im Standard-CSS-Code definiert sind, der vom Browser bereitgestellt wird.
Angenommen, Sie haben einen !important-Regeltyp in dem von Ihnen erstellten CSS-Code und der Nutzer hat den Regeltyp !important in seinem benutzerdefinierten CSS-Code. Wessen CSS-Code erhält den Zuschlag?
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Kaskadenquellen
Testen Sie Ihr Wissen über Kaskadenquellen. Berücksichtigen Sie dabei die folgenden Stilregeln aus verschiedenen Quellen:
User-Agent-Stil
h1 { margin-block-start: 0.83em; }
Bootstrap
h1 { margin-block-start: 20px; }
Stile für Seitenautoren
h1 { margin-block-start: 2ch; }
@media (max-width: 480px) {
h1 { margin-block-start: 1ch; }
}
Benutzerdefiniertes Design
h1 { margin-block-start: 2rem !important; }
Gehen Sie dann anhand des folgenden HTML-Codes wie folgt vor:
<h1>Lorem ipsum</h1>
Was ist das letzte margin-block-start der h1?
!important-Stil hat den spezifischsten Ursprung.Wichtigkeit
Nicht alle CSS-Regeln werden gleich berechnet oder sind gleich spezifisch.
Die Reihenfolge der Wichtigkeit von der am wenigsten wichtigen bis zur höchsten Priorität sieht so aus:
- normalen Regeltyp, z. B.
font-size,backgroundodercolor animationRegeltyp!important-Regeltyp (in derselben Reihenfolge wie der Ursprung)transitionRegeltyp
Aktive Animations- und Übergangsregeln sind wichtiger als normale Regeln.
Bei Umstellungen ist die Priorität höher als !important Regeltypen.
Wenn eine Animation oder ein Übergang aktiviert wird, ändert sich nämlich der visuelle Status.
Mit den Entwicklertools herausfinden, warum ein Teil des Preisvergleichsportals nicht angewendet wird
Die Entwicklertools des Browsers zeigen in der Regel den gesamten CSS-Code an, der mit einem Element übereinstimmen könnte. Die nicht verwendeten CSS-Elemente sind durchgestrichen.
Wenn der CSS-Code, den Sie anwenden wollten, überhaupt nicht angezeigt wird, stimmt er nicht mit dem Element überein. Suchen Sie in diesem Fall an anderer Stelle nach einem Tippfehler in einem Klassen- oder Elementnamen oder nach einem ungültigen CSS-Code.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über die Kaskade
Wofür kann The Cascade genutzt werden?