`initial` CSS-Schlüsselwort

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2015 browserübergreifend verfügbar.

Das initial CSS-Schlüsselwort wendet den initialen (oder Standard-)Wert einer Eigenschaft auf ein Element an. Es kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzschreibweise all. Wenn all auf initial gesetzt ist, können alle CSS-Eigenschaften in einem Schritt auf ihre jeweiligen Anfangswerte zurückgesetzt werden, anstatt jede einzeln wiederherzustellen.

Bei vererbten Eigenschaften kann der Anfangswert unerwartet sein. Sie sollten stattdessen die Schlüsselwörter inherit, unset, revert, revert-layer oder revert-rule in Betracht ziehen.

Beispiele

Grundlegende Nutzung

In diesem Beispiel verwenden wir das initial Schlüsselwort, um die Eigenschaftswerte color und font-size eines Elements zurückzusetzen.

HTML

html

<p>
  This text is red and large.
  <em
    >This text is in the initial color (typically black) and initial size
    (typically 16px).</em
  >
  This is red and large again.
</p>

CSS

Wir setzen color und font-size am <p>-Element fest und setzen diese Eigenschaften dann am <em>-Element auf initial, um sie zurückzusetzen.

css

p {
  color: red;
  font-size: 2rem;
}

em {
  color: initial;
  font-size: initial;
}

Ergebnis

Mit dem initial Schlüsselwort in diesem Beispiel werden die color- und font-size-Werte auf dem em-Element auf die Anfangswerte für color und font-size zurückgesetzt.