Verarbeitung von CSS-Eigenschaftswerten

Der Wert jeder CSS-Eigenschaft stammt aus der Deklaration mit der größten specificity. Wenn zwei oder mehr Deklarationen mit derselben Spezifität unterschiedliche Eigenschaftswerte für dasselbe Element bereitstellen, wird der Deklarationswert angewendet, dessen Selektor das größte algorithmische Gewicht hat.

Jeder Eigenschaftswert stammt aus einem einzelnen Eigenschaft-Wert-Paar; es wird ein einzelner Wert aus jeder Eigenschaft angewendet. Selbst wenn der Wert eine kommagetrennte Liste von Werten ist, stammt diese Werteliste aus einer einzigen Deklaration.

Um zu bestimmen, welcher spezifizierte Wert angewendet wird, sammelt und verarbeitet der User Agent alle Stile aus verschiedenen Quellen, wie z.B. Inline-Stilen sowie internen und externen Stylesheets.

Bestimmte Eigenschaften erben Werte von ihren Elternelementen, sofern sie nicht ausdrücklich überschrieben werden. Vererbung tritt auf, 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.

Der Cascade-Algorithmus bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Cascade-Algorithmus definiert, wie User Agents Eigenschaftswerte aus verschiedenen Quellen, Kontexten und/oder Ebenen kombinieren. Wenn ein Selektor mit einem Element übereinstimmt, wird der spezifizierte Wert der Eigenschaft aus dem Ursprung mit der höchsten Priorität angewendet, selbst wenn ein Selektor von einem Ursprung oder einer Ebene mit niedrigerer Priorität größere specificity aufweist.

Nach der Anwendung der Cascade-Regeln und der schrittweisen Auflösung von Werten stellt der Browser sicher, dass die visuelle Darstellung mit dem verarbeiteten CSS übereinstimmt.

Alle Elemente, die Teil des abgeflachten Elementbaums des Dokuments sind, besitzen deklarierte, kaskadierte, spezifizierte, berechnete, verwendete und aktuelle 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; } und Ihr HTML <p>CSS macht Spaß!</p> enthält, welche Größe wird der Absatz haben? Der font-size-Wert durchläuft einige Stufen, um vom spezifizierten em-Wert zum gerenderten px-Wert zu gelangen.

• Anfangswert
• Spezifizierter Wert
• Berechneter Wert
• Verwendeter Wert

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

Der Anfangswert einer Eigenschaft ist der Standardwert, der in der Definitionstabelle in der Spezifikation aufgeführt ist. Die Verwendung des Anfangswertes hängt davon ab, ob eine Eigenschaft vererbt wird oder nicht:

• Für vererbte Eigenschaften wird der Anfangswert nur auf das Wurzelelement angewendet, solange kein spezifizierter Wert angegeben ist.
• Für nicht vererbte Eigenschaften wird der Anfangswert auf alle Elemente angewendet, solange kein spezifizierter Wert angegeben ist.

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

Der spezifizierte Wert ist der Wert, der ursprünglich in der CSS-Datei oder durch das style-Attribut zugewiesen wurde. Der spezifizierte Wert für eine gegebene Eigenschaft wird nach den folgenden Regeln bestimmt:

1. Wenn das Stylesheet des Dokuments explizit einen Wert für die Eigenschaft angibt, wird der angegebene Wert verwendet.
2. Wenn das Stylesheet des Dokuments keinen Wert angibt, es sich jedoch um eine vererbte Eigenschaft handelt, wird der Wert vom Elternelement übernommen.
3. Wenn keine der oben genannten Regeln zutrifft, wird der Anfangswert des Elements verwendet.

Im Beispiel p { font-size: 1.25em; } ist der spezifizierte Wert 1.25em, es sei denn, der Codebestand enthält eine font-size-Deklaration mit größerer specificity.

Der berechnete Wert einer Eigenschaft ist der Wert, der während der Vererbung von Eltern zu Kindern übertragen wird. Es ist das Ergebnis nach der Auflösung von relativen Einheiten und benutzerdefinierten Eigenschaften in absolute Werte, jedoch bevor layout-spezifische Informationen berücksichtigt werden.

Der berechnete Wert wird aus dem spezifizierten Wert berechnet durch:

1. Das Behandeln der speziellen Werte inherit, initial, revert, revert-layer, und unset.
2. Das Durchführen der Berechnung, die erforderlich ist, um den Wert zu erreichen, der in der Linie „Berechneter Wert“ in der Definitionstabelle der Eigenschaft beschrieben ist.

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

Jedoch werden für einige Eigenschaften (diese, bei denen Prozentsätze relativ zu etwas anderem sind, was das Layout zur Bestimmung erfordert, wie width, margin-right, text-indent und top), prozentual spezifizierte Werte zu prozentual berechneten Werten. Außerdem werden einheitslose Zahlen, die für die Eigenschaft line-height angegeben sind, zum berechneten Wert, so wie sie angegeben sind. Die relativen Werte, die im berechneten Wert verbleiben, werden zu absoluten, wenn der verwendete Wert bestimmt wird.

Angenommen, p { font-size: 1.25em; }, wenn em 16px ist, wird die berechnete Schriftgröße für einen Absatz 20px betragen.

Der verwendete Wert ist der Wert der Eigenschaft, nachdem alle Berechnungen auf den berechneten Wert angewendet wurden und er mit layout-spezifischen Details (z.B. in tatsächliche Pixelwerte aufgelöste Prozentsätze) verfeinert wurde.

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

Der verwendete Wert für die width oder inline-size eines Elements ist ein Pixelwert, selbst wenn der spezifizierte Wert der Eigenschaft mit Prozentsätzen oder Schlüsselwortwerten festgelegt 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 mit window.getComputedStyle(el)["width"]; ein absolutes Längenmaß im px-Wert:

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

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

Der tatsächliche Wert einer Eigenschaft ist der verwendete Wert dieser Eigenschaft, nachdem alle erforderlichen Approximationen angewendet wurden. Es ist der endgültige gerenderte Wert, wie er vom Browser implementiert wird, einschließlich Anpassungen für Rendering-„Macken“ oder -Einschränkungen. Zum Beispiel kann ein User Agent, der nur Rahmen mit einer ganzen Pixelbreite rendern kann, die Dicke des Rahmens auf die nächste ganze Zahl runden.

Die Berechnung umfasst folgende Schritte:

1. Zuerst wird der spezifizierte Wert basierend auf dem Ergebnis der Kaskadierung, Vererbung, oder dem Anfangswert bestimmt.
2. Anschließend wird der berechnete Wert gemäß der Spezifikation berechnet (zum Beispiel wird ein span mit position: absolute seine berechnete display in block ändern).
3. Dann wird das Layout berechnet, was zum verwendeten Wert führt.
4. Schließlich wird der verwendete Wert gemäß den Einschränkungen der lokalen Umgebung transformiert, was zum tatsächlichen Wert führt.

Der aufgelöste Wert einer Eigenschaft ist der Wert, nachdem aktive Stylesheets angewendet wurden und alle grundlegenden Berechnungen, die diese Werte enthalten können, aufgelöst sind. Die Methode getComputedStyle() gibt ein Live-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, je nach Eigenschaft.

Historisch gesehen hat getComputedStyle() den berechneten Wert eines Elements oder Pseudo-Elements zurückgegeben. Als CSS sich weiterentwickelte, änderte sich auch das Konzept des „berechneten Wertes“, 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“.

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 den berechneten Wert als den letzten Schritt in der Berechnung einer Eigenschaft. CSS 2.1 führte die detaillierte Definition des "verwendeten Wertes" ein. Ein Element konnte dann explizit die Breite/Höhe seines Elternteils vererben, 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 _vom Layout abhängen und daher unterschiedliche berechnete und verwendete Werte haben (übernommen 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

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