all

Die `all`-Eigenschaft in CSS setzt alle Eigenschaften des ausgewählten Elements zurück, mit Ausnahme der Eigenschaften ` direction ` und ` unicode-bidi `, die die Textrichtung steuern.

.module {
  all: unset;
}

Der Sinn dahinter ist, das Zurücksetzen von Stilen auf Komponentenebene zu ermöglichen. Manchmal ist es weitaus einfacher, mit dem Styling von Grund auf neu zu beginnen, als gegen alles anzukämpfen, was bereits vorhanden ist.

Werte

• initial: setzt alle Eigenschaften des ausgewählten Elements auf ihre Anfangswerte zurück, wie sie in der CSS-Spezifikation definiert sind.
• inherit: das ausgewählte Element erbt das gesamte Styling seines Elternelements, einschließlich Stile, die normalerweise nicht vererbbar sind.
• unset: das ausgewählte Element erbt alle vererbbaren Werte, die vom Elternelement übergeben werden. Wenn kein vererbbarer Wert verfügbar ist, wird für jede Eigenschaft der Anfangswert aus der CSS-Spezifikation verwendet.

Einige Eigenschaften haben keinen explizit in der Spezifikation definierten Anfangswert und erlauben stattdessen dem User-Agenten, den Anfangswert festzulegen – ` color ` und ` font-family ` sind zwei Beispiele. Wenn `all: initial;` oder `all: unset;` angewendet wird, wird der Standardwert des User-Agenten als `initial`-Wert für diese Eigenschaften verwendet.

`all` wird als „Kurzschreibungs“-Eigenschaft betrachtet, da sie uns erlaubt, die Werte *aller* CSS-Eigenschaften auf einmal mit einer einzigen Deklaration zu steuern. Anders als bei den meisten Kurzschreibungs-Eigenschaften gibt es jedoch keine praktische „Langschreibungs“-Version und keine Untereigenschaften.

Demo

Siehe den CSS-Tab für Kommentare, die angeben, welche Eigenschaften vererbbar sind. Beachten Sie, dass beim Verwenden des `inherit`-Werts die `div` *jede* Eigenschaft von ihrem Elternelement erbt, einschließlich `width`, `padding` und `border`, die normalerweise nicht vererbt werden.

Siehe den Pen all property demo von CSS-Tricks (@css-tricks) auf CodePen.

Weitere Informationen

• all im W3C CSS Cascading and Inheritance Level 4 Editor’s Draft
• CSS2 Full Property Table: zeigt die Vererbbarkeit aller CSS2-Eigenschaften. Die CSS3-Spezifikation ist in mehrere Teile unterteilt und ist auf der Table of Specifications indiziert.
• Getting Acquainted with Initial: mehr Details zum `initial`-Wert.
• Resetting style using ‘all: unset’ in Firefox 27 (2013) von Cameron McCormack

Browser-Unterstützung