Verarbeitung von CSS-Werteigenschaften

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

Jeder Eigenschaftswert stammt aus einem einzigen Paar von Eigenschaft-Wert; ein einzelner Wert wird von jeder Eigenschaft angewendet. Selbst wenn der Wert eine durch Kommata getrennte Liste von Werten ist, kam diese Liste von einer einzigen Deklaration.

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

Bestimmte Eigenschaften erben Werte von ihren Elternelementen, es sei denn, sie werden explizit überschrieben. Vererbung tritt auf, wenn für eine spezifische Eigenschaft eines Elements keine Stilinformationen 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.

Die Kaskade bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Kaskade-Algorithmus definiert, wie Benutzer-Agenten Eigenschaftswerte aus verschiedenen Quellen, Bereichen und/oder Ebenen kombinieren. Wenn ein Selektor ein Element trifft, wird der spezifizierte Wert der Eigenschaft aus dem Ursprung mit der höchsten Priorität angewendet, selbst wenn ein Selektor aus einem Ursprung oder einer Ebene mit geringerer Priorität eine größere specificity hat.

Nachdem die Kaskadieregeln angewendet und die Werte Schritt für Schritt aufgelöst wurden, sorgt der Browser dafür, dass die visuelle Präsentation dem verarbeiteten CSS entspricht.

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. Wenn Ihr großer Code-Bestand beispielsweise das CSS p { font-size: 1.25em; } enthält und Ihr HTML <p>CSS is fun!</p> enthält, welche Größe wird der Absatz haben? Der font-size-Wert durchläuft einige Phasen, um vom spezifizierten em-Wert zum gerenderten px-Wert zu gelangen.

• Initialwert
• spezifizierter Wert
• berechneter Wert
• verwendeter Wert

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

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

Für vererbte Eigenschaften wird der Initialwert nur am Wurzelelement verwendet, solange kein spezifizierter Wert angegeben ist.

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

Sie können den Initialwert explizit durch das 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 gemäß den folgenden Regeln bestimmt:

1. Wenn das Stylesheet des Dokuments einen Wert für die Eigenschaft explizit angibt, wird der gegebene 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 obigen Bedingungen zutrifft, wird der Initialwert 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 berechneter 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 vor der Berücksichtigung layout-spezifischer Informationen.

Der berechnete Wert wird vom spezifizierten Wert berechnet durch:

1. Bearbeitung der speziellen Werte inherit, initial, revert, revert-layer, und unset.
2. Durchführung der Berechnungen, die erforderlich sind, um den in der Zeile "Berechneter Wert" in der Definitionstabelle der Eigenschaft beschriebenen Wert zu erreichen.

Die Berechnung, die benötigt wird, um den berechneten Wert einer Eigenschaft zu erreichen, beinhaltet normalerweise die Umwandlung relativer Werte (wie derer in em-Einheiten oder Prozentsätzen) in absolute Werte. Wenn ein Element beispielsweise die spezifizierten Werte font-size: 16px und padding-top: 2em hat, 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 möglicherweise ein Layout erfordert, um bestimmt zu werden, wie width, margin-right, text-indent und top), verwandeln sich prozentspezifizierte Werte in prozentberechnete Werte. Zudem werden einheitslose Zahlen, die auf der line-height-Eigenschaft angegeben sind, zum berechneten Wert, wie angegeben. Die relativen Werte, die im berechneten Wert verbleiben, werden absolut, wenn der verwendete Wert bestimmt wird.

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

Der verwendete 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. Prozentsätze, die zu tatsächlichen Pixelwerten aufgelöst werden).

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 Pixelwert, auch wenn der spezifizierte Wert der Eigenschaft mit Prozentsätzen oder Schlüsselwortwerten gesetzt wurde.

Wenn wir drei Containerelemente mit ihrer Breite 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änge px-Wert:

Verä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 der tatsächliche Wert genannt, während der Wert, der über das Skript abgerufen wird, der aufgelöste Wert genannt wird.

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 für Rendering-Spezifika oder Einschränkungen. Zum Beispiel kann ein Benutzer-Agent, der nur Rahmen mit einer ganzen Zahlenanzahl an Pixelbreiten rendern kann, die Dicke des Rahmens auf die nächste ganze Zahl runden.

Die Berechnung umfasst diese Schritte:

1. Zuerst wird der spezifizierte Wert bestimmt, basierend auf dem Ergebnis der Kaskade, der Vererbung oder durch den Initialwert.
2. Als Nächstes wird der berechnete Wert gemäß der Spezifikation berechnet (zum Beispiel wird ein span mit position: absolute seine berechnete display-Eigenschaft auf 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 nach Anwendung aktiver Stylesheets und Auflösung jeglicher grundlegenden Berechnungen, die diese Werte enthalten könnten. Die getComputedStyle()-Methode gibt ein Live-Objekt CSSStyleDeclaration 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, abhängig von der Eigenschaft.

Historisch gesehen gab getComputedStyle() den berechneten Wert eines Elements oder Pseudo-Elements zurück. Mit der Weiterentwicklung von CSS entwickelte sich auch das Konzept des "berechneten Wertes", aber die von getComputedStyle() zurückgegebenen Werte mussten aus Gründen der Abwä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 wenige Legacy-Eigenschaften (einschließlich width und height) ist es der verwendete Wert. Die CSSOM-Spezifikation bietet 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 des "verwendeten Wertes" 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 vom Layout abhängen (z.B. display, font-size oder line-height), sind die berechneten Werte und die verwendeten Werte gleich. Die folgende Liste enthält die CSS 2.1 Eigenschaften, die vom Layout abhängen, und daher einen unterschiedlichen berechneten Wert 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

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