`all` CSS Eigenschaft

Baseline Weitgehend verfügbar

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

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 initialen oder vererbten Werte setzen oder auf die Werte, die in einer anderen Kaskadierungsebene oder einem anderen Stylesheet-Ursprung angegeben sind.

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 Abkürzung 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 Initialwerte 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 ihre geerbten Werte geändert werden sollen, wenn sie standardmäßig erben, oder auf ihre Initialwerte, wenn nicht.

revert

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

Wenn die Regel zum Autor-Ursprung gehört, setzt der Wert revert die Kaskade auf die Benutzerebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Autor-Regeln für das Element festgelegt worden wären. Für Zwecke von revert umfasst der Autor-Ursprung die Override- und Animations-Ursprünge.
Wenn die Regel zum Benutzerursprung gehört, setzt der Wert revert die Kaskade auf die Browser-Ebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Autor- oder Benutzeregeln für das Element festgelegt worden wären.
Wenn die Regel zum Browser-Ursprung gehört, verhält sich der Wert revert wie unset.

revert-layer

Gibt an, dass alle Eigenschaften des Elements die Kaskade auf eine vorherige Kaskadierungsschicht zurücksetzen sollen, sofern eine existiert. Wenn keine andere Kaskadenschicht existiert, setzen die Eigenschaften des Elements auf die passende Regel in der aktuellen Schicht oder auf einen vorherigen Style-Ursprung zurück, 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  |
  revert-rule

Beispiele

In diesem Beispiel enthält die CSS-Datei Stile für das <blockquote> Element sowie einige Stile für das übergeordnete <body> Element. Verschiedene Ausgaben im Ergebnisteil zeigen, wie sich das Styling des <blockquote> Elements verändert, 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 gesetzt ist. Das <blockquote> Element verwendet das Standard-Styling des Browsers, das ihm einen Rand sowie eine bestimmte Hintergrund- und Textfarbe gemäß dem Stylesheet verleiht. Es verhält sich auch als Block Element: Der nachfolgende Text 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 all Eigenschaft, die in der blockquote Regel auf initial gesetzt ist, verwendet das <blockquote> Element nicht mehr das Standard-Styling des Browsers: Es ist jetzt ein Inline Element (Initialwert), seine background-color ist transparent (Initialwert), seine font-size ist medium, und seine color ist black (Initialwert).

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 Standard-Styling 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 Wert unset auf die all Eigenschaft in der blockquote Regel angewendet wird, verwendet das <blockquote> Element nicht das Standard-Styling des Browsers. Weil background-color eine nicht-ererbte Eigenschaft ist und font-size und color ererbte Eigenschaften sind, ist das <blockquote> Element jetzt ein Inline Element (Initialwert), seine background-color ist transparent (Initialwert), 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 Stilwerte werden von denen des übergeordneten Elements <body> geerbt. Somit wird das <blockquote> Element 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 Kaskadierungsschichten in der CSS-Datei definiert, sodass das <blockquote> Element seinen Stil von der passenden body Regel erbt. Das <blockquote> Element wird hier 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 für den Fall, wenn all auf revert-layer gesetzt, sich genauso verhält wie all auf revert.