all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die all Shorthand-CSS-Eigenschaft setzt alle Eigenschaften eines Elements zurück, außer unicode-bidi, direction und CSS Custom Properties. Sie kann Eigenschaften auf ihre ursprünglichen oder geerbten Werte setzen oder auf Werte, die in einer anderen Cascade-Ebene oder einem anderen Stylesheet-Ursprung angegeben sind.

Probieren Sie es aus

Bestandteile der Eigenschaft

Diese Eigenschaft ist ein Shorthand für alle CSS-Eigenschaften, außer für unicode-bidi, direction und Custom Properties.

Syntax

css
/* Global values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

Die all-Eigenschaft wird mit einem der globalen CSS-Schlüsselwortwerte angegeben. Beachten Sie, dass keiner dieser Werte die Eigenschaften unicode-bidi und direction beeinflusst.

Werte

initial

Gibt an, dass alle Eigenschaften des Elements auf ihre ursprünglichen Werte zurückgesetzt werden sollen.

inherit

Gibt an, dass alle Eigenschaften des Elements auf ihre geerbten Werte gesetzt werden sollen.

unset

Gibt an, dass alle Eigenschaften des Elements auf ihre geerbten Werte gesetzt werden sollen, wenn sie standardmäßig vererbbar sind, oder auf ihre ursprünglichen Werte, wenn nicht.

revert

Gibt ein Verhalten basierend auf dem Stylesheet-Ursprung an, zu dem die Deklaration gehört:

  • Wenn die Regel dem Autor-Ursprung gehört, setzt der revert-Wert die Kaskade auf Benutzerebene zurück, sodass die spezifizierten Werte so berechnet werden, als ob keine Regeln auf der Autorenebene für das Element angegeben waren. Für revert umfasst der Autor-Ursprung auch die Override- und Animationsursprünge.
  • Wenn die Regel dem Benutzer-Ursprung gehört, setzt der revert-Wert die Kaskade auf die Benutzeragent-Ebene zurück, sodass die spezifizierten Werte so berechnet werden, als ob keine Regeln auf der Autoren- oder Benutzerebene für das Element angegeben waren.
  • Wenn die Regel dem Benutzeragent-Ursprung gehört, verhält sich der revert-Wert wie unset.
revert-layer

Gibt an, dass alle Eigenschaften des Elements die Kaskade auf eine vorherige Kaskadenschicht zurücksetzen sollen, falls eine existiert. Wenn keine andere Kaskadenschicht existiert, werden die Eigenschaften des Elements auf die übereinstimmende Regel in der aktuellen Schicht oder auf einen vorherigen Stil-Ursprung zurückgesetzt.

Formale Definition

AnfangswertEs gibt keinen praktischen Initialwert dafür.
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie der angegebene Wert wird er auf alle Eigenschaften angewandt, für die dies eine Kurzschreibweise ist.
Animationstypwie jede der Kurzschreibweisen Eigenschaften (alle Eigenschaften außer unicode-bidi und direction)

Formale Syntax

all = 
initial |
inherit |
unset |
revert |
revert-layer

Beispiele

In diesem Beispiel enthält die CSS-Datei Styling für das <blockquote>-Element sowie Styling für das übergeordnete <body>-Element. In den Ergebnissen wird gezeigt, wie sich das Styling des <blockquote>-Elements ändert, wenn verschiedene Werte für die all-Eigenschaft in der blockquote-Regel angewendet werden.

HTML

html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

CSS

css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}

Ergebnisse

A. Keine all-Eigenschaft

In diesem Szenario wird im blockquote-Selektor keine all-Eigenschaft gesetzt. Das <blockquote>-Element verwendet das Standardstyling des Browsers, das ihm einen Rand, eine bestimmte Hintergrundfarbe und Textfarbe verleiht, wie im Stylesheet angegeben. Es verhält sich auch wie ein Block-Element: Der darauf folgende Text befindet sich darunter.

B. all: initial

Mit der all-Eigenschaft, die im blockquote-Selektor auf initial gesetzt ist, verwendet das <blockquote>-Element nicht mehr das Standardstyling des Browsers: Es ist jetzt ein Inline-Element (ursprünglicher Wert), seine background-color ist transparent (ursprünglicher Wert), seine font-size ist medium, und seine color ist black (ursprünglicher Wert).

C. all: inherit

In diesem Fall verwendet das <blockquote>-Element nicht das Standardstyling des Browsers. Stattdessen erbt es die Stilwerte vom übergeordneten <body>-Element: Es ist jetzt ein Block-Element (geerbter Wert), seine background-color ist #F0F0F0 (geerbter Wert), seine font-size ist small (geerbter Wert), und seine color ist blue (geerbter Wert).

D. all: unset

Wenn der Wert unset auf die all-Eigenschaft in der blockquote-Regel angewendet wird, verwendet das <blockquote>-Element nicht das Standardstyling des Browsers. Weil background-color keine geerbte Eigenschaft ist und font-size und color geerbte Eigenschaften sind, ist das <blockquote>-Element jetzt ein Inline-Element (ursprünglicher Wert), seine background-color ist transparent (ursprünglicher Wert), aber seine font-size ist weiterhin small (geerbter Wert), und seine color ist blue (geerbter Wert).

E. all: revert

Wenn die all-Eigenschaft in der blockquote-Regel auf revert gesetzt wird, wird die blockquote-Regel als nicht existent angesehen, und die Stilwerte werden aus den für das übergeordnete <body>-Element angewendeten Werten geerbt. So wird das <blockquote>-Element als Block-Element gestaltet, mit background-color #F0F0F0, font-size small und color blue - alle Werte geerbt aus der body-Regel.

F. all: revert-layer

In der CSS-Datei sind keine Kaskadenschichten definiert, daher übernimmt das <blockquote>-Element die Stilwerte aus der passenden body-Regel. Das <blockquote>-Element wird hier als Block-Element gestaltet, mit background-color #F0F0F0, font-size small und color blue - alle Werte geerbt aus der body-Regel. Dieses Szenario ist ein Beispiel dafür, dass all, wenn es auf revert-layer gesetzt ist, sich genauso verhält, wie wenn all auf revert gesetzt ist.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 4
# all-shorthand

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
all

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch

Globale CSS-Schlüsselwortwerte: initial, inherit, unset, revert, revert-layer