Verarbeitung von CSS-Werteigenschaften

Eigenschaftswerte

Jeder Stil, der auf ein Element oder ein Pseudo-Element angewendet wird, basiert auf einer einzelnen CSS-Wert-Deklaration. Jede CSS-Eigenschaft hat nur einen Wert. Der angewendete Wert wird basierend auf den gewerteten Werten aller Deklarationen dieser Eigenschaft bestimmt, die auf dieses Element oder Pseudo-Element angewendet werden, wobei der einzelne angewendete Wert von der Eigenschaftsdeklaration stammt, die im Kaskaden-Sortierordnungs basierend auf dem Kaskadenalgorithmus am höchsten eingestuft ist.

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

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

Die Kaskade legt fest, welcher Wert angewendet werden soll, wenn mehrere sich widersprechende Stile auf dasselbe Element abzielen. Der Kaskadenalgorithmus definiert, wie Benutzeragenten Eigenschaftswerte kombinieren, die aus verschiedenen Quellen, Bereichen und/oder Ebenen stammen. 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 Ursprungs (origin) oder Ebenen mit niedrigerer Priorität eine größere specificity hat.

Bestimmte Eigenschaften erben Werte von ihren übergeordneten Elementen, es sei denn, sie werden ausdrücklich überschrieben. Vererbung kann erfolgen, 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 übergeordneten Elements gesetzt. Wenn die Eigenschaft nicht vererbt wird, wird ihr Wert auf den Anfangswert für dieses Element gesetzt.

Nach Anwendung der Kaskaden Regeln und der schrittweisen Standardisierung der Werte stellt der Browser sicher, dass die visuelle Darstellung mit dem verarbeiteten CSS übereinstimmt.

Übersicht über die Verarbeitung

Bevor auf die einzelnen Wertestufen eingegangen wird, ist es wichtig, die drei Hauptphasen zu verstehen, die bei der Wertverarbeitung auftreten: Filtern, Kaskadieren und Defaulten.

Filtern

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

• Die Deklaration gehört zu einem Stylesheet, das derzeit auf dieses Dokument angewendet wird
• Beliebige bedingte Regeln (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 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, indem er die Deklaration mit dem ungültigen Eigenschaftsnamen ignoriert oder „herausfiltert“:

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

Nach Abschluss des Filtervorgangs hat jedes Element null oder mehr deklarierte Werte für jede CSS-Eigenschaft. Diese deklarierten Werte sind der Ausgangspunkt für die Kaskadierungs-Verarbeitungsphase.

Kaskadieren

Die Kaskade löst Konflikte, wenn mehrere Deklarationen auf dieselbe Eigenschaft bei demselben Element angewendet werden. Kaskade sortiert Deklarationen mit Hilfe des Kaskaden-Sortierordnungs Algorithmus.

Zum Beispiel passen beide font-size Deklarationen auf <p class="large">CSS is fun!</p>, aber die zweite Deklaration wird angewendet, da sie eine höhere specificity hat. Beide Deklarationen haben den Ursprung 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 auf jedem Element. Dieser Wert wird in der nächsten Verarbeitungsphase verwendet; Defaulting.

Defaulting

Defaulting stellt sicher, dass jede Eigenschaft auf jedem Element einen Wert hat. Dies beinhaltet das Anwenden von Standardeigenschaftswerten, wenn keine CSS-Deklarationen explizit diesen Eigenschaftswert festlegen. Dies beinhaltet:

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

Als Ergebnis des Defaultings ist garantiert, dass jede Eigenschaft einen spezifizierten Wert hat.

Beachten Sie, dass explizite Defaulting-Schlüsselwörter (initial, inherit, unset, revert, revert-layer) ebenfalls zu ihren entsprechenden Werten 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 spezifische Eigenschaft können diese Werte gleich oder ungleich sein. Wenn zum Beispiel Ihre umfangreiche Code-Basis das CSS p { font-size: 1.25em; } und Ihr HTML <p class="large">CSS is fun!</p> beinhaltet, welche Größe wird der Absatz haben? Der font-size Wert durchläuft ein paar Schritte, 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 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 Benutzeragent) und werden während der Filterphase identifiziert.

Der <Weiterführend in unserem Beispiel>, in dem unser Stylesheet einen Vorkommen von p { font-size: 1.25em; } enthält und das Dokument, welches mit diesem Stylesheet verknüpft ist, <p class="large">CSS is fun!</p> enthält, können möglicherweise andere font-size Deklarationen auf demselben Absatz angewendet werden. Das Benutzeragent-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 mag 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 haben alle drei Deklarationen als unser <p>-Element class="large" hat, 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 pro Element.

Von unseren deklarierten Werten gewinnen Autorenstile über Benutzeragentenstile. Innerhalb des gleichen Ursprungs gewinnen Stile mit höherer Spezifität über Stile mit niedrigerer Spezifität. In diesem Fall wäre der kaskadierte Wert font-size: 2em aus dem Ursprungsdokument des Autors 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 Defaulting-Prozess bestimmt wird.

Spezifizierter Wert

Der spezifizierte Wert ist das Ergebnis des Defaulting-Prozesses. Für jede Eigenschaft auf jedem Element ist er garantiert vorhanden. Der spezifizierte Wert wird wie folgt bestimmt:

1. Wenn es einen kaskadierten Wert gibt, ist dieser kaskadierte Wert der spezifizierte Wert.
2. Gibt es keinen kaskadierten Wert und die Eigenschaft wird vererbt, ist der spezifizierte Wert der berechnete Wert des übergeordneten Elements.
3. Gibt es keinen kaskadierten Wert und die Eigenschaft wird nicht vererbt, ist der spezifizierte Wert der Anfangswert der Eigenschaft.

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

font-size: 2em;

Für Eigenschaften ohne kaskadierte Werte bestimmt der Defaulting-Prozess den Wert. Wenn zum Beispiel color nicht spezifiziert ist, wird 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

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

• Für vererbte Eigenschaften wird der Anfangswert nur auf dem Wurzelelement verwendet, das kein übergeordnetes Element hast, wenn kein kaskadierter Wert vorhanden ist.
• Für nicht vererbte Eigenschaften wird der Anfangswert auf allen Elementen verwendet, wenn kein kaskadierter Wert vorhanden ist.

Sie können den Anfangswert explizit festsetzen, indem Sie das initial Schlüsselwort verwenden.

Berechneter Wert

Der berechnete Wert einer Eigenschaft ist derjenige, der bei der Vererbung vom Elternteil an das Kind weitergegeben wird. Er ist das Ergebnis, nachdem relative Einheiten, benutzerdefinierte Eigenschaften und anderes zu absoluten Werten aufgelöst worden sind, aber bevor layout-spezifische Informationen berücksichtigt werden.

Der berechnete Wert wird aus dem spezifizierten Wert berechnet, indem:

1. Mit den speziellen Werten inherit, initial, revert, revert-layer und unset umgegangen wird.
2. Die Berechnung durchgeführt wird, die nötig ist, um den in der "Berechneter Wert"-Zeile in der Eigenschaftendefinitionstabelle beschriebenen Wert zu erreichen.

Die Berechnung, um den berechneten Wert einer Eigenschaft zu erreichen, beinhaltet typischerweise die Umwandlung relativer Werte (wie z.B. em-Einheiten oder Prozent) in absolute Werte. Wenn beispielsweise 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).

Für einige Eigenschaften (solche, bei denen Prozentwerte relativ zu etwas sind, das eine Layoutbestimmung erfordert, wie width, margin-right, text-indent und top) werden prozentual spezifizierte Werte zu prozentual berechneten Werten umgewandelt. Auch Einheitenlose Zahlen, die bei der Eigenschaft line-height angegeben sind, werden zum berechneten Wert, wie spezifiziert. Die relativen Werte, die im berechneten Wert verbleiben, werden zu absoluten Werten, wenn der verwendete Wert bestimmt wird.

Verwendeter Wert

Der verwendete Wert ist der Wert der Eigenschaft, der nach allen Berechnungen am berechneten Wert durchgeführt wurden und er mit layout-spezifischen Details verfeinert wurde (z. B. Prozentwerte, die in tatsächliche Pixelwerte aufgelöst 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 Kurzschreibweisen (z. B. background) sind konsistent mit denen ihrer Komponenteneigenschaften (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 Pixel-Wert, auch wenn der spezifizierte Wert der Eigenschaft mit Prozentangaben oder Schlüsselwortwerten eingestellt wurde.

Wenn wir drei Container-Elemente mit ihrer Breite auf auto, 50% und inherit setzen:

<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, gibt das Abrufen der width mit window.getComputedStyle(el)["width"]; einen absoluten Längenwert px zurück:

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

Gerenderte Werte

Der gerenderte Wert wird als tatsächlicher Wert bezeichnet, während der über Skripte 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 Näherungen angewendet wurden. Er ist der endgültige gerenderte Wert, wie er vom Browser implementiert wurde, einschließlich Anpassungen für Rendering-Eigenheiten oder -Einschränkungen. Zum Beispiel könnte ein Benutzeragent, der nur Ränder mit ganzer Pixelbreite rendern kann, die Dicke des Randes auf die nächstgelegene ganze Zahl runden.

Die Berechnung beinhaltet diese Schritte:

1. Zuerst wird der spezifizierte Wert basierend auf dem Ergebnis des Kaskadierungs, der Vererbung oder durch die Verwendung des Anfangswerts bestimmt.
2. Dann wird der berechnete Wert gemäß der Spezifikation berechnet (zum Beispiel wird bei einem span mit position: absolute das berechnete display zu block geändert).
3. Anschließend wird das Layout berechnet, was zum verwendeten Wert führt.
4. Schließlich wird der verwendete Wert gemäß der lokalen Umgebungseinschränkungen 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 grundlegender Berechnungen, die diese Werte enthalten können. Die Methode getComputedStyle() gibt ein Live-Objekt CSSStyleDeclaration zurück, das die aufgelösten Werte aller CSS-Eigenschaften enthält, die auf ein spezifiziertes Element angewendet wurden. 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 Pseudo-Elements zurück. Mit der Evolution von CSS entwickelte sich auch das Konzept des „berechneten Werts“, aber die Werte, die von getComputedStyle() zurückgegeben wurden, mussten gleich bleiben, um die Rückwärtskompatibilität mit bereitgestellten Skripten zu gewährleisten. Diese Werte sind die „aufgelösten Werte“.

Für die meisten Eigenschaften ist der aufgelöste Wert der berechnete Wert, aber für einige wenige legacy Eigenschaften (einschließlich width und height), ist es der verwendete Wert. Die CSSOM-Spezifikation liefert detailspezifische Details pro Eigenschaft.

CSS 2.0 definierte den berechneten Wert als den letzten Schritt in einer Eigenschaftsberechnung. CSS 2.1 führte die eindeutige Definition des „verwendeten Werts“ ein. Ein Element konnte dann explizit die Breite/Höhe seines Elternteils erben, dessen Computed-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 umfasst die CSS 2.1-Eigenschaften, die vom Layout abhängen, und daher einen anderen berechneten Wert und verwendeten Wert haben (entnommen 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-Kaskade und Vererbung Modul
• CSS-Syntax Modul