CSS all-Eigenschaft
Die all-Eigenschaft in CSS setzt alle Eigenschaften auf ihren Anfangs- oder Vererbungswert zurück. Mit Beispielen erklärt.
Die CSS-Eigenschaft all ist eine Kurzschreibweise, die alle Eigenschaften eines Elements auf einmal zurücksetzt – mit Ausnahme von unicode-bidi und direction, die die Textrichtung steuern und absichtlich unberührt bleiben.
Sie akzeptiert keine Liste von Eigenschaftswerten. Stattdessen gibt man ihr ein einziges CSS-weites Schlüsselwort (initial, inherit, unset, revert oder revert-layer) und dieses wird auf jede Eigenschaft des Elements angewendet. Damit ist es eine schnelle Methode, vererbte oder zuvor deklarierte Stile in einer einzigen Zeile zu entfernen.
Diese Seite behandelt die Syntax, alle akzeptierten Werte, ausführbare Beispiele und wann der Einsatz von all tatsächlich sinnvoll ist.
Warum und wann man es verwenden sollte
Der häufigste Grund für die Verwendung von all ist die Erstellung einer sauberen Styling-Basis. Wenn man beispielsweise ein Widget oder eine Drittanbieter-Komponente in eine Seite einbettet, können vererbte Stile (Schriftart, Farbe, Zeilenhöhe) hineinsickern. Das Setzen von all: initial oder all: revert auf dem Wrapper entfernt diese Vererbung, sodass die Komponente von einem vorhersehbaren Zustand aus startet.
Folgende Punkte sind dabei zu beachten:
- Es ist umfangreich.
allbetrifft jede Eigenschaft, daher sollte man es auf kleine, abgegrenzte Teilbäume anwenden statt aufbodyoder große Container. - Es setzt
directionundunicode-bidinicht zurück. Dies ist beabsichtigt, damit die Textrichtung niemals versehentlich gebrochen wird. - Kindelemente werden nicht automatisch zurückgesetzt.
allsetzt das angesteuerte Element zurück. Vererbte Eigenschaften (wiecolor) kaskadieren weiterhin zu den Kindelementen, sofern diese nicht ebenfalls zurückgesetzt werden.
Diese Eigenschaft gilt als Reset-Kurzschreibweise. Anders als mehrteilige Kurzschreibweisen wie margin oder background hat sie keine Langform-Version und keine Untereigenschaften.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.all = "inherit"; |
Syntax
Syntax der CSS all-Eigenschaft
all: initial | inherit | unset | revert | revert-layer;Beispiel der all-Eigenschaft mit dem Wert revert:
Beispiel der CSS all-Eigenschaft mit dem Wert revert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
color: #666;
all: revert;
}
</style>
</head>
<body>
<h2>All property example</h2>
<p>Here the all: revert; is set.</p>
<div class="example"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
</body>
</html>Ergebnis
Beispiel der all-Eigenschaft mit den Werten inherit, initial und unset:
Beispiel der CSS all-Eigenschaft mit den Werten inherit, initial und unset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-size: 15px;
color: #1c87c9;
}
.example1 {
background-color: #8ebf42;
color: #666;
}
.example2 {
background-color: #8ebf42;
color: #666;
all: inherit;
}
.example3 {
background-color: #8ebf42;
color: #666;
all: initial;
}
.example4 {
background-color: #8ebf42;
color: #666;
all: unset;
}
</style>
</head>
<body>
<h2>All property example</h2>
<hr />
<p>No all property:</p>
<div class="example1"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
<hr />
<p>all: inherit:</p>
<div class="example2"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
<hr />
<p>all: initial:</p>
<div class="example3"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
<hr />
<p>all: unset:</p>
<div class="example4"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
<hr />
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| initial | Setzt jede Eigenschaft auf ihren in der Spezifikation definierten Anfangswert, ohne Vererbung zu berücksichtigen. |
| inherit | Lässt jede Eigenschaft den berechneten Wert vom übergeordneten Element übernehmen. |
| unset | Verhält sich wie inherit bei vererbaren Eigenschaften (wie color) und wie initial bei nicht-vererbaren (wie border). |
| revert | Setzt jede Eigenschaft auf den Wert zurück, den sie aus dem User-Agent- oder Benutzer-Stylesheet hätte, wobei zuvor definierte Autorstile ignoriert werden. |
| revert-layer | Setzt jede Eigenschaft auf den Wert zurück, der in der vorherigen Kaskadenschicht festgelegt wurde. |
unset vs. revert
Diese beiden werden leicht verwechselt:
unsetentfernt den Wert des Autors und fällt auf Vererbung oder den Anfangswert der Spezifikation zurück – es weiß nichts über das Standard-Stylesheet des Browsers.revertsetzt aktiv auf das Standard-Styling des Browsers zurück. So behältall: revertbei einem<h2>das Aussehen einer normalen fetten Überschrift, währendall: unsetes auf schlichten inline-ähnlichen Text reduziert.
Browser-Unterstützung
all wird in allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Das Schlüsselwort revert erschien später als initial/inherit/unset, und revert-layer setzt die Unterstützung von Kaskadenschichten voraus – daher sollte die Abdeckung geprüft werden, wenn ältere Browser-Versionen unterstützt werden müssen.