CSS-Eigenschaftswert-Verarbeitung

Eigenschaftswerte

Jeder Stil, der auf ein Element oder Pseudo-Element angewendet wird, basiert auf einer einzigen CSS-Eigenschaftsdeklaration. Jede CSS-Eigenschaft hat nur einen Wert. Der angewendete Wert wird durch die kaskadierten Werte aller Deklarationen dieser Eigenschaft bestimmt, die auf das Element oder Pseudo-Element zutreffen. Der einzige angewendete Wert stammt aus der Eigenschaftsdeklaration, die in der Kaskaden-Sortierreihenfolge nach dem Kaskade-Algorithmus den höchsten Rang einnimmt.

Wenn es mehrere deklarierten Werte gibt, mit mehreren Deklarationen, die denselben oder unterschiedliche Eigenschaftswerte für dasselbe Element bereitstellen, muss jeder Eigenschaftswert dennoch aus einem einzigen Eigenschafts-Namen-Wert-Paar stammen, da nur ein einziger Wert aus jeder Eigenschaft angewendet wird, selbst wenn der Wert eine durch Kommas getrennte Liste von Werten ist.

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

Die Kaskade bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Kaskade-Algorithmus definiert, wie User-Agents Eigenschaftswerte aus verschiedenen Quellen, Bereichen und/oder Ebenen kombinieren. Wenn ein Selektor ein Element trifft, wird der deklarierte Wert der Eigenschaft von der Herkunft mit der höchsten Präzedenz angewendet, selbst wenn ein Selektor aus einer niedrigeren Präzedenz-Herkunft oder Ebenen eine größere Spezifität hat.

Bestimmte Eigenschaften erben Werte von ihren Elternelementen, es sei denn, sie werden ausdrücklich überschrieben. Vererbung kann auftreten, wenn keine Stilinformationen für eine spezifische Eigenschaft auf einem Element 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 initialen Wert für dieses Element gesetzt.

Nach der Anwendung der Kaskaden-Regeln und der Standardwerte Schritt für Schritt stellt der Browser sicher, dass die visuelle Darstellung den verarbeiteten CSS entspricht.

Verarbeitungsüberblick

Bevor wir in die einzelnen Wertstufen eintauchen, ist es wichtig, die drei Hauptphasen zu verstehen, die bei der Wertverarbeitung auftreten: Filtern, Kaskadieren und Standardisieren.

Filtern

Filtern ist der Prozess des Identifizierens aller Deklarationen, die auf jedes Element zutreffen. Eine Deklaration gilt nur 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 wahr sind.
• Die Deklaration zu einer Stilregel gehört, deren Selektor das Element trifft.
• Die Deklaration syntaktisch gültig ist: Der Eigenschaftsname wird vom Browser erkannt und der Wert entspricht der erwarteten Syntax für die Eigenschaft.

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

In diesem Beispiel werden nur die font-size- und font-weight-Deklarationen verarbeitet. Der CSS-Parser filtert die Fehler heraus, ignoriert oder „filtert“ die Deklaration mit dem ungültigen Eigenschaftsnamen aus:

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

Nach Abschluss des Filtervorgangs hat jedes Element null oder mehr deklarierten Werte für jede CSS-Eigenschaft. Diese deklarierten Werte sind der Ausgangspunkt für die Kaskadierung-Verarbeitungsphase.

Kaskadierung

Die Kaskade löst Konflikte, wenn mehrere Deklarationen auf dieselbe Eigenschaft auf demselben Element zutreffen. Die Kaskade sortiert Deklarationen mit Hilfe des Kaskaden-Sortierordnungs-Algorithmus.

Zum Beispiel treffen beide font-size-Deklarationen auf <p class="large">CSS is fun!</p> zu, aber die zweite Deklaration wird angewendet, da sie eine höhere Spezifität hat. Beide Deklarationen haben Autor-Herkunft, aber der zweite Selektor hat eine Spezifität von 0-1-1, während der erste 0-0-1 hat:

p {
  font-size: 1em;
}

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

Nach der Kaskadierung bestimmt der Browser den kaskadierten Wert für jede Eigenschaft auf jedem Element. Dies ist der Wert, der in der nächsten Verarbeitungsstufe verwendet wird; das Standardisieren.

Standardisieren

Standardisieren sorgt dafür, dass jede Eigenschaft auf jedem Element einen Wert hat. Dies beinhaltet die Anwendung von Standard-Eigenschaftswerten, wenn keine CSS-Deklarationen diesen Eigenschaftswert explizit setzen. Dies beinhaltet:

• Einstellen von geerbten Werten für vererbte Eigenschaften
• Einstellen von Initialwerten für nicht-vererbte Eigenschaften

Als Ergebnis des Standardisierens wird garantiert, dass jede Eigenschaft einen spezifizierten Wert hat.

Beachten Sie, dass explizite Standardisierungsschlüsselwörter (initial, inherit, unset, revert, revert-layer) ebenfalls in ihre entsprechenden Werte aufgelöst werden, um den spezifizierten Wert zu bestimmen.

Verarbeitungsphasen

Alle Elemente, die Teil des flachen Elementbaums des Dokuments sind, haben deklarierten, kaskadierten, spezifizierten, berechneten, verwendeten und tatsächlichen Werte. Für eine spezifische Eigenschaft können diese Werte gleich oder unterschiedlich sein. Zum Beispiel: Wenn Ihr großer Code-Bestand das CSS p { font-size: 1.25em; } enthält und Ihr HTML <p class="large">CSS is fun!</p> enthält, wie groß wird der Absatz sein? Der font-size-Wert durchläuft einige Phasen, um vom angegebenen em-Wert zum gerenderten px-Wert zu gelangen.

Die Wertverarbeitungsstufen sind Deklarierter Wert, Kaskadierter Wert, Spezifizierter Wert, Berechneter Wert, Verwendeter Wert und Tatsächlicher Wert. Diese Werte werden verwendet, um den endgültigen gerenderten Wert zu bestimmen.

Deklarierter Wert

Ein deklarierter Wert ist jeder syntaktisch gültige Wert aus einer Deklaration, die auf ein Element zutrifft. Ein Element kann null oder mehr deklarierte Werte für jede Eigenschaft haben. Diese Werte stammen aus Stylesheets (Autor, Benutzer oder User-Agent) und werden während der Filterung identifiziert.

Bleiben wir bei unserem Beispiel, in dem unser Stylesheet eine Instanz von p { font-size: 1.25em; } enthält und das Dokument, das mit diesem Stylesheet verlinkt ist, <p class="large">CSS is fun!</p> umfasst, können andere font-size-Deklarationen potenziell auf denselben Absatz zutreffen. Das User-Agent-Stylesheet könnte font-size: 1em für alle Absätze festlegen, während eine andere Autor-Deklaration 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;
}

Es könnte viele andere font-size-Deklarationen in unseren Stylesheets geben, aber nur Deklarationen, deren Selektoren das Element treffen, werden zu deklarierten Werten. In diesem Beispiel, da unser <p>-Element die Klasse large hat, sind alle drei Deklarationen deklarierte Werte für dieses Element.

Kaskadierter Wert

Der kaskadierte Wert ist der deklarierte Wert, der die Kaskade gewinnt. Es gibt höchstens einen kaskadierten Wert pro Eigenschaft und Element.

Von unseren deklarierten Werten gewinnen Autorenstile gegenüber User-Agent-Stilen. Innerhalb desselben Ursprungs gewinnen Stile mit höherer Spezifität gegenüber Stilen mit niedrigerer Spezifität. In diesem Fall wäre der kaskadierte Wert font-size: 2em, aus dem Autor-Ursprung mit der Spezifität 0-1-1:

font-size: 2em;

Wenn es keine deklarierten Werte für eine Eigenschaft gibt, gibt es keinen kaskadierten Wert, was bedeutet, dass der spezifizierte Wert für diese Eigenschaft durch den Standardisierungsprozess bestimmt wird.

Spezifizierter Wert

Der spezifizierte Wert ist das Ergebnis des Standardisierungsprozesses. Für jede Eigenschaft auf jedem Element ist garantiert, dass es existiert. Der spezifizierte Wert wird wie folgt bestimmt:

1. Wenn es einen kaskadierten Wert gibt, ist der kaskadierte Wert der spezifizierte Wert.
2. Wenn es keinen kaskadierten Wert gibt und die Eigenschaft vererbt wird, ist der spezifizierte Wert der berechnete Wert des Elternelements.
3. Wenn es keinen kaskadierten Wert gibt und die Eigenschaft nicht vererbt wird, ist der spezifizierte Wert der Initialwert der Eigenschaft.

In unserem Beispiel, da wir einen kaskadierten Wert von 2em haben, wird dies der spezifizierte Wert:

font-size: 2em;

Für Eigenschaften ohne kaskadierte Werte bestimmt der Standardisierungsprozess den Wert. Wenn beispielsweise color nicht angegeben ist, wird color vom berechneten Wert des Elternelements geerbt, da es eine vererbte Eigenschaft ist. Wenn margin nicht angegeben ist, wird der initial-Wert von 0 verwendet, da margin keine vererbte Eigenschaft ist:

color: inherit;
margin: 0;

Initialwert

Der Initialwert einer Eigenschaft ist der Standardwert, wie er in ihrer Definitionstabelle in der Spezifikation aufgeführt ist. Der Initialwert wird während des Standardisierens verwendet, wenn:

• Für vererbte Eigenschaften wird der Initialwert nur auf dem Wurzelelement verwendet, das kein Elternelement hat, wenn kein kaskadierter Wert existiert.
• Für nicht-vererbte Eigenschaften wird der Initialwert auf alle Elemente angewendet, wenn kein kaskadierter Wert existiert.

Sie können den Initialwert explizit festlegen, indem Sie das initial-Schlüsselwort verwenden.

Berechneter Wert

Der berechnete Wert einer Eigenschaft ist der Wert, der von Eltern zu Kind während der Vererbung weitergegeben wird. Es ist das Ergebnis nach der Auflösung von Dingen wie 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, indem:

1. Die speziellen Werte inherit, initial, revert, revert-layer und unset behandelt werden.
2. Die Berechnung durchgeführt wird, die erforderlich ist, um den Wert zu erreichen, der in der Zeile "Berechneter Wert" in der Definitionstabelle der Eigenschaft beschrieben ist.

Die Berechnung, die zur Erreichung eines berechneten Werts einer Eigenschaft erforderlich ist, umfasst typischerweise die Umwandlung relativer Werte (wie beispielsweise die in em-Einheiten oder Prozentsätzen) in absolute Werte. Wenn beispielsweise ein Element angegebene Werte font-size: 16px und padding-top: 2em hat, dann ist der berechnete Wert von padding-top 32px (doppelt so groß wie die Schriftgröße).

Allerdings werden bei einigen Eigenschaften (solche, bei denen Prozentsätze sich auf etwas beziehen, das Layout zur Bestimmung erfordern kann, wie width, margin-right, text-indent und top) prozentual spezifizierte Werte in anteilig berechnete Werte umgewandelt. Darüber hinaus wird die Einheitlose-Zahl bei der line-height-Eigenschaft als berechneter Wert, wie angegeben, verwendet. Die relativen Werte, die im berechneten Wert verbleiben, werden absolut, wenn der verwendete Wert bestimmt wird.

Verwendeter Wert

Der verwendete Wert ist der Wert der Eigenschaft, nachdem alle Berechnungen am berechneten Wert durchgeführt wurden und er mit layout-spezifischen Details verfeinert wurde (z. B. Prozentsätze in tatsächliche Pixelwerte umgewandelt).

Jede CSS-Eigenschaft hat einen verwendeten Wert. Die verwendeten Werte von Dimensionen (z. B. width oder line-height) sind in Pixel. Die verwendeten Werte von Kurzeigenschaften (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, selbst wenn der angegebene Wert der Eigenschaft mit Prozentsätzen oder Schlüsselwortwerten gesetzt wurde.

Wenn wir drei Containerelemente haben, deren Breite auf auto, 50% und 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 spezifizierten Werte, auto, 50% und inherit, Schlüsselwort- und Prozentwerte 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 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 der verwendeten Wert dieser Eigenschaft, nachdem notwendige Näherungen angewendet wurden. Es ist der endgültige gerenderte Wert, wie er vom Browser implementiert wurde, einschließlich Anpassungen für Rendering-Besonderheiten oder -Einschränkungen. Beispielsweise kann ein User-Agent, der nur Ränder mit einer ganzen Anzahl von Pixeln rendern kann, die Dicke des Randes auf die nächste ganze Zahl runden.

Die Berechnung umfasst diese Schritte:

1. Zuerst wird der spezifizierte Wert basierend auf dem Ergebnis der Kaskadierung, Vererbung oder unter Verwendung des Initialwerts bestimmt.
2. Als nächstes wird der berechnete Wert gemäß der Spezifikation berechnet (zum Beispiel wird bei einem span mit position: absolute das berechnete display in block geändert).
3. Dann wird das Layout berechnet, was zu dem 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.

Aufgelöster Wert

Der aufgelöste Wert einer Eigenschaft ist der Wert nach der Anwendung aktiver Stylesheets und der Auflösung grundlegender Berechnungen dieser Werte. 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, abhängig von der Eigenschaft.

Historisch gesehen gab getComputedStyle() den berechneten Wert eines Elements oder Pseudo-Elements zurück. Mit der Entwicklung von CSS entwickelte sich auch das Konzept des „berechneten Werts“, aber die von getComputedStyle() zurückgegebenen Werte mussten für die Rückwärtskompatibilität mit bereits vorhandenen 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 detailspezifische Angaben.

CSS 2.0 definierte den berechneten Wert als den letzten Schritt in der Berechnung einer Eigenschaft. CSS 2.1 führte die separate Definition des „verwendeten Werts“ ein. Ein Element konnte dann die Breite/Höhe seines Elternteils explizit erben, dessen berechneter Wert ein Prozentsatz war. Für CSS-Eigenschaften, die nicht von 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 doch von Layout abhängen und daher einen unterschiedlichen berechneten und verwendeten Wert haben (entnommen aus den CSS 2.1-Änderungen: Spezifizierte, berechnete und tatsächliche Werte):

• 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
• CSS-Kaskadierungs- und Vererbungsmodul
• CSS-Syntaxmodul