The CSS Podcast – 004: The Cascade
CSS steht für Cascading Stylesheets (Cascading Stylesheets). Die Kaskade ist der Algorithmus zum Lösen von Konflikten, bei denen mehrere CSS-Regeln für ein HTML-Element gelten. Aus diesem Grund ist der mit dem folgenden CSS-Stil gestaltete Schaltflächentext blau.
button {
color: red;
}
button {
color: blue;
}
Wenn Sie den Kaskadenalgorithmus verstehen, können Sie besser verstehen, wie der Browser solche Konflikte löst. Der Kaskadenalgorithmus ist in vier Phasen unterteilt.
- Position und Reihenfolge der Darstellung: Die Reihenfolge, in der Ihre CSS-Regeln angezeigt werden.
- Spezifität: Ein Algorithmus, der bestimmt, welcher CSS-Selektor die höchste Übereinstimmung hat.
- Ursprung: Die Reihenfolge, in der CSS angezeigt wird und woher sie stammt, z. B. Browserstil, CSS aus einer Browsererweiterung oder Ihr selbst erstelltes CSS
- Wichtigkeit: Einige CSS-Regeln werden stärker gewichtet als andere.
insbesondere mit dem Regeltyp
!important
Position und Reihenfolge der Darstellung
Die Reihenfolge, in der Ihre CSS-Regeln angezeigt werden, wird von der Kaskade berücksichtigt. während die Konfliktlösung berechnet wird.
Die Demo gleich zu Beginn dieser Lektion ist das einfachste Beispiel für eine Position. Es gibt zwei Regeln mit Selektoren identischer Spezifität: sodass der zuletzt zu erklärende Preis gewonnen hat.
Stile können aus verschiedenen Quellen auf einer HTML-Seite stammen,
z. B. ein <link>
-Tag,
ein eingebettetes <style>
-Tag
und Inline-CSS, wie im Attribut style
eines Elements definiert.
Wenn Sie eine <link>
haben, die CSS am Anfang Ihrer HTML-Seite enthält,
und ein weiteres <link>
mit CSS unten auf der Seite: Das untere <link>
ist am spezifischsten.
Dasselbe passiert auch mit eingebetteten <style>
-Elementen.
Je weiter sie sich auf der Seite befinden, desto spezifischer werden sie.
Diese Reihenfolge gilt auch für eingebettete <style>
-Elemente.
Werden sie vor <link>
deklariert,
ist das CSS des verknüpften Stylesheets am spezifischsten.
Ein Inline-Attribut style
mit angegebenem CSS-Code überschreibt alle anderen CSS,
unabhängig von seiner Position, es sei denn, für eine Deklaration ist !important
definiert.
Position gilt auch in der Reihenfolge Ihrer CSS-Regel.
In diesem Beispiel hat das Element einen lila Hintergrund, da background: purple
zuletzt deklariert wurde.
Da der grüne Hintergrund vor dem lila Hintergrund angegeben wurde, wird er jetzt vom Browser ignoriert.
.my-element {
background: green;
background: purple;
}
Die Fähigkeit, 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 im Browser clamp()
unterstützt wird,
wird die vorherige font-size
-Deklaration verworfen.
Wenn clamp()
vom Browser nicht unterstützt wird, gehen Sie so vor:
wird die ursprüngliche Erklärung berücksichtigt, und die Schriftgröße ist 1,5rem.
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Wissen testen
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>
In styles.css
befindet sich die folgende CSS-Regel:
button { background: yellow; }
Welche Farbe hat der Hintergrund der Schaltfläche?
Spezifität
Spezifität ist ein Algorithmus, der bestimmt, welcher CSS-Selektor am spezifischsten ist. ein Gewichtungs- oder Bewertungssystem nutzen. Wenn Sie eine Regel spezifischer gestalten, kann es vorkommen, dass er angewendet wird, auch wenn später ein anderer CSS-Code, der mit dem Selektor übereinstimmt, später im CSS-Code erscheint.
In der nächsten Lektion geht es um die Berechnung der Spezifität. Wenn Sie jedoch einige Dinge beachten, vermeiden Sie zu viele Spezifitätsprobleme.
Mit CSS, die auf eine Klasse eines Elements ausgerichtet ist, wird diese Regel spezifischer.
und daher als wichtiger angewandt angesehen werden,
als mit Preisvergleichsportalen, die nur auf das Element ausgerichtet sind.
Mit dem folgenden CSS-Code
Das h1
wird rot dargestellt, obwohl beide Regeln übereinstimmen und die Regel für den h1
-Selektor später im Stylesheet erscheint.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
Ein id
macht das CSS noch spezifischer,
Deshalb überschreiben Stile, die auf eine ID angewendet wurden, die auf verschiedene andere Arten angewendeten Stile.
Dies ist einer der Gründe, warum es im Allgemeinen keine gute Idee ist, Stile an ein id
anzuhängen.
Es kann schwierig sein, diesen Stil mit einem anderen Stil zu überschreiben.
Spezifität ist kumulativ
Wie Sie in der nächsten Lektion erfahren,
erhält jeder Selektor Punkte, die angeben, wie spezifisch er ist,
werden die Punkte aller Selektoren, die Sie für die Ausrichtung auf ein Element verwendet haben, addiert.
Wenn Sie also ein Element mit einer Auswahlliste wie
a.my-class.another-class[href]:hover
erhalten Sie etwas Schwieriges, das mit anderem CSS überschrieben werden kann.
Um Ihr Preisvergleichsportal
wiederverwendbar zu machen,
sollten Sie die Selektoren so einfach wie möglich halten.
Nutzen Sie Spezifität, um bei Bedarf auf Elemente zu gelangen,
aber erwägen Sie, möglichst lange, spezifische Selektorlisten zu refaktorieren.
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. Dieser Ursprung enthält das interne Stylesheet des Browsers, Stile, die über Browsererweiterungen oder das Betriebssystem hinzugefügt wurden, und das von Ihnen erstellte CSS. Die Reihenfolge der Spezifität dieser Ursprünge, von am wenigsten spezifisch bis zur spezifischsten, sieht so aus:
- Basisstile für 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. eine Basisschriftgröße, oder eine Vorliebe für eingeschränkte Bewegung. Sie können auch aus Browsererweiterungen stammen, wie etwa eine Browsererweiterung, mit der Nutzer eigene CSS-Elemente für eine Webseite schreiben können.
- Verfasste Preisvergleichsportale. Das von Ihnen verfasste CSS.
- Verfasst am
!important
. Alle!important
, die Sie Ihren erstellten Deklarationen hinzufügen. - Lokale Nutzerstile
!important
. Alle!important
auf Betriebssystemebene, oder auf Ebene der Browsererweiterung. - User-Agent
!important
. Alle!important
, die im Standard-CSS-Code definiert sind, die vom Browser bereitgestellt werden.
Wenn Sie in dem von Ihnen erstellten CSS den Regeltyp !important
haben
und der Nutzer hat den Regeltyp !important
in seinem benutzerdefinierten CSS. Wessen CSS erhält den Zuschlag?
Wissen testen
Testen Sie Ihr Wissen zu Kaskadenursprüngen
Testen Sie Ihr Wissen über Kaskadenursprünge und ziehen Sie den folgenden Stil in Betracht Regeln aus verschiedenen Quellen:
User-Agent-Stil
h1 { margin-block-start: 0.83em; }
Bootstrap
h1 { margin-block-start: 20px; }
Page Author-Stile
h1 { margin-block-start: 2ch; } @media (max-width: 480px) { h1 { margin-block-start: 1ch; } }
Benutzerdefinierter Stil
h1 { margin-block-start: 2rem !important; }
Dann anhand des folgenden HTML-Codes:
<h1>Lorem ipsum</h1>
Was ist das letzte margin-block-start
-Element der h1
?
Wichtigkeit
Nicht alle CSS-Regeln werden auf dieselbe Weise berechnet. gleich spezifisch sind.
die Reihenfolge der Wichtigkeit, von der am wenigsten wichtigen am wichtigsten ist:
- Normaler Regeltyp, z. B.
font-size
,background
odercolor
animation
Regeltyp!important
Regeltyp (in derselben Reihenfolge wie „Ursprung“)transition
Regeltyp
Aktive Animations- und Übergangsregeltypen haben eine höhere Bedeutung als normale Regeln.
Bei Umstellungen ist die Wichtigkeit von !important
-Regeltypen höher.
Wenn eine Animation oder ein Übergang aktiv wird,
das erwartete Verhalten ist die Änderung des
visuellen Zustands.
Mit den Entwicklertools herausfinden, warum ein Teil der CSS nicht angewendet wird
Browser-Entwicklertools zeigen in der Regel sämtlichen CSS-Code an, der mit einem Element übereinstimmen könnte. mit denen, die nicht verwendet werden, durchgestrichen sind.
Wenn das gewünschte Preisvergleichsportal nicht angezeigt wird, passte es nicht zum Element. In diesem Fall müssen Sie z. B. wegen eines Tippfehlers in einem Klassen- oder Elementnamen oder ungültiger CSS.
Wissen testen
Testen Sie Ihr Wissen über die Kaskade
The Cascade kann verwendet werden für...