all

Baseline Widely available

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

Die all Kurzschreibweise CSS-Eigenschaft setzt alle Eigenschaften eines Elements zurück, mit Ausnahme von unicode-bidi, direction und CSS-Custom Properties. Sie kann Eigenschaften auf ihre anfänglichen oder geerbten Werte setzen oder auf die Werte, die in einer anderen Kaskadenebene oder stylesheet Herkunft angegeben wurden.

Probieren Sie es aus

/* no all property */

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        This paragraph has a font size of 1.5rem and a color of gold. It also
        has 1rem of vertical margin set by the user-agent. The parent of the
        paragraph is a &lt;div&gt; with a dashed blue border.
      </p>
    </div>
  </div>
</section>

#example-element {
  color: gold;
  padding: 10px;
  font-size: 1.5rem;
  text-align: left;
  width: 100%;
}

.example-container {
  border: 2px dashed #2d5ae1;
}

.example-container-bg {
  background-color: #77767b;
  padding: 20px;
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für alle CSS-Eigenschaften mit Ausnahme von 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 als einer der globalen CSS-Schlüsselwortwerte spezifiziert. Beachten Sie, dass keiner dieser Werte die Eigenschaften unicode-bidi und direction beeinflusst.

Werte

initial

Gibt an, dass alle Eigenschaften des Elements auf ihre anfänglichen Werte gesetzt 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 geerbt werden, oder auf ihre anfänglichen Werte, wenn nicht.

revert

Gibt ein Verhalten an, das von der Herkunft des Stylesheets abhängt, zu dem die Deklaration gehört:

Wenn die Regel zur Author-Herkunft gehört, stellt der revert-Wert die Kaskade auf die Benutzerebene zurück, sodass die angegebenen Werte berechnet werden, als ob keine Regeln auf Autorenebene für das Element angegeben wurden. Für die Zwecke von revert umfasst die Autorenherkunft die Override- und Animationsherkünfte.
Wenn die Regel zur Benutzer-Herkunft gehört, stellt der revert-Wert die Kaskade auf die Benutzerebene des User-Agents zurück, sodass die angegebenen Werte berechnet werden, als ob keine Regeln auf Autoren- oder Benutzerebene für das Element angegeben wurden.
Wenn die Regel zur User-Agent-Herkunft gehört, wirkt 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 zu einer vorherigen Stilherkunft zurückgesetzt, falls eine existiert.

Formale Definition

Anfangswert	Es gibt keinen praktischen Initialwert dafür.
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie der angegebene Wert wird er auf alle Eigenschaften angewandt, für die dies eine Kurzschreibweise ist.
Animationstyp	wie 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 Stilregeln für das <blockquote>-Element zusätzlich zu einigen Stilregeln für das übergeordnete <body>-Element. Verschiedene Ausgaben im Abschnitt Ergebnisse demonstrieren, wie die Stilgebung des <blockquote>-Elements beeinflusst wird, wenn verschiedene Werte auf die all-Eigenschaft innerhalb 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

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

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}

Dies ist das Szenario, in dem keine all-Eigenschaft innerhalb der blockquote-Regel gesetzt ist. Das <blockquote>-Element verwendet die Standardstilgebung des Browsers, die ihm einen Rand verleiht, zusammen mit einem spezifischen Hintergrund und einer Textfarbe, wie im Stylesheet angegeben. Es verhält sich auch als Block-Element: Der darauf folgende Text steht darunter.

B. `all: initial`

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

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}

Mit der all-Eigenschaft, die in der blockquote-Regel auf initial gesetzt ist, verwendet das <blockquote>-Element nicht mehr die Standardstilgebung des Browsers: Es ist jetzt ein Inline-Element (Anfangswert), sein background-color ist transparent (Anfangswert), seine font-size ist medium, und seine color ist black (Anfangswert).

C. `all: inherit`

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

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}

In diesem Fall verwendet das <blockquote>-Element nicht die Standardstilgebung des Browsers. Stattdessen erbt es Stilwerte von seinem ü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`

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

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}

Wenn der unset-Wert in der blockquote-Regel auf die all-Eigenschaft angewendet wird, verwendet das <blockquote>-Element nicht die Standardstilgebung des Browsers. Da background-color eine nicht vererbte Eigenschaft ist und font-size und color vererbte Eigenschaften sind, ist das <blockquote>-Element jetzt ein Inline-Element (Anfangswert), seine background-color ist transparent (Anfangswert), aber seine font-size ist immer noch small (geerbter Wert), und seine color ist blue (geerbter Wert).

E. `all: revert`

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

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}

Wenn die all-Eigenschaft in der blockquote-Regel auf revert gesetzt ist, wird die blockquote-Regel als nicht existent betrachtet und die Stilregelwerte werden von denen übernommen, die auf das übergeordnete Element <body> angewendet werden. So wird das <blockquote>-Element als Block-Element gestylt, mit background-color #F0F0F0, font-size small, und color blue – alle Werte, die von der body-Regel geerbt werden.

F. `all: revert-layer`

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

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}

Im CSS ist keine Kaskadenschicht definiert, sodass das <blockquote>-Element seinen Stil von der übereinstimmenden body-Regel erbt. Das <blockquote>-Element wird hier als Block-Element gestylt, mit background-color #F0F0F0, font-size small, und color blue – alle Werte, die von der body-Regel geerbt werden. Dieses Szenario ist ein Beispiel für den Fall, in dem all mit revert-layer das gleiche Verhalten zeigt wie all gesetzt auf revert.