Verarbeitung von CSS-Werteigenschaften

Eigenschaftswerte

Jeder Stil, der auf ein Element oder Pseudo-Element angewendet wird, basiert auf einer einzigen CSS-Eigenschaftsdeklaration. Jede CSS-Eigenschaft hat nur einen Wert. Der angewandte Wert wird durch die kaskadierten Werte aller Deklarationen dieser Eigenschaft bestimmt, die auf das Element oder Pseudo-Element angewendet werden, wobei der angewandte Einzelwert aus der Eigenschaftsdeklaration stammt, die in der Kaskadierungs-Reihenfolge basierend auf dem Kaskaden-Algorithmus am höchsten rangiert.

Wenn es mehrere deklarierte Werte gibt, mit mehreren Deklarationen, die denselben oder unterschiedliche Eigenschaftswerte für dasselbe Element bereitstellen, muss jeder Eigenschaftswert dennoch aus einem einzigen Eigenschaftsname-Wert-Paar stammen, da nur ein einzelner Wert aus jeder Eigenschaft angewendet wird, auch wenn der Wert eine durch Kommas 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, interne und externe Stylesheets.

Die Kaskade bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Kaskaden-Algorithmus definiert, wie Benutzer-Agenten Eigenschaftswerte kombinieren, die aus verschiedenen Quellen, Bereichen und/oder Ebenen stammen. Wenn ein Selektor ein Element trifft, wird der deklarierte Wert der Eigenschaft aus dem Ursprung mit der höchsten Priorität angewendet, selbst wenn ein Selektor aus einem Ursprung oder Ebenen niedrigerer Präzedenz 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 eines Elements existieren. 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 Initialwert für dieses Element gesetzt.

Nach Anwendung der kaskadierenden Regeln und der Standardwerte Schritt für Schritt stellt der Browser sicher, dass die visuelle Darstellung den verarbeiteten CSS entspricht.

Überblick über die Verarbeitung

Bevor Sie in die einzelnen Wertephasen 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 derzeit für dieses Dokument gilt
• Alle Bedingungsregeln (wie @media oder @supports), die die Deklaration enthalten, sind derzeit wahr.
• 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äß den CSS-Fehlerbehandlungsregeln herausgefiltert.

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

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

Wenn das Filtern 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.

Kaskadierung

Cascade löst Konflikte, wenn mehrere Deklarationen für dieselbe Eigenschaft am selben Element angewendet werden. Die Kaskade sortiert Deklarationen mit dem Kaskadierungs-Sortieralgorithmus.

Zum Beispiel passen beide font-size Deklarationen zu <p class="large">CSS ist spaßig!</p>, aber die zweite Deklaration wird angewendet, weil sie eine höhere specificity hat. Beide Deklarationen haben den Autorenursprung, aber der zweite Selektor hat die Spezifität 0-1-1, während der erste 0-0-1 hat:

p {
  font-size: 1em;
}

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

Nach der Kaskadierung bestimmt der Browser den kaskadierten Wert für jede Eigenschaft jedes Elements. Dies ist der Wert, der in der nächsten Verarbeitungsstufe verwendet wird; Standardisieren.

Standardisieren

Standardisieren stellt sicher, dass jede Eigenschaft auf jedem Element einen Wert hat. Dies beinhaltet die Anwendung von Standard-Eigenschaftswerten, wenn keine CSS-Deklarationen diesen Eigenschaftswert explizit setzen. Dies umfasst:

• Festlegung von vererbten Werten für vererbte Eigenschaften
• Festlegung von Initialwerten für nicht-vererbte Eigenschaften

Als Ergebnis des Standardisierens ist garantiert, 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 Elementbaums des Dokuments sind, haben deklarierte, 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 Code-Bestand das CSS p { font-size: 1.25em; } enthält und Ihr HTML <p class="large">CSS ist spaßig!</p> enthält, wie groß wird der Absatz sein? Der font-size Wert durchläuft einige Stufen, um von dem 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 jeder syntaktisch gültige 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, in dem unser Stylesheet p { font-size: 1.25em; } enthält und das Dokument, das dieses Stylesheet verlinkt, <p class="large">CSS ist spaßig!</p> enthält, könnte es andere font-size Deklarationen geben, die potenziell auf denselben Absatz angewendet werden können. Das Benutzer-Agent-Stylesheet könnte font-size: 1em für alle Absätze festlegen, während eine andere Autor-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önnte viele andere font-size Deklarationen in unseren Stylesheets geben, 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 deklariert 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 pro Element.

Aus 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äre der kaskadierte Wert font-size: 2em vom Autorenursprung mit der 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. Er ist garantiert für jede Eigenschaft auf jedem Element zu existieren. 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 vererbt wird, ist der spezifizierte Wert der berechnete Wert des Elternelements.
3. Wenn es keinen kaskadierten Wert gibt und die Eigenschaft nicht vererbt wird, ist der spezifizierte Wert der Initialwert 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. Zum Beispiel, wenn color nicht angegeben ist, wird die color vom berechneten Wert des Elternteils vererbt, da es eine vererbte Eigenschaft ist. Wenn margin nicht angegeben ist, wird der initial Wert von 0 verwendet, da margin keine vererbte Eigenschaft ist:

color: inherit;
margin: 0;

Initialwert

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

• Für vererbte Eigenschaften wird der Initialwert nur am Wurzelelement verwendet, das kein Elternelement hat, wenn kein kaskadierter Wert existiert.
• Für nicht-vererbte Eigenschaften wird der Initialwert auf allen Elementen verwendet, wenn kein kaskadierter Wert existiert.

Sie können den Initialwert explizit durch das initial Schlüsselwort setzen.

Berechneter Wert

Der berechnete Wert einer Eigenschaft ist der Wert, der während der Vererbung vom Elternteil auf das Kind ü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 aus dem spezifizierten Wert berechnet durch:

1. Behandlung der speziellen Werte inherit, initial, revert, revert-layer und unset.
2. Durchführung der Berechnung, die erforderlich ist, um den Wert zu erreichen, der 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 in der Regel die Umwandlung relativer Werte (wie diejenigen in 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 werden für einige Eigenschaften (bei denen Prozentsätze relativ zu etwas sind, das möglicherweise ein Layout erfordert, wie width, margin-right, text-indent, und top) Prozentsatz-spezifizierte Werte in Prozentsatz-berechnete Werte umgewandelt. Darüber hinaus werden bei der Eigenschaft line-height ausgezeichnete Zahlen, wie angegeben, zu berechneten Werten. 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 Layout-spezifischen Details (z.B. Prozentsätze, die auf tatsächliche Pixelwerte aufgelöst werden) verfeinert wurde.

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

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

Wenn wir drei Containerelemente haben, deren Breite als auto, 50%, und inherit festgelegt 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 mittels window.getComputedStyle(el)["width"]; einen absoluten Längenwert im px Format:

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

Gerenderte Werte

Der gerenderte Wert wird als tatsächlicher Wert bezeichnet, während der Wert, der über Skript abgerufen wird, 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 aufgrund von Darstellungsbesonderheiten oder -beschränkungen. Zum Beispiel kann ein User-Agent, der nur Ränder mit ganzer 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 des Kaskadierens, der Vererbung oder durch Verwendung des Initialwerts bestimmt.
2. Als Nächstes wird der berechnete Wert gemäß der Spezifikation berechnet (zum Beispiel wird bei einem span mit position: absolute das berechnete display in block geändert).
3. Dann wird das Layout berechnet, was zum verwendeten Wert führt.
4. Schließlich wird der verwendete Wert gemäß den Einschränkungen des lokalen Umfelds transformiert, was zum tatsächlichen Wert führt.

Aufgelöster Wert

Der aufgelöste Wert einer Eigenschaft ist der Wert nach Anwendung der aktiven Stylesheets und der Auflösung aller grundlegenden Berechnungen, die diese Werte möglicherweise enthalten. Die Methode getComputedStyle() gibt ein Live-Objekt CSSStyleDeclaration zurück, das die aufgelösten Werte aller CSS-Eigenschaften enthält, die auf ein bestimmtes Element angewendet werden. Jeder aufgelöste Wert ist entweder der berechnete Wert oder der verwendete Wert, abhängig von der Eigenschaft.

Historisch gesehen lieferte getComputedStyle() den berechneten Wert eines Elements oder Pseudoelements. Mit der Weiterentwicklung von CSS entwickelte sich auch das Konzept des „berechneten Werts“, aber die von getComputedStyle() zurückgegebenen Werte mussten aus Gründen der Rückwärtskompatibilität mit vorhandenen 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 liefert pro Eigenschaft Details.

CSS 2.0 definierte berechneter Wert als den letzten Schritt in der Berechnung einer Eigenschaft. CSS 2.1 führte die eigenständige Definition von „verwendeter Wert“ 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 von Layout abhängen (z.B. display, font-size oder line-height), sind die berechneten Werte und verwendeten Werte identisch. Die folgende Liste enthält die CSS 2.1 Eigenschaften, die vom Layout abhängen und daher einen unterschiedlichen berechneten und verwendeten Wert haben (entnommen aus 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-Kaskadierung und Vererbung Modul
• CSS-Syntax Modul