Verarbeitung von CSS-Eigenschaftswerten

Eigenschaftswerte

Jeder Stil, der auf ein Element oder Pseudoelement angewendet wird, basiert auf einer einzelnen CSS-Eigenschaftsdeklaration. Jede CSS-Eigenschaft hat nur einen Wert. Der angewendete Wert wird durch die kaskadierten Werte aller Deklarationen dieser Eigenschaft bestimmt, die auf dieses Element oder Pseudoelement angewendet werden. Der einzige angewendete Wert stammt aus der Eigenschaftsdeklaration, die in der Sortierreihenfolge der Kaskade basierend auf dem Kaskaden-Algorithmus am höchsten eingestuft wird.

Wenn es mehrere deklarierte Werte gibt, bei denen mehrere Deklarationen dieselben oder unterschiedliche Eigenschaftswerte für dasselbe Element bereitstellen, muss jeder Eigenschaftswert dennoch aus einem einzigen Eigenschaftsnamen-Wert-Paar stammen, da nur ein einziger Wert aus jeder Eigenschaft angewendet wird, selbst wenn der Wert eine durch Kommata getrennte Liste von Werten ist.

Um zu bestimmen, welcher deklarierte Wert angewendet wird, sammelt und verarbeitet der Benutzer-Agent alle Stile aus verschiedenen Quellen, wie Inline-Stile und interne und externe Stylesheets.

Die Kaskade bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile auf dasselbe Element abzielen. Der Kaskaden-Algorithmus definiert, wie Benutzer-Agenten Eigenschaftswerte aus verschiedenen Quellen, Geltungsbereichen und/oder Schichten kombinieren. Wenn ein Selektor mit einem Element übereinstimmt, wird der deklarierte Wert der Eigenschaft aus dem Ursprung mit der höchsten Priorität angewendet, selbst wenn ein Selektor aus einem niedrigeren Prioritäts-Ursprung oder Schichten specificity höher ist.

Bestimmte Eigenschaften erben Werte von ihren Elternelementen, es sei denn, sie werden ausdrücklich überschrieben. Vererbung kann auftreten, wenn keine Stilinformationen für eine bestimmte Eigenschaft auf einem Element existieren. Wenn die Eigenschaft vererbt wird, wird der Wert auf den berechneten Wert des Elternelements gesetzt. Wenn die Eigenschaft nicht vererbt wird, wird ihr Wert auf den Anfangswert für dieses Element gesetzt.

Nach der Anwendung der kaskadierenden Regeln und der stufenweisen Festlegung von Standardwerten stellt der Browser sicher, dass die visuelle Darstellung mit den verarbeiteten CSS übereinstimmt.

Verarbeitungsübersicht

Bevor wir in die einzelnen Wertstufen eintauchen, ist es wichtig, die drei Hauptphasen der Wertverarbeitung zu verstehen: Filtern, Kaskadieren und Standardisierung.

Filtern

Filtern ist der Prozess des Identifizierens aller Deklarationen, die für jedes Element gelten. Eine Deklaration gilt für ein Element nur, wenn:

• Die Deklaration zu einem Stylesheet gehört, das derzeit auf dieses Dokument angewendet wird.
• Alle bedingten Regeln (wie @media oder @supports), die die Deklaration enthalten, derzeit wahr sind.
• Die Deklaration zu einer Stilregel gehört, deren Selektor auf das Element zutrifft.
• Die Deklaration syntaktisch gültig ist: Der Eigenschaftsname wird vom Browser erkannt und der Wert entspricht der erwarteten Syntax für diese Eigenschaft.

Nur gültige Deklarationen werden zu deklarierten Werten. Deklarationen mit ungültigen Eigenschaftsnamen oder ungültigen Werten werden gemäß den CSS-Fehlerbehandlungsregeln herausgefiltert.

In diesem Beispiel werden nur die font-size- und font-weight-Deklarationen verarbeitet. Der CSS-Parser filtert Fehler heraus und ignoriert oder "filtert" die Deklaration mit dem ungültigen Eigenschaftsnamen:

p {
  font-size: 1.25em;
  colr: blue;
  font-weight: bold;
}

Wenn die Filterung abgeschlossen ist, hat jedes Element null oder mehr deklarierte Werte für jede CSS-Eigenschaft. Diese deklarierten Werte sind der Ausgangspunkt für die Kaskadierung Verarbeitungsstufe.

Kaskadieren

Kaskade löst Konflikte, wenn mehrere Deklarationen auf dieselbe Eigenschaft auf demselben Element angewendet werden. Kaskade sortiert Deklarationen mit dem Kaskaden-Sortieralgorithmus.

Zum Beispiel entsprechen beide font-size-Deklarationen <p class="large">CSS macht Spaß!</p>, aber die zweite Deklaration wird angewendet, weil sie höhere specificity aufweist. Beide Deklarationen haben die Herkunft des Autors, aber der zweite Selektor hat eine Spezifität von 0-1-1, während der erste 0-0-1 hat:

p {
  font-size: 1em;
}

p.large {
  font-size: 1.5em;
}

Nach dem Kaskadieren bestimmt der Browser den kaskadierten Wert für jede Eigenschaft jedes Elements. Dieser Wert wird in der nächsten Verarbeitungsstufe verwendet: Standardisierung.

Standardisierung

Standardisierung stellt sicher, dass jede Eigenschaft jedes Elements einen Wert hat. Dies beinhaltet die Anwendung von Standardwerten für Eigenschaften, wenn keine CSS-Deklarationen diesen Eigenschaftswert explizit festgelegt haben. Dies beinhaltet:

• Festlegen von geerbten Werten für geerbte Eigenschaften
• Festlegen von Anfangswerten für nicht geerbte Eigenschaften

Durch die Standardisierung ist gewährleistet, dass jede Eigenschaft einen spezifizierten Wert hat.

Beachten Sie, dass explizite Standardisierungsschlüsselwörter (initial, inherit, unset, revert, revert-layer) auch auf ihre entsprechenden Werte aufgelöst werden, um den spezifizierten Wert zu bestimmen.

Verarbeitungsstufen

Alle Elemente, die Teil des abgeflachten Elementebaums des Dokuments sind, haben deklarierte, kaskadierte, spezifizierte, berechnete, verwendete und tatsächliche Werte. Für eine bestimmte Eigenschaft können diese Werte gleich sein oder nicht. Zum Beispiel, wenn Ihr großer Codebasiert das CSS p { font-size: 1.25em; } enthält und Ihr HTML <p class="large">CSS macht Spaß!</p> enthält, welche Größe wird der Absatz haben? Der font-size-Wert durchläuft einige Stufen, um vom em spezifizierten Wert zum gerenderten px Wert zu gelangen.

Die Wertverarbeitungsstufen sind:

• Deklarierter Wert
• Kaskadierter Wert
• Spezifizierter Wert
• Berechneter Wert
• Verwendeter Wert
• Tatsächlicher Wert

Diese Werte werden verwendet, um den endgültigen gerenderten Wert zu bestimmen.

Deklarierter Wert

Ein deklarierter Wert ist ein syntaktisch gültiger Wert aus einer Deklaration, die auf ein Element angewendet wird. Ein Element kann null oder mehr deklarierte Werte für jede Eigenschaft haben. Diese Werte stammen aus Stylesheets (Autor, Benutzer oder Benutzer-Agent) und werden während der Filterung identifiziert.

In unserem Beispiel, bei dem unser Stylesheet eine Deklaration p { font-size: 1.25em; } enthält und das Dokument, das auf dieses Stylesheet verweist, <p class="large">CSS macht Spaß!</p> enthält, könnten andere font-size-Deklarationen potenziell auf denselben Absatz angewendet werden. Das stylesheet des Benutzeragents könnte font-size: 1em für alle Absätze festlegen, während eine andere Deklaration des Autors font-size: 2em für Elemente mit der Klasse "large" festlegt:

/* User agent styles */
p {
  font-size: 1em;
}

/* author styles */
p {
  font-size: 1.25em;
}

.large {
  font-size: 2em;
}

Es könnten viele andere font-size-Deklarationen in unseren Stylesheets vorhanden sein, aber nur Deklarationen, deren Selektoren mit dem Element übereinstimmen, werden zu deklarierten Werten. In diesem Beispiel, da unser <p>-Element class="large" hat, sind alle drei Deklarationen deklarierte Werte für dieses Element.

Kaskadierter Wert

Der kaskadierte Wert ist der deklarierte Wert, der die Kaskade gewinnt. Es gibt höchstens einen kaskadierten Wert pro Eigenschaft und Element.

Von unseren deklarierten Werten gewinnen Autorstile gegenüber Benutzer-Agent-Stilen. Innerhalb desselben Ursprungs gewinnen Stile mit höherer Spezifität gegenüber Stilen mit niedrigerer Spezifität. In diesem Fall würde der kaskadierte Wert font-size: 2em sein, vom Autorursprung mit Spezifität 0-1-1:

font-size: 2em;

Wenn es keine deklarierten Werte für eine Eigenschaft gibt, gibt es keinen kaskadierten Wert, was bedeutet, dass der spezifizierte Wert für diese Eigenschaft durch den Standardisierungsprozess bestimmt wird.

Spezifizierter Wert

Der spezifizierte Wert ist das Ergebnis des Standardisierungsprozesses. Es ist für jede Eigenschaft jedes Elements garantiert vorhanden. Der spezifizierte Wert wird wie folgt bestimmt:

1. Wenn ein kaskadierter Wert vorhanden ist, ist dies der spezifizierte Wert.
2. Wenn kein kaskadierter Wert vorhanden ist und die Eigenschaft vererbt wird, ist der spezifizierte Wert der berechnete Wert des Elternelements.
3. Wenn kein kaskadierter Wert vorhanden ist und die Eigenschaft nicht vererbt wird, ist der spezifizierte Wert der Anfangswert der Eigenschaft.

In unserem Beispiel, da wir einen kaskadierten Wert von 2em haben, wird dies der spezifizierte Wert:

font-size: 2em;

Für Eigenschaften ohne kaskadierte Werte bestimmt der Standardisierungsprozess den Wert. Wenn zum Beispiel color nicht spezifiziert ist, wird die color vom berechneten Wert des Elternteils vererbt, da es sich um eine vererbte Eigenschaft handelt. Wenn margin nicht spezifiziert ist, wird der initial Wert von 0 verwendet da margin keine vererbte Eigenschaft ist:

color: inherit;
margin: 0;

Anfangswert

Der Anfangswert einer Eigenschaft ist der Standardwert, wie in der Spezifikation in der Definitionstabelle angegeben. Der Anfangswert wird während der Standardisierung verwendet, wenn:

• Für vererbte Eigenschaften, wird der Anfangswert nur am Wurzelelement verwendet, das kein Elternelement hat, wenn kein kaskadierter Wert existiert.
• Für nicht-vererbte Eigenschaften, wird der Anfangswert für alle Elemente verwendet, wenn kein kaskadierter Wert existiert.

Sie können den Anfangswert explizit mit dem initial Schlüsselwort setzen.

Berechneter Wert

Der berechnete Wert einer Eigenschaft ist der Wert, der während der Vererbung von Eltern zu Kind übertragen wird. Es ist das Ergebnis, nachdem Dinge wie relative Einheiten und benutzerdefinierte Eigenschaften in absolute Werte umgewandelt wurden, aber bevor layoutspezifische Informationen berücksichtigt werden.

Der berechnete Wert wird aus dem spezifizierten Wert berechnet durch:

1. Umgang mit speziellen Werten wie inherit, initial, revert, revert-layer, und unset.
2. Durchführung der Berechnung, die erforderlich ist, um den in der Definitionstabelle der Eigenschaft beschriebenen "Computed value" zu erreichen.

Die Berechnung, die erforderlich ist, um den berechneten Wert einer Eigenschaft zu erreichen, beinhaltet typischerweise die Umwandlung relativer Werte (wie em-Einheiten oder Prozentsätzen) in absolute Werte. Wenn ein Element beispielsweise die spezifizierten Werte font-size: 16px und padding-top: 2em hat, dann ist der berechnete Wert von padding-top 32px (doppelt so groß wie die Schriftgröße).

Für einige Eigenschaften (diejenigen, für die Prozentsätze relativ zu etwas sind, das möglicherweise das Layout erfordert, wie width, margin-right, text-indent und top) werden prozentuale spezifizierte Werte in prozentuale berechnete Werte umgewandelt. Zusätzlich werden einheitslose Zahlen, die auf die Eigenschaft line-height spezifiziert sind, als berechneter Wert übernommen. Die relativen Werte, die im berechneten Wert verbleiben, werden absolut, wenn der verwendete Wert bestimmt wird.

Verwendeter Wert

Der verwendete Wert ist der Wert der Eigenschaft, nachdem alle Berechnungen am berechneten Wert durchgeführt wurden und er mit layoutspezifischen Details verfeinert wurde (z. B. Prozentsätze, die in tatsächliche Pixelwerte umgewandelt wurden).

Jede CSS-Eigenschaft hat einen verwendeten Wert. Die verwendeten Werte von Dimensionen (z. B. width oder line-height) sind in Pixeln. Die verwendeten Werte von Kurzform-Eigenschaften (z. B. background) sind mit denen ihrer Komponenten-Eigenschaften (z. B. background-color oder background-size), sowie mit position und float konsistent.

Der verwendete Wert für die width oder inline-size eines Elements ist ein Pixelwert, auch wenn der spezifizierte Wert der Eigenschaft mit Prozentsätzen oder Schlüsselwortwerten gesetzt wurde.

Wenn wir drei Containerelemente mit ihrer Breite auf auto, 50% und inherit gesetzt haben:

<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* Make results easier to see */
div {
  border: 1px solid red;
  padding: 8px;
}

function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);

Während die drei spezifizierten Werte, auto, 50% und inherit, Schlüsselwort- und <percentage> Werte sind, liefert das Abrufen der width mittels window.getComputedStyle(el)["width"]; einen absolut langen px Wert:

Ändern Sie die Fenstergröße oder drehen Sie Ihr mobiles Gerät, um die Größe zu ändern und die verwendeten Werte zu beeinflussen.

Gerenderte Werte

Der gerenderte Wert wird als tatsächlicher Wert bezeichnet, während der über ein Skript abgerufene Wert als aufgelöster Wert bezeichnet wird.

Tatsächlicher Wert

Der tatsächliche Wert einer Eigenschaft ist der verwendete Wert dieser Eigenschaft, nachdem alle notwendigen Annäherungen angewendet wurden. Es ist der endgültige gerenderte Wert, wie er vom Browser implementiert wurde, einschließlich Anpassungen für Rendering-Quirks oder -Beschränkungen. Beispielsweise kann ein Benutzer-Agent, der nur Rahmen mit ganzzahliger Pixelbreite rendern kann, die Dicke des Rahmens auf die nächste ganze Zahl runden.

Die Berechnung umfasst diese Schritte:

1. Zuerst wird der spezifizierte Wert basierend auf dem Ergebnis der Kaskadierung, Vererbung oder unter Verwendung des Anfangswerts bestimmt.
2. Als nächstes wird der berechnete Wert gemäß der Spezifikation berechnet (beispielsweise hat ein span mit position: absolute einen berechneten display, der zu block geändert wurde).
3. Dann wird das Layout berechnet, was zum verwendeten Wert führt.
4. Schließlich wird der verwendete Wert entsprechend den Einschränkungen der lokalen Umgebung transformiert, was zum tatsächlichen Wert führt.

Aufgelöster Wert

Der aufgelöste Wert einer Eigenschaft ist der Wert, nachdem aktive Stylesheets angewendet wurden und alle grundlegenden Berechnungen dieser Werte aufgelöst wurden. Die Methode getComputedStyle() gibt ein lebendes CSSStyleDeclaration-Objekt zurück, das die aufgelösten Werte aller auf ein bestimmtes Element angewendeten CSS-Eigenschaften enthält. Jeder aufgelöste Wert ist entweder der berechnete Wert oder der verwendete Wert, abhängig von der Eigenschaft.

Historisch gesehen gab getComputedStyle() den berechneten Wert eines Elements oder Pseudoelements zurück. Mit der Weiterentwicklung von CSS hat sich auch das Konzept des "berechneten Werts" weiterentwickelt, aber die von getComputedStyle() zurückgegebenen Werte mussten aus Gründen der Rückwärtskompatibilität mit bereitgestellten Skripten gleich bleiben. Diese Werte sind die "aufgelösten Werte".

Bei den meisten Eigenschaften ist der aufgelöste Wert der berechnete Wert, aber bei einigen wenigen Legacy-Eigenschaften (einschließlich width und height) ist es der verwendete Wert. Die CSSOM-Spezifikation bietet detaillierte Informationen pro Eigenschaft.

CSS 2.0 definierte berechneter Wert als den letzten Schritt bei der Berechnung einer Eigenschaft. CSS 2.1 führte die klare Definition des "verwendeten Werts" ein. Ein Element konnte dann explizit die Breite/Höhe seines Elternteils erben, dessen berechneter Wert ein Prozentsatz ist. Für CSS-Eigenschaften, die nicht vom Layout abhängen (z.B. display, font-size oder line-height), sind die berechneten Werte und verwendeten Werte gleich. Die folgende Liste enthält die CSS 2.1-Eigenschaften, die doch vom Layout abhängen und daher unterschiedliche berechnete und verwendete Werte haben (übernommen von CSS 2.1 Changes: Specified, computed, and actual values):

• background-position
• bottom, left, right, top
• height, width
• margin-bottom, margin-left, margin-right, margin-top
• min-height, min-width
• padding-bottom, padding-left, padding-right, padding-top
• text-indent

Siehe auch

• CSS-Werte zur Steuerung der Vererbung: inherit, initial, revert, revert-layer, und unset
• CSS Module: Kaskadierung und Vererbung
• CSS Module: Syntax