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. Welcher Wert angewendet wird, bestimmen die kaskadierten Werte aller Deklarationen dieser Eigenschaft, die für das Element oder Pseudoelement gelten. Der angewendete Wert stammt aus der Eigenschaftsdeklaration, die gemäß dem Kaskadenalgorithmus in der Sortierreihenfolge der Kaskade am höchsten steht.

Wenn mehrere deklarierte Werte aus mehreren Deklarationen für dasselbe Element denselben oder unterschiedliche Eigenschaftswerte angeben, muss jeder Eigenschaftswert dennoch aus einem einzigen Paar aus Eigenschaftsname und Wert stammen. Denn von jeder Eigenschaft wird nur ein Wert angewendet – auch wenn dieser Wert eine durch Kommas getrennte Liste von Werten ist.

Um zu bestimmen, welcher deklarierte Wert angewendet wird, erfasst und verarbeitet der User Agent alle Stile aus verschiedenen Quellen, etwa Inline-Stile sowie interne und externe Stylesheets.

Die Kaskade bestimmt, welcher Wert angewendet wird, wenn mehrere widersprüchliche Stile dasselbe Element betreffen. Der Kaskadenalgorithmus legt fest, wie User Agents Eigenschaftswerte aus unterschiedlichen Quellen, Gültigkeitsbereichen und/oder Ebenen zusammenführen. Wenn ein Selektor auf ein Element zutrifft, wird der deklarierte Wert der Eigenschaft aus der Herkunft mit der höchsten Priorität angewendet – selbst wenn ein Selektor aus einer Herkunft oder Ebene mit niedrigerer Priorität eine höhere Spezifität aufweist.

Bestimmte Eigenschaften erben Werte von ihren Elternelementen, sofern diese nicht ausdrücklich überschrieben werden. Vererbung kann stattfinden, wenn für eine bestimmte Eigenschaft eines Elements keine Stilinformationen vorliegen. Ist die Eigenschaft vererbbar, wird ihr Wert auf den berechneten Wert des Elternelements gesetzt. Ist sie nicht vererbbar, wird ihr Wert auf den Initialwert für dieses Element gesetzt.

Nachdem der Browser die Regeln der Kaskadierung und die Standardwerte schrittweise angewendet hat, stellt er sicher, dass die visuelle Darstellung dem verarbeiteten CSS entspricht.

Überblick über die Verarbeitung

Bevor die einzelnen Wertstufen näher betrachtet werden, sollten Sie die drei Hauptphasen der Wertverarbeitung kennen: Filterung, Kaskadierung und Festlegung von Standardwerten.

Filterung

Bei der Filterung werden alle Deklarationen ermittelt, die für ein Element gelten. Eine Deklaration gilt nur dann für ein Element, wenn:

• die Deklaration zu einem Stylesheet gehört, das derzeit für dieses Dokument gilt;
• alle bedingten Regeln (wie @media oder @supports), die die Deklaration enthalten, derzeit erfüllt sind;
• die Deklaration zu einer Stilregel gehört, deren Selektor auf das Element zutrifft;
• die Deklaration syntaktisch gültig ist: Der Browser erkennt den Eigenschaftsnamen, und der Wert entspricht der für diese Eigenschaft erwarteten Syntax.

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

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

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

Nach Abschluss der Filterung hat jedes Element für jede CSS-Eigenschaft null oder mehr deklarierte Werte. Diese deklarierten Werte bilden den Ausgangspunkt für die Kaskadierung.

Kaskadierung

Die Kaskade löst Konflikte, wenn mehrere Deklarationen für dieselbe Eigenschaft desselben Elements gelten. Dazu ordnet sie die Deklarationen anhand des Algorithmus für die Sortierreihenfolge der Kaskade.

Beispielsweise treffen beide Deklarationen für font-size auf <p class="large">CSS is fun!</p> zu. Die zweite Deklaration wird jedoch angewendet, weil sie eine höhere Spezifität hat. Beide Deklarationen stammen vom Autor, aber der zweite Selektor hat die Spezifität 0-1-1, der erste dagegen 0-0-1:

p {
  font-size: 1em;
}

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

Nach der Kaskadierung bestimmt der Browser für jede Eigenschaft jedes Elements den kaskadierten Wert. Dieser Wert wird im nächsten Verarbeitungsschritt verwendet: der Festlegung von Standardwerten.

Festlegung von Standardwerten

Die Festlegung von Standardwerten stellt sicher, dass jede Eigenschaft jedes Elements einen Wert hat. Dazu werden Standardwerte für Eigenschaften angewendet, deren Wert nicht ausdrücklich durch CSS-Deklarationen festgelegt wurde. Dies umfasst:

• das Festlegen geerbter Werte für vererbbare Eigenschaften;
• das Festlegen von Initialwerten für nicht vererbbare Eigenschaften.

Dadurch hat jede Eigenschaft garantiert einen festgelegten Wert.

Beachten Sie, dass auch explizite Schlüsselwörter für Standardwerte (initial, inherit, unset, revert, revert-layer) in die entsprechenden Werte aufgelöst werden, um den festgelegten Wert zu bestimmen.

Verarbeitungsschritte

Alle Elemente im abgeflachten Elementbaum des Dokuments haben deklarierte, kaskadierte, festgelegte, berechnete, verwendete und tatsächliche Werte. Für eine bestimmte Eigenschaft können diese Werte gleich oder unterschiedlich sein. Angenommen, Ihre umfangreiche Codebasis enthält das CSS p { font-size: 1.25em; } und Ihr HTML enthält <p class="large">CSS is fun!</p>: Wie groß wird der Absatz dargestellt? Der Wert von font-size durchläuft mehrere Schritte, bevor aus dem in em festgelegten Wert ein in px gerenderter Wert wird.

Die Schritte der Wertverarbeitung sind deklarierter Wert, kaskadierter Wert, festgelegter Wert, berechneter Wert, verwendeter Wert und tatsächlicher Wert. Anhand dieser Werte wird der endgültige gerenderte Wert bestimmt.

Deklarierter Wert

Ein deklarierter Wert ist jeder syntaktisch gültige Wert aus einer Deklaration, die für ein Element gilt. Ein Element kann für jede Eigenschaft null oder mehr deklarierte Werte haben. Diese Werte stammen aus Stylesheets (des Autors, des Benutzers oder des User Agents) und werden bei der Filterung ermittelt.

In unserem Beispiel enthält das Stylesheet p { font-size: 1.25em; }, und das Dokument, das dieses Stylesheet einbindet, enthält <p class="large">CSS is fun!</p>. Es könnten weitere Deklarationen für font-size vorhanden sein, die möglicherweise für denselben Absatz gelten. Das Stylesheet des User Agents 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;
}

Unsere Stylesheets können viele weitere Deklarationen für font-size enthalten. Zu deklarierten Werten werden jedoch nur Deklarationen, deren Selektoren auf das Element zutreffen. Da unser <p>-Element in diesem Beispiel class="large" hat, sind alle drei Deklarationen deklarierte Werte für dieses Element.

Kaskadierter Wert

Der kaskadierte Wert ist der deklarierte Wert, der sich in der Kaskade durchsetzt. Pro Eigenschaft und Element gibt es höchstens einen kaskadierten Wert.

Von unseren deklarierten Werten setzen sich Stile des Autors gegenüber Stilen des User Agents durch. Innerhalb derselben Herkunft setzen sich Stile mit höherer Spezifität gegenüber solchen mit niedrigerer Spezifität durch. In diesem Fall ist font-size: 2em der kaskadierte Wert: Er stammt vom Autor und hat die Spezifität 0-1-1.

font-size: 2em;

Wenn es für eine Eigenschaft keine deklarierten Werte gibt, gibt es auch keinen kaskadierten Wert. Der festgelegte Wert dieser Eigenschaft wird dann bei der Festlegung von Standardwerten bestimmt.

Festgelegter Wert

Der festgelegte Wert ist das Ergebnis der Festlegung von Standardwerten. Er existiert garantiert für jede Eigenschaft jedes Elements. Er wird wie folgt bestimmt:

1. Gibt es einen kaskadierten Wert, ist dieser der festgelegte Wert.
2. Gibt es keinen kaskadierten Wert und ist die Eigenschaft vererbbar, ist der berechnete Wert des Elternelements der festgelegte Wert.
3. Gibt es keinen kaskadierten Wert und ist die Eigenschaft nicht vererbbar, ist der Initialwert der Eigenschaft der festgelegte Wert.

In unserem Beispiel haben wir einen kaskadierten Wert von 2em. Dieser wird daher zum festgelegten Wert:

font-size: 2em;

Für Eigenschaften ohne kaskadierten Wert wird der Wert bei der Festlegung von Standardwerten bestimmt. Wenn beispielsweise color nicht festgelegt ist, wird color vom berechneten Wert des Elternelements geerbt, da die Eigenschaft vererbbar ist. Wenn margin nicht festgelegt ist, wird der initial-Wert 0 verwendet, da margin keine vererbbare Eigenschaft ist:

color: inherit;
margin: 0;

Initialwert

Der Initialwert einer Eigenschaft ist der Standardwert, der in der Definitionstabelle der Eigenschaft in der Spezifikation aufgeführt ist. Der Initialwert wird bei der Festlegung von Standardwerten in folgenden Fällen verwendet:

• Bei vererbbaren Eigenschaften wird der Initialwert nur für das Wurzelelement verwendet, das kein Elternelement hat, wenn kein kaskadierter Wert existiert.
• Bei nicht vererbbaren Eigenschaften wird der Initialwert für alle Elemente verwendet, wenn kein kaskadierter Wert existiert.

Sie können den Initialwert ausdrücklich mit dem Schlüsselwort initial festlegen.

Berechneter Wert

Der berechnete Wert einer Eigenschaft ist der Wert, der bei der Vererbung vom Eltern- an das Kindelement übertragen wird. Er ergibt sich, nachdem beispielsweise relative Einheiten und benutzerdefinierte Eigenschaften in absolute Werte aufgelöst wurden, aber bevor layoutspezifische Informationen berücksichtigt werden.

Der berechnete Wert wird aus dem festgelegten Wert ermittelt, indem:

1. die speziellen Werte inherit, initial, revert, revert-layer und unset verarbeitet werden;
2. die Berechnungen durchgeführt werden, die nötig sind, um den in der Zeile „Computed value“ der Definitionstabelle der Eigenschaft beschriebenen Wert zu erhalten.

Um den berechneten Wert einer Eigenschaft zu ermitteln, werden in der Regel relative Werte (etwa Werte in em oder Prozentangaben) in absolute Werte umgerechnet. Wenn für ein Element beispielsweise font-size: 16px und padding-top: 2em festgelegt sind, ist der berechnete Wert von padding-top 32px (das Doppelte der Schriftgröße).

Bei einigen Eigenschaften – solchen, deren Prozentangaben sich auf eine Größe beziehen, die möglicherweise erst durch das Layout bestimmt werden kann, etwa width, margin-right, text-indent und top – bleiben als Prozentangaben festgelegte Werte jedoch auch berechnete Prozentwerte. Außerdem werden einheitenlose Zahlen, die für line-height festgelegt wurden, unverändert zum berechneten Wert. Relative Werte, die im berechneten Wert erhalten bleiben, werden bei der Ermittlung des verwendeten Werts zu absoluten Werten.

Verwendeter Wert

Der verwendete Wert ist der Wert einer Eigenschaft, nachdem alle Berechnungen am berechneten Wert durchgeführt und layoutspezifische Details berücksichtigt wurden (z. B. wenn Prozentangaben in konkrete Pixelwerte aufgelöst werden).

Jede CSS-Eigenschaft hat einen verwendeten Wert. Die verwendeten Werte von Größenangaben (z. B. width oder line-height) werden in Pixeln angegeben. Die verwendeten Werte von Kurzschreibweisen (z. B. background) stimmen mit denen ihrer einzelnen Eigenschaften (z. B. background-color oder background-size) sowie mit position und float überein.

Der verwendete Wert für width oder inline-size eines Elements ist ein Pixelwert, selbst wenn der festgelegte Wert der Eigenschaft eine Prozentangabe oder ein Schlüsselwort ist.

Angenommen, wir haben drei Containerelemente, deren Breite auf auto, 50% beziehungsweise inherit gesetzt 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);

Obwohl die drei festgelegten Werte auto, 50% und inherit Schlüsselwörter beziehungsweise ein <percentage>-Wert sind, liefert das Auslesen von width 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 ihr verwendeter Wert, nachdem gegebenenfalls erforderliche Näherungen vorgenommen wurden. Er ist der endgültige gerenderte Wert, wie ihn der Browser umsetzt, einschließlich Anpassungen aufgrund von Besonderheiten oder Einschränkungen beim Rendering. Beispielsweise kann ein User Agent, der Rahmen nur mit einer ganzzahligen Pixelbreite rendern kann, die Rahmenstärke auf die nächste ganze Zahl runden.

Die Berechnung umfasst folgende Schritte:

1. Zunächst wird der festgelegte Wert anhand des Ergebnisses der Kaskadierung, der Vererbung oder mithilfe des Initialwerts bestimmt.
2. Anschließend wird der berechnete Wert gemäß der Spezifikation ermittelt (beispielsweise ändert sich bei einem span mit position: absolute der berechnete Wert von display zu block).
3. Danach wird das Layout berechnet. Daraus ergibt sich der verwendete Wert.
4. Schließlich wird der verwendete Wert entsprechend den Einschränkungen der lokalen Umgebung angepasst. Daraus ergibt sich der tatsächliche Wert.

Aufgelöster Wert

Der aufgelöste Wert einer Eigenschaft ist der Wert, der sich nach der Anwendung der aktiven Stylesheets und der Auflösung grundlegender Berechnungen ergibt, die in diesen Werten enthalten sein können. Die Methode getComputedStyle() gibt ein aktuelles CSSStyleDeclaration-Objekt zurück, das die aufgelösten Werte aller CSS-Eigenschaften enthält, die auf ein bestimmtes Element angewendet werden. Je nach Eigenschaft ist der aufgelöste Wert entweder der berechnete Wert oder der verwendete Wert.

Ursprünglich gab getComputedStyle() den berechneten Wert eines Elements oder Pseudoelements zurück. Mit der Weiterentwicklung von CSS änderte sich auch das Konzept des „berechneten Werts“. Aus Gründen der Abwärtskompatibilität mit bereits eingesetzten Skripten mussten die von getComputedStyle() zurückgegebenen Werte jedoch gleich bleiben. Diese Werte werden als „aufgelöste Werte“ bezeichnet.

Bei den meisten Eigenschaften ist der aufgelöste Wert der berechnete Wert. Bei einigen älteren Eigenschaften (darunter width und height) ist er jedoch der verwendete Wert. Die CSSOM-Spezifikation enthält Einzelheiten zu den jeweiligen Eigenschaften.

CSS 2.0 definierte den berechneten Wert als letzten Schritt bei der Berechnung einer Eigenschaft. CSS 2.1 führte eine eigenständige Definition des „verwendeten Werts“ ein. Damit konnte ein Element die Breite oder Höhe seines Elternelements ausdrücklich erben, obwohl dessen berechneter Wert eine Prozentangabe ist. Bei CSS-Eigenschaften, die nicht vom Layout abhängen (z. B. display, font-size oder line-height), sind der berechnete und der verwendete Wert gleich. Die folgende Liste enthält die CSS-2.1-Eigenschaften, die vom Layout abhängen und daher unterschiedliche berechnete und verwendete Werte haben (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
• Modul CSS-Kaskadierung und Vererbung
• Modul CSS-Syntax