Verarbeitung von CSS-Eigenschaftswerten

Der Wert jeder CSS-Eigenschaft stammt aus der Deklaration mit der höchsten 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 einzigen Eigenschaft-Wert-Paar; es wird ein einzelner Wert aus jeder Eigenschaft angewendet. Selbst wenn der Wert eine durch Kommas getrennte Liste von Werten ist, stammt diese Werteliste aus einer einzigen Deklaration.

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

Bestimmte Eigenschaften erben Werte von ihren Elternelementen, es sei denn, sie werden ausdrücklich überschrieben. Vererbung tritt auf, wenn keine Stilinformationen für eine bestimmte Eigenschaft eines Elements vorhanden sind. 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 Initialwert für dieses Element gesetzt.

Der Cascade bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Cascade-Algorithmus definiert, wie Benutzeragenten Eigenschaftswerte kombinieren, die aus verschiedenen Quellen, Bereichen und/oder Ebenen stammen. 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 aus einem weniger bedeutenden Ursprung oder Ebene eine größere specificity hat.

Nachdem die Cascade-Regeln angewendet und die Werte schrittweise aufgelöst wurden, stellt der Browser sicher, dass die visuelle Darstellung den verarbeiteten CSS widerspiegelt.

Alle Elemente, die Teil des abgeflachten Elementbaums eines Dokuments sind, haben deklarierte, kaskadierte, spezifizierte, berechnete, genutzte und tatsächliche Werte. Für eine bestimmte Eigenschaft können diese Werte gleich oder unterschiedlich sein. Zum Beispiel, wenn Ihr großer Codebase das CSS p { font-size: 1.25em; } enthält 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 em-spezifizierten Wert zum gerenderten px-Wert zu gelangen.

• Initialwert
• Spezifizierter Wert
• Berechneter Wert
• Genutzter Wert

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

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

Für vererbte Eigenschaften wird der Initialwert nur auf das Wurzelelement angewendet, solange kein spezifizierter Wert bereitgestellt wird.

• Für nicht vererbte Eigenschaften wird der Initialwert auf alle Elemente angewendet, solange kein spezifizierter Wert bereitgestellt wird.

Sie können den Initialwert 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 wird. Der spezifizierte Wert für eine bestimmte Eigenschaft wird gemäß der folgenden Regeln bestimmt:

1. Wenn das Stylesheet des Dokuments ausdrücklich einen Wert für die Eigenschaft angibt, wird der angegebene Wert verwendet.
2. Wenn das Stylesheet des Dokuments keinen Wert angibt, aber es sich um eine vererbte Eigenschaft handelt, wird der Wert vom Elternelement übernommen.
3. Wenn keiner der oben genannten Fälle zutrifft, wird der Initialwert des Elements verwendet.

Im Beispiel p { font-size: 1.25em; } ist der spezifizierte Wert 1.25em, es sei denn, der Code 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 Kind übertragen wird. Es ist das Ergebnis, nachdem Dinge wie relative Einheiten und benutzerdefinierte Eigenschaften in absolute Werte aufgelöst wurden, jedoch 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 in der „Berechneten Wert“-Zeile in der Definitionstabelle der Eigenschaft zu erreichen.

Die Berechnung, die erforderlich ist, um einen berechneten Wert einer Eigenschaft zu erreichen, umfasst in der Regel die Umwandlung relativer Werte (wie die in em-Einheiten oder Prozentsätzen) in absolute Werte. Beispielsweise, wenn ein Element die spezifizierten 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 (diejenigen, bei denen Prozentsätze relativ zu etwas sind, das ein Layout zur Bestimmung erfordert, wie width, margin-right, text-indent und top), werden Prozentwerte zu prozentual berechneten Werten. Zusätzlich werden einheitenlose Zahlen, die für die line-height-Eigenschaft angegeben sind, der berechnete Wert, wie angegeben. Die relativen Werte, die im berechneten Wert verbleiben, werden zu absoluten Werten, wenn der genutzte Wert bestimmt wird.

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

Der genutzte Wert ist der Wert der Eigenschaft, nachdem alle Berechnungen am berechneten Wert durchgeführt wurden und dieser mit Layout-spezifischen Details verfeinert wurde (z. B. in tatsächliche Pixelwerte aufgelöste Prozentsätze).

Jede CSS-Eigenschaft hat einen genutzten Wert. Die genutzten Werte von Dimensionen (z. B. width oder line-height) sind in Pixeln. Die genutzten Werte von Kurzschreibweise-Eigenschaften (z. B. background) sind konsistent mit denen ihrer Komponenteneigenschaften (z. B. background-color oder background-size) und mit position und float.

Der genutzte 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üsselwerten gesetzt wurde.

Wenn wir drei Containerelemente mit ihren Breiten 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"]; einen absoluten Längenwert in px:

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

Der dargestellte Wert wird als tatsächlicher Wert bezeichnet, während der Wert, der über Skripte abgerufen wird, als aufgelöster Wert bezeichnet wird.

Der tatsächliche Wert einer Eigenschaft ist der genutzte 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 Rendering-Quirks oder -Einschränkungen. Beispielsweise kann ein Benutzeragent, der nur Rahmen mit einer ganzen Pixelbreite rendern kann, die Dicke des Rahmens auf die nächste ganze Zahl aufrunden.

Die Berechnung umfasst folgende Schritte:

1. Zuerst wird der spezifizierte Wert basierend auf dem Ergebnis von Cascade, Vererbung oder unter Verwendung des Initialwerts bestimmt.
2. Als nächstes wird der berechnete Wert gemäß der Spezifikation berechnet (zum Beispiel wird ein span mit position: absolute seine berechnete display auf block ändern).
3. Dann wird das Layout berechnet, was zum genutzten Wert führt.
4. Schließlich wird der genutzte Wert gemäß den Einschränkungen der lokalen Umgebung transformiert, was zu dem tatsächlichen Wert führt.

Der aufgelöste Wert einer Eigenschaft ist der Wert, nachdem aktive Stylesheets angewendet und alle grundlegenden Berechnungen dieser Werte aufgelöst wurden. Die Methode getComputedStyle() gibt ein live CSSStyleDeclaration-Objekt 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 genutzte Wert, abhängig von der Eigenschaft.

Historisch gesehen hat getComputedStyle() den berechneten Wert eines Elements oder Pseudo-Elements zurückgegeben. Als sich CSS weiterentwickelte, tat dies auch das Konzept des „berechneten Werts“, aber die von getComputedStyle() zurückgegebenen Werte mussten aus Gründen der Rückwärtskompatibilität mit 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 genutzte Wert. Die CSSOM-Spezifikation bietet detaillierte Informationen pro Eigenschaft.

CSS 2.0 definierte berechneten Wert als den letzten Schritt in der Berechnung einer Eigenschaft. Mit CSS 2.1 wurde die eindeutige Definition des „genutzten Werts“ eingeführt. Ein Element konnte dann explizit 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 genutzten Werte gleich. Die folgende Liste enthält die CSS 2.1-Eigenschaften, die vom Layout abhängen, und daher unterschiedliche berechnete und genutzte Werte 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

• CSS-Werte zur Steuerung der Vererbung: inherit, initial, revert, revert-layer, und unset
• Modul für CSS-Cascade und -Vererbung
• CSS-Syntaxmodul