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 Kurzform CSS Eigenschaft setzt alle Eigenschaften eines Elements zurück, außer unicode-bidi, direction, und CSS Custom Properties. Sie kann Eigenschaften auf ihre initialen oder vererbten Werte setzen, oder auf die in einer anderen Kaskadenschicht oder einem Stylesheet-Ursprung angegebenen Werte.

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 Kurzform für alle CSS-Eigenschaften außer 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 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 Anfangswerte geändert werden sollen.

inherit

Gibt an, dass alle Eigenschaften des Elements auf ihre geerbten Werte geändert werden sollen.

unset

Gibt an, dass alle Eigenschaften des Elements auf die geerbten Werte geändert werden sollen, wenn sie standardmäßig vererbt werden, oder auf die Anfangswerte, wenn nicht.

revert

Spezifiziert ein Verhalten, das vom Stylesheet-Ursprung abhängt, zu dem die Deklaration gehört:

Wenn die Regel zum Autor-Ursprung gehört, setzt der revert Wert die Kaskade auf die Benutzerebene zurück, sodass die angegebenen Werte berechnet werden, als ob keine Autoren-Level-Regeln für das Element angegeben wären. Für Zwecke von revert umfasst der Autoren-Ursprung die Override- und Animation-Ursprünge.
Wenn die Regel zum Benutzer-Ursprung gehört, setzt der revert Wert die Kaskade auf die Benutzeragentenebene zurück, sodass die angegebenen Werte berechnet werden, als ob keine Autoren- oder Benutzer-Level-Regeln für das Element angegeben wären.
Wenn die Regel zum Benutzer-Agent-Ursprung gehört, wirkt revert wie unset.

revert-layer

Gibt an, dass alle Eigenschaften des Elements die Kaskade auf eine vorherige Kaskadenschicht zurücksetzen sollten, wenn eine vorhanden ist. Wenn keine andere Kaskadenschicht existiert, werden die Eigenschaften des Elements auf die passende Regel in der aktuellen Schicht oder zu einem vorherigen Stil-Ursprung zurückgesetzt.

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`)

Formaler Syntax

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

Beispiele

In diesem Beispiel enthält die CSS-Datei Styling für das <blockquote>-Element sowie einige Styles für das übergeordnete <body>-Element. Verschiedene Ausgaben im Abschnitt Ergebnisse zeigen, wie das Styling des <blockquote>-Elements beeinflusst wird, wenn unterschiedliche 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 festgelegt ist. Das <blockquote>-Element verwendet das Standardstyling des Browsers, das ihm einen Rand verleiht, zusammen mit einem bestimmten Hintergrund und Textfarbe, wie im Stylesheet angegeben. Es verhält sich auch als Block Element: der Text, der ihm folgt, befindet sich 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 auf initial gesetzten all-Eigenschaft in der blockquote-Regel verwendet das <blockquote>-Element nicht mehr das Browser-Standardstyling: Es ist jetzt ein Inline Element (Anfangswert), seine 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 das Standardstyling des Browsers. Stattdessen erbt es 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`

<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 auf die all-Eigenschaft in der blockquote-Regel angewendet wird, verwendet das <blockquote>-Element nicht das Standardstyling des Browsers. Da background-color eine nicht vererbte Eigenschaft 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 Styling-Eigenschaftswerte werden von denen des übergeordneten Elements <body> geerbt. Das <blockquote>-Element wird als Block Element gestylt, mit background-color #F0F0F0, font-size small und color blue - alle Werte geerbt von der body-Regel.

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;
}

Es sind keine Kaskadenschichten in der CSS-Datei definiert, also erbt das <blockquote>-Element seinen Stil von der passenden body-Regel. Das <blockquote>-Element hier wird als Block Element gestylt, mit background-color #F0F0F0, font-size small und color blue - alle Werte geerbt von der body-Regel. Dieses Szenario ist ein Beispiel dafür, wenn all auf revert-layer gesetzt dasselbe Verhalten zeigt wie wenn all auf revert gesetzt ist.