Verarbeitung von CSS-Werte

Für jedes Element in einem Dokumentbaum weist der Browser jedem CSS-Eigenschaftswert, der auf dieses Element anwendbar ist, einen Wert zu. Der gerenderte Wert jeder CSS-Eigenschaft für ein gegebenes Element oder eine Box ist das Ergebnis einer Berechnung, die auf Stylesheet-Definitionen, Vererbung, dem Kaskadenmechanismus, Abhängigkeiten, Umrechnung von Einheiten und der Anzeigumgebung basiert. Dieser Leitfaden bietet einen Überblick über die Verarbeitungsschritte, die angewendet werden, um zu definieren, wie jeder CSS-Wert letztendlich gerendert wird, indem wichtige Konzepte wie festgelegte, berechnete, verwendete und tatsächliche Werte untersucht werden.

Eigenschaftswerte

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 einzelnen Eigenschaft-Werte-Paar; es wird ein einzelner Wert von jeder Eigenschaft angewendet. Auch wenn der Wert eine durch Kommas getrennte Werteliste ist, stammt diese Liste von einer einzigen Deklaration.

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

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

Die Kaskade bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Kaskadenalgorithmus definiert, wie Benutzeragenten Eigenschaftswerte kombinieren, die aus verschiedenen Quellen, Bereichen und/oder Schichten stammen. Wenn ein Selektor mit einem Element übereinstimmt, wird der spezifizierte Wert der Eigenschaft von der Quelle mit der höchsten Priorität angewendet, auch wenn ein Selektor aus einer niederrangigen Quelle oder Schicht eine höhere specificity aufweist.

Nachdem die Kaskadenregeln angewendet und die Werte Schritt für Schritt aufgelöst wurden, stellt der Browser sicher, dass die visuelle Darstellung mit dem verarbeiteten CSS übereinstimmt.

Verarbeitungsstufen

Alle Elemente, die Teil des im Dokument abgeflachten Elementbaums sind, haben 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 umfangreicher Code-Bestand 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 em spezifizierten Wert zum gerenderten px-Wert zu gelangen.

Eigenschaftswerte
Verarbeitungsstufen
Gerenderte Werte
- Tatsächlicher Wert
- Aufgelöster Wert
Siehe auch

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

Anfangswert

Der Anfangswert einer Eigenschaft ist der Standardwert, wie er in ihrer Definitionstabelle in der Spezifikation aufgeführt ist. Der Gebrauch des Anfangswerts hängt davon ab, ob eine Eigenschaft vererbt wird oder nicht:

Für vererbte Eigenschaften wird der Anfangswert nur am Wurzelelement verwendet, 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 festlegen, indem Sie das initial Schlüsselwort verwenden.

Hinweis: Der Anfangswert kann im Abschnitt der formalen Syntax jeder CSS-Eigenschaftsreferenzseite gefunden werden. Zum Beispiel ist der Anfangswert von font-size medium. Der Anfangswert sollte nicht mit dem Wert verwechselt werden, der im Stylesheet des Browsers angegeben ist.

Spezifizierter Wert

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 gegebene Eigenschaft wird nach folgenden Regeln bestimmt:

Wenn das Stylesheet des Dokuments explizit einen Wert für die Eigenschaft angibt, wird der gegebene Wert verwendet.
Wenn das Stylesheet des Dokuments keinen Wert angibt, es sich jedoch um eine vererbte Eigenschaft handelt, wird der Wert vom übergeordneten Element übernommen.
Wenn keine der oben genannten Bedingungen 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.

Berechneter Wert

Der berechnete Wert einer Eigenschaft ist der Wert, der während der Vererbung von Eltern auf 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 vom spezifizierten Wert berechnet durch:

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

Die Berechnungen zur Erreichung eines berechneten Werts einer Eigenschaft umfassen typischerweise die Umwandlung relativer Werte (wie die in em-Einheiten oder Prozentangaben) in absolute Werte. Zum Beispiel, wenn ein Element spezifizierte 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 (jene, bei denen Prozentangaben relativ zu etwas sind, das möglicherweise ein Layout zur Bestimmung erfordert, wie width, margin-right, text-indent und top), werden prozentual spezifizierte Werte zu prozentual berechneten Werten. Außerdem werden bei der line-height-Eigenschaft angegebene zahlenlose Werte zum berechneten Wert, wie spezifiziert. Die relativen Werte, die im berechneten Wert verbleiben, werden absolut, wenn der verwendete Wert bestimmt wird.

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

Verwendeter Wert

Der verwendete Wert ist der Eigenschaftswert, nachdem alle Berechnungen am berechneten Wert durchgeführt wurden, und er wurde mit layout-spezifischen Details verfeinert (z.B. Prozentsätze, 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 Kurzschreibeigenschaften (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üsselwerten festgelegt wurde.

Wenn wir drei Containerelemente mit ihrer Breite als auto, 50% und inherit festgelegt 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 Prozent-Werte sind, gibt das Abrufen der width mit window.getComputedStyle(el)["width"]; einen absoluten Längen px-Wert zurück:

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

Gerenderte Werte

Der gerenderte Wert wird als der tatsächliche Wert bezeichnet, während der über Skripte abgerufene Wert der aufgelöste Wert genannt wird.

Tatsächlicher Wert

Der tatsächliche Wert einer Eigenschaft ist der verwendete Wert dieser Eigenschaft, nachdem alle notwendigen Annäherungen vorgenommen wurden. Es ist der endgültig gerenderte Wert, wie er vom Browser implementiert wird, einschließlich Anpassungen für Darstellungsbesonderheiten oder -einschränkungen. Beispielsweise kann ein Benutzeragent, der nur Ränder mit ganzzahliger Pixelbreite rendern kann, die Dicke des Rands auf die nächstgelegene ganze Zahl runden.

Die Berechnung umfasst diese Schritte:

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

Aufgelöster Wert

Der aufgelöste Wert einer Eigenschaft ist der Wert, nachdem aktive Stylesheets angewendet wurden und alle grundlegenden Berechnungen, die diese Werte möglicherweise enthalten, aufgelöst wurden. Die Methode getComputedStyle() gibt ein Live-Objekt vom Typ 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 Pseudoelements zurück. Da sich CSS weiterentwickelte, tat dies auch das Konzept des "berechneten Werts", aber die von getComputedStyle() zurückgegebenen Werte mussten aus Gründen der Abwärtskompatibilität mit bereitgestellten Skripten unverändert 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 er der verwendete Wert. Die CSSOM-Spezifikation bietet detailspezifische 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 deutliche 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 auf das Layout angewiesen sind (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 (entnommen aus CSS 2.1 Änderungen: Spezifizierte, berechnete und tatsächliche Werte):

Siehe auch

CSS-Werte zur Steuerung der Vererbung: inherit, initial, revert, revert-layer und unset
CSS-Kaskadierungs- und Vererbungsmodul
CSS-Syntaxmodul