Verarbeitung von CSS-Eigenschaftswerten

Eigenschaftswerte

Jeder Stil, der auf ein Element oder Pseudoelement angewendet wird, basiert auf einer einzigen CSS-Eigenschaftserklärung. Jede CSS-Eigenschaft hat nur einen Wert. Der angewendete Wert wird durch die Kaskadierungswerte aller Deklarationen dieser Eigenschaft bestimmt, die auf dieses Element oder Pseudoelement angewendet werden, wobei der einzige angewendete Wert von der Eigenschaftserklärung stammt, die im Kaskadierungssortierauftrag auf der Grundlage des Kaskadenalgorithmus am höchsten gereiht ist.

Wenn es mehrere erklärte Werte gibt, bei denen mehrere Deklarationen dieselben oder unterschiedliche Eigenschaftswerte für dasselbe Element bereitstellen, muss jeder Eigenschaftswert weiterhin aus einem einzigen Eigenschaftsname-Wert-Paar stammen, da nur ein einzelner Wert aus jeder Eigenschaft angewendet wird, selbst wenn der Wert eine durch Kommas getrennte Liste von Werten ist.

Um zu bestimmen, welcher erklärte Wert angewendet wird, sammelt und verarbeitet der Benutzeragent alle Stile aus verschiedenen Quellen, wie z.B. Inline-Stile und interne und externe Stylesheets.

Die Kaskade bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Kaskadenalgorithmus definiert, wie Benutzeragenten Eigenschaftswerte kombinieren, die aus verschiedenen Quellen, Bereichen und/oder Schichten stammen. Wenn ein Selektor ein Element trifft, wird der erklärte Wert dieser Eigenschaft aus dem Ursprung mit der höchsten Priorität angewendet, selbst wenn ein Selektor aus einem niedrigeren Prioritätsursprung oder Schichten eine höhere specificity hat.

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 vorhanden sind. Wenn die Eigenschaft geerbt wird, wird der Wert auf den berechneten Wert des Elternelements gesetzt. Wenn die Eigenschaft nicht geerbt wird, wird ihr Wert auf den Anfangswert für dieses Element gesetzt.

Nach der Anwendung der Kaskadierungs-Regeln und der schrittweisen Festlegung von Standardwerten stellt der Browser sicher, dass die visuelle Darstellung mit dem verarbeiteten CSS übereinstimmt.

Überblick über die Verarbeitung

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

Filtern

Filtern ist der Prozess der Identifizierung aller Deklarationen, die auf jedes Element angewendet werden. Eine Deklaration gilt für ein Element nur, wenn:

• Die Deklaration gehört zu einem Stylesheet, das aktuell für dieses Dokument gilt
• Alle Bedingungsregeln (wie @media oder @supports), die die Deklaration enthalten, derzeit wahr sind.
• Die Deklaration gehört zu einer Stilregel, deren Selektor mit dem Element übereinstimmt
• Die Deklaration ist syntaktisch gültig: 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äß CSS-Fehlerbehandlungsregeln herausgefiltert.

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

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

Wenn das Filtern abgeschlossen ist, hat jedes Element null oder mehr erklärte Werte für jede CSS-Eigenschaft. Diese deklarierten Werte sind der Ausgangspunkt für die Kaskadierungs-Verarbeitungsstufe.

Kaskadieren

Die Kaskade löst Konflikte, wenn mehrere Deklarationen auf dieselbe Eigenschaft auf demselben Element angewendet werden. Die Kaskade sortiert Deklarationen mit Hilfe des Kaskadensortieralgorithmus.

Zum Beispiel passen beide font-size-Deklarationen zu <p class="large">CSS is fun!</p>, aber die zweite Deklaration wird angewendet, weil sie eine höhere specificity hat. Beide Deklarationen haben den Autors-Ursprung, 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 Kaskadierungswert für jede Eigenschaft auf jedem Element. Dies ist der Wert, der in der nächsten Verarbeitungsstufe verwendet wird; Standardisierung.

Standardisierung

Standardisierung stellt sicher, dass jede Eigenschaft auf jedem Element einen Wert hat. Dies beinhaltet die Anwendung von Standardwerteigenschaften, wenn keine CSS-Deklarationen diesen Eigenschaftswert explizit festlegen. Dies beinhaltet:

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

Ergebnis der Standardisierung ist, dass jede Eigenschaft garantiert einen spezifizierten Wert hat.

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

Verarbeitungsstufen

Alle Elemente, die Teil des abgeflachten Elementebaums des Dokuments sind, haben erklärte, kaskadierte, spezifizierte, berechnete, verwendete und tatsächliche Werte. Für eine bestimmte Eigenschaft können diese Werte gleich oder unterschiedlich sein. Zum Beispiel, wenn Ihr großer Codebestand das CSS p { font-size: 1.25em; } enthält und Ihr HTML <p class="large">CSS is fun!</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 Verarbeitungsstufen der Werte sind:

• Erklärter Wert
• Kaskadierter Wert
• Spezifizierter Wert
• Berechneter Wert
• Verwendeter Wert
• Tatsächlicher Wert

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

Erklärter Wert

Ein erklärter Wert ist jeder syntaktisch gültige Wert aus einer Deklaration, die auf ein Element angewendet wird. Ein Element kann null oder mehr erklärte Werte für jede Eigenschaft haben. Diese Werte stammen aus Stylesheets (Autor, Benutzer oder Benutzeragent) und werden während der Filter-Stufe identifiziert.

Fortsetzend mit unserem Beispiel, bei dem unser Stylesheet eine Vorkommen von p { font-size: 1.25em; } enthält und das Dokument, das mit dem Stylesheet verknüpft ist, <p class="large">CSS is fun!</p> enthält, kann es andere font-size-Deklarationen geben, die potenziell auf den gleichen Absatz angewendet werden könnten. Das Benutzeragent-Stylesheet könnte font-size: 1em für alle Absätze festlegen, während eine andere Autoren-Deklaration 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önnen im Stylesheet viele weitere font-size-Deklarationen vorkommen, 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 Erklärungen erklärte Werte für dieses Element.

Kaskadierter Wert

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

Von unseren erklärten Werten gewinnen Autorenstile über die Benutzeragent-Stile. Innerhalb desselben Ursprungs gewinnen Stile mit höherer Spezifität über Stile mit geringerer Spezifität. In diesem Fall wäre der kaskadierte Wert font-size: 2em, aus dem Autoren-Ursprung mit der Spezifität 0-1-1:

font-size: 2em;

Wenn es keine erklärten Werte für eine Eigenschaft gibt, gibt es keinen kaskadierten Wert, was bedeutet, dass der spezifizierte Wert für diese Eigenschaft durch den Standardisierungs-Prozess bestimmt wird.

Spezifizierter Wert

Der spezifizierte Wert ist das Ergebnis des Standardisierungs-Prozesses. Es ist garantiert, dass er für jede Eigenschaft auf jedem Element existiert. Der spezifizierte Wert wird wie folgt bestimmt:

1. Wenn es einen kaskadierten Wert gibt, ist der kaskadierte Wert der spezifizierte Wert.
2. Wenn es keinen kaskadierten Wert gibt und die Eigenschaft geerbt wird, ist der spezifizierte Wert der berechnete Wert des Elternelements.
3. Wenn es keinen kaskadierten Wert gibt und die Eigenschaft nicht geerbt wird, ist der spezifizierte Wert der Anfangswert der Eigenschaft.

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

font-size: 2em;

Für Eigenschaften ohne kaskadierte Werte bestimmt der Standardisierungsprozess den Wert. Zum Beispiel, wenn color nicht spezifiziert ist, wird color vom berechneten Wert des Elternteils geerbt, da es eine geerbte Eigenschaft ist. Wenn margin nicht spezifiziert ist, wird der initial Wert von 0 verwendet, da margin keine geerbte Eigenschaft ist:

color: inherit;
margin: 0;

Anfangswert

Ein Anfangswert einer Eigenschaft ist der Standardwert, wie er in der Definitionstabelle der Spezifikation aufgeführt ist. Der Anfangswert wird während der Standardisierung verwendet, wenn:

• Bei geerbten Eigenschaften wird der Anfangswert nur auf dem Wurzelelement verwendet, das kein Elternelement hat, wenn kein kaskadierter Wert existiert.
• Bei nicht geerbten Eigenschaften wird der Anfangswert auf alle Elemente angewendet, wenn kein kaskadierter Wert existiert.

Sie können den Anfangswert explizit durch Verwendung des initial Schlüsselworts setzen.

Berechneter Wert

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

Der berechnete Wert wird vom spezifizierten Wert bestimmt durch:

1. Umgang mit den speziellen Werten inherit, initial, revert, revert-layer und unset.
2. Durchführung der zur Erreichung des Wertes erforderlichen Berechnung, die in der Zeile "Berechneter Wert" in der Definitionstabelle der Eigenschaft beschrieben wird.

Die Berechnung, die erforderlich ist, um den berechneten Wert einer Eigenschaft zu erreichen, umfasst typischerweise die Umwandlung relativer Werte (wie bei Verwendung von em-Einheiten oder Prozentsätzen) in absolute Werte. Zum Beispiel, wenn ein Element spezifizierte Werte font-size: 16px und padding-top: 2em hat, dann ist der berechnete Wert von padding-top 32px (das Doppelte der Schriftgröße).

Jedoch, für einige Eigenschaften (diejenigen, bei denen Prozentsätze relativ zu etwas sind, das möglicherweise Layout erfordert, um dies zu bestimmen, wie z.B. width, margin-right, text-indent und top), werden prozentsatzsspezifizierte Werte in prozentual berechnete Werte umgewandelt. Zusätzlich werden dimensionslose Zahlen, die bei der Eigenschaft line-height spezifiziert sind, zum berechneten Wert, wie angegeben. 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 auf dem berechneten Wert durchgeführt wurden und er mit layout-spezifischen Details verfeinert wurde (z.B. in tatsächliche Pixelwerte umgewandelte Prozentsätze).

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 Kurzschreibeigenschaften (z.B. background) sind mit denen ihrer Komponenteneigenschaften (z.B. background-color oder background-size) und mit position und float konsistent.

Der verwendete Wert für die width oder inline-size eines Elements ist ein Pixelwert, selbst wenn der angegebene Wert der Eigenschaft mit Prozentwerten oder Schlüsselwortwerten festgelegt wurde.

Wenn wir drei Containerelemente haben, deren Breite auf auto, 50% und inherit eingestellt ist:

<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-Eigenschaft mit window.getComputedStyle(el)["width"]; einen absoluten Längenwert in px:

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

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 wird, einschließlich Anpassungen für Renderprobleme oder -einschränkungen. Zum Beispiel kann ein Benutzeragent, der nur Ränder mit einer ganzen Zahl Pixelbreite rendern kann, die Dicke des Randes 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 anhand des Anfangswerts bestimmt.
2. Als nächstes wird der berechnete Wert gemäß der Spezifikation berechnet (zum Beispiel wird ein span mit position: absolute sein berechneter display auf block geändert).
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 nach Anwendung aktiver Stylesheets und der Auflösung aller grundlegenden Berechnungen, die diese Werte möglicherweise enthalten. Die Methode getComputedStyle() gibt ein lebendiges 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 hat getComputedStyle() den berechneten Wert eines Elements oder Pseudoelements zurückgegeben. Als sich CSS weiterentwickelte, tat dies auch das Konzept des "berechneten Wertes", aber die von getComputedStyle() zurückgegebenen Werte mussten aus Gründen der Rückwärtskompatibilität mit bereits eingesetzten Skripten gleich bleiben. Diese Werte sind die "aufgelösten Werte".

Für die meisten Eigenschaften ist der aufgelöste Wert der berechnete Wert, aber für einige ältere 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 in der Berechnung einer Eigenschaft. CSS 2.1 führte die separate Definition "verwendeter Wert" ein. Ein Element konnte dann explizit die Breite/Höhe seines Elternteils erben, dessen berechneter Wert ein Prozentsatz war. Bei CSS-Eigenschaften, die nicht vom Layout abhängen (z.B. display, font-size oder line-height), sind die berechneten Werte und die verwendeten Werte gleich. Die folgende Liste enthält die CSS 2.1-Eigenschaften, die tatsächlich vom Layout abhängen und daher unterschiedliche berechnete und verwendete Werte haben (entnommen aus CSS 2.1 Änderungen: Spezifizierte, berechnete und tatsächliche Werte):

• 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
• Modul CSS-Kaskadierung und Vererbung
• Modul CSS-Syntax