revert-rule
Das revert-rule CSS-weite Schlüsselwort setzt den vererbten Wert einer Eigenschaft auf den Wert zurück, den sie gehabt hätte, wenn die aktuelle Stilregel nicht vorhanden gewesen wäre. Die Kaskade bestimmt dann den Wert aus den verbleibenden Deklarationen – dies könnte eine andere Regel in derselben Kaskadenschicht, eine Regel in einer anderen Schicht, ein anderer Stilursprung oder ein Standardwert (inherited oder initial) sein.
Wenn es innerhalb einer CSS-Animation (der Animationsursprung) verwendet wird, verhält sich das revert-rule-Schlüsselwort wie revert-layer.
Dieses Schlüsselwort kann auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzschreibweiseigenschaft all.
Revert-rule vs. revert-layer vs. revert
Die Schlüsselwörter revert-rule, revert-layer und revert setzen die Kaskade zurück, jedoch auf unterschiedlichen Granularitätsebenen:
revertentfernt alle Deklarationen vom aktuellen Stilursprung und setzt auf den vorherigen Ursprung zurück (zum Beispiel von Autorenstilen auf Benutzeragenturstile).revert-layerentfernt alle Deklarationen von der aktuellen Kaskadenschicht und setzt auf die vorherige Schicht innerhalb desselben Ursprungs zurück.revert-ruleentfernt nur die Deklarationen von der aktuellen Stilregel. Andere Regeln in derselben Kaskadenschicht gelten weiterhin.
Dies macht revert-rule nützlich, um bestimmte Deklarationen innerhalb einer Regel bedingt zu ignorieren, während die Deklarationen aus anderen Regeln in derselben Schicht respektiert werden.
Beispiele
Zurücksetzen auf die vorherige Regel
In diesem Beispiel zielen zwei Regeln auf dasselbe Element. Die zweite Regel verwendet revert-rule auf der color-Eigenschaft, wodurch die Kaskade den Wert bestimmt, als wäre die Regel p.special nicht vorhanden, und auf den Wert zurückgreift, der durch die erste Regel festgelegt wurde.
HTML
<p class="special">This paragraph has special styling.</p>
CSS
p {
color: blue;
font-weight: bold;
}
p.special {
color: revert-rule;
border: 1px solid currentcolor;
}
Ergebnis
Der Absatztext ist aufgrund der p-Regel blau, weil color: revert-rule dazu führt, dass die color-Deklaration in p.special ignoriert wird. Die Deklarationen font-weight und border sind unverändert.
Zurücksetzen von einem Stil-Attribut
Wenn revert-rule in einem Stil-Attribut verwendet wird, bewirkt es, dass die Kaskade so handelt, als ob das Stil-Attribut nicht vorhanden wäre. Dies funktioniert, weil das Stil-Attribut als eigene Stilregel behandelt wird.
HTML
<p style="color: revert-rule">This text uses the stylesheet color.</p>
CSS
p {
color: green;
}
Ergebnis
Der Absatztext ist grün, weil revert-rule dazu führt, dass die Kaskade die Deklaration des Stil-Attributs ignoriert, und die p-Regel tritt in Kraft.
Verkettung mehrerer revert-rule-Werte
Wenn mehrere Regeln revert-rule für dieselbe Eigenschaft verwenden, ignoriert die Kaskade jede von ihnen der Reihe nach, indem sie zu früheren Regeln zurückgeht, bis sie einen konkreten Wert findet.
HTML
<p class="a b">This text is styled by a chain of revert-rule values.</p>
CSS
p {
color: red;
}
p.a {
color: revert-rule;
}
p.b {
color: revert-rule;
}
Ergebnis
Sowohl die Regeln p.b als auch p.a werden durch revert-rule ignoriert. Die Kaskade fällt auf die p-Regel zurück, sodass der Text rot ist.