Der Wasserfall

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.

  1. Position und Reihenfolge der Darstellung: Die Reihenfolge, in der Ihre CSS-Regeln angezeigt werden.
  2. Spezifität: Ein Algorithmus, der bestimmt, welcher CSS-Selektor die höchste Übereinstimmung hat.
  3. Ursprung: Die Reihenfolge, in der CSS angezeigt wird und woher sie stammt, z. B. Browserstil, CSS aus einer Browsererweiterung oder Ihr selbst erstelltes CSS
  4. 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.

Die Schaltfläche hat einen blauen Hintergrund, gemäß der CSS-Definition, die in einem <link />-Element enthalten ist. Eine CSS-Regel, die dafür sorgt, dass es dunkel ist, befindet sich in einem zweiten verknüpften Stylesheet. und wird aufgrund seiner späteren Position angewendet.

Diese Reihenfolge gilt auch für eingebettete <style>-Elemente. Werden sie vor <link> deklariert, ist das CSS des verknüpften Stylesheets am spezifischsten.

Das <style>-Element wird im <head> deklariert. während das <link />-Element in <body> deklariert ist. Das heißt, es wird spezifischer als das <style>-Element.

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?

Rosa
Der eingebettete <style>-Ursprung befindet sich weiter unten auf der Seite als der <link>-Tag enthält. Die Spezifität von button ist also gleich, das Attribut position der Stilregel gewinnt.
yellow
Im HTML-Dokument wurde der Hintergrund der gelben Schaltfläche möglicherweise vorgelesen. aber später wurde eine neuere Regel derselben Spezifität entdeckt. sodass diese Regel nicht auf die Schaltfläche angewendet wird.

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:

  1. Basisstile für User-Agents: Dies sind die Stile, die Ihr Browser standardmäßig auf HTML-Elemente anwendet.
  2. 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.
  3. Verfasste Preisvergleichsportale. Das von Ihnen verfasste CSS.
  4. Verfasst am !important. Alle !important, die Sie Ihren erstellten Deklarationen hinzufügen.
  5. Lokale Nutzerstile !important. Alle !important auf Betriebssystemebene, oder auf Ebene der Browsererweiterung.
  6. User-Agent !important. Alle !important, die im Standard-CSS-Code definiert sind, die vom Browser bereitgestellt werden.
Eine visuelle Darstellung der Reihenfolge der Ursprünge, wie auch in der Liste erläutert.

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?

20 Pixel
Bootstrap ist Teil des Authoring-Ursprungs, der an den wichtigen lokalen Nutzerstil verliert.
0,83 em
Der Stil des User-Agents verliert gegen den wichtigen lokalen Nutzerstil.
2 Rem
Dieser benutzerdefinierte !important-Nutzerstil hat den spezifischsten Ursprung.
2ch
Dieser Autorenstil ist Teil des Authoring-Ursprungs, der gegenüber dem wichtigen lokalen Nutzerstil verliert.
1ch
Dieser Autorenstil ist Teil des Authoring-Ursprungs, der gegenüber dem wichtigen lokalen Nutzerstil verliert.

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:

  1. Normaler Regeltyp, z. B. font-size, background oder color
  2. animation Regeltyp
  3. !important Regeltyp (in derselben Reihenfolge wie „Ursprung“)
  4. 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.

Ein Bild der Browser-Entwicklertools mit durchgestrichenem überschriebenem CSS-Code

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...

Konflikte beheben, wenn mehrere Stile auf ein Element angewendet werden
Dies ist eines der Hauptziele, die Konfliktlösung.
Sicherstellen, dass zum Zeitpunkt der Zeichnung nur ein Stilwert für jede Eigenschaft vorhanden ist
Der Text kann nur einfarbig sein. Mit The Cascade wird ermittelt, welche Farbe er sein soll.
Stilregeln für Bewertungen und Gewichtung
Die Bewertung und Gewichtung sind Teil der Sortierphase von The Cascade.
Stilattribute sortieren und filtern
Das Sortieren und Filtern sind Phasen von The Cascade, um Aspekte der Konfliktlösung zu verstehen.

Ressourcen