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

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, mit Ausnahme von unicode-bidi, direction und benutzerdefinierten Eigenschaften.

Syntax

css

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

Werte

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.

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 diese standardmäßig geerbt werden, oder auf ihre anfänglichen Werte, wenn nicht.

revert

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

Wenn die Regel dem Autoren-Ursprung angehört, setzt der revert-Wert die Kaskade auf die Benutzer-Ebene zurück, so dass die spezifizierten Werte berechnet werden, als ob keine Autorregelungen für das Element festgelegt wären. Für Zwecke von revert, umfasst der Autoren-Ursprung die Override- und Animation-Ursprünge.
Wenn die Regel dem Benutzer-Ursprung angehört, setzt der revert-Wert die Kaskade auf die Benutzeragenten-Ebene zurück, so dass die spezifizierten Werte berechnet werden, als ob keine Autor- oder Benutzerregeln für das Element festgelegt wären.
Wenn die Regel dem Benutzeragenten-Ursprung angehö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, wenn eine vorhanden ist. Falls keine andere Kaskadenschicht existiert, setzen die Eigenschaften des Elements auf die übereinstimmende Regel zurück, falls eine vorhanden ist, in der aktuellen Schicht oder auf einen vorherigen Stil-Ursprung.

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 Ergebnisse in der Ergebniss-Teilabschnitt demonstrieren, wie sich die Stilgebung des <blockquote>-Elements ä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 die Standardstilvorlagen des Browsers, die ihm einen Rand sowie eine bestimmte Hintergrund- und Textfarbe wie im Stylesheet angegeben geben. 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;
}

Wird die all-Eigenschaft auf initial in der blockquote-Regel gesetzt, verwendet das <blockquote>-Element nicht mehr die Standardstilvorlagen des Browsers: Es ist nun ein Inline-Element (initialer Wert), seine background-color ist transparent (initialer Wert), seine font-size ist medium, und seine color ist black (initialer Wert).

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 Standardstilvorlagen des Browsers. Stattdessen erbt es Stilwerte von seinem übergeordneten <body>-Element: Es ist nun 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 die Standardstilvorlagen des Browsers. Weil background-color eine nicht-geerbte Eigenschaft ist und font-size und color geerbte Eigenschaften sind, ist das <blockquote>-Element nun ein Inline-Element (anfänglicher Wert), seine background-color ist transparent (anfänglicher Wert), 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 geerbt, die auf das übergeordnete <body>-Element 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-Datei sind keine Kaskadenschichten definiert, so dass das <blockquote>-Element seinen Stil von der übereinstimmenden body-Regel erbt. Das <blockquote>-Element ist 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, wenn all auf revert-layer gesetzt wird und sich genauso verhält wie all auf revert gesetzt.