Es gibt vier Schlüsselwörter, die gültige Werte für jede CSS-Eigenschaft sind (siehe Titel). Davon würde ich sagen, dass inherit im täglichen Gebrauch am häufigsten vorkommt. Vielleicht, weil es am längsten existiert (glaube ich?), aber auch, weil es logisch sinnvoll ist („bitte erbe deinen Wert von deinem nächsten Elternelement, das ihn setzt“). Dies könnte man zum Beispiel bei einer Überschreibung der Linkfarbe sehen.
<footer>
©2012 Website — <a href="/contact">Contact</a>
</footer>/* General site styles */
a {
color: blue;
}
footer {
color: white;
}
footer a {
color: inherit;
}Das ist eine anständige und elegante Methode, um die Tatsache zu handhaben, dass Text und Links im Footer dieselbe Farbe haben sollen, ohne sie zweimal setzen zu müssen.
Die anderen verhalten sich jedoch anders...
initialsetzt die Eigenschaft auf den Standardwert der Spezifikation zurück.unsetist verdammt seltsam. Für eine vererbbare Eigenschaft (z. B.color) bedeutet esinherit, und für eine nicht vererbbare Eigenschaft (z. B.float) bedeutet esinitial. Das ist für mich ein Gehirnknoten, so dass ich es noch nie benutzt habe.revertist ähnlich seltsam. Gleiches gilt für vererbbare Eigenschaften, es bedeutetinherit. Aber für nicht vererbbare Eigenschaften bedeutet es, zum UA-Stylesheet zurückzukehren. Das ist irgendwie nützlich, da das Zurücksetzen vondisplayzum Beispiel ein<p>-Element nicht aufdisplay: inline;setzt, aber es bleibt ein sinnvollesdisplay: block;.
PPK hat all dies detaillierter behandelt.
Ich bin froh, dass er mein Gejammer darüber gefunden hat
Chris Coyier argumentiert , dass wir einen neuen Wert brauchen, den er
defaultnennt. Er setzt in allen Fällen auf das Stylesheet des Browsers zurück, auch bei vererbbaren Eigenschaften. Somit ist es eine stärkere Version vonrevert. Ich stimme zu. Dieses Schlüsselwort wäre tatsächlich nützlich.
Amen. Wir haben vier Eigenschaften, um mit der Kaskade auf einzelnen Eigenschaften zu spielen, aber keine, die es uns erlaubt, alles auf die Standardwerte des UA-Stylesheets zurückzusetzen. Wenn wir das hätten, hätten wir ein sehr mächtiges Werkzeug, um mit den Stilen für jedes gegebene Element frisch zu beginnen. In gewisser Weise: Scoped Styles!
PPK hat einen fünften Wert, den er für nützlich hält: cascade. Die Idee ist (vermutlich), dass es sich ähnlich wie currentColor verhält, außer für jede Eigenschaft. So etwas wie eine freie Variable, die man nicht definieren muss und die einem Zugriff auf den kaskadierten Wert gibt, außer man benutzt ihn in einem anderen Kontext (wie einer Berechnung).
Entschuldigung, aber ist „initial“ nicht der eigentliche „Standard“? Erreicht er das nicht?
Nein.
Ich möchte diese Absätze auf den UA-Standard (block) zurücksetzen, nicht auf initial (inline).
unsetscheint dasselbe zu sein wie das Nichtvorhandensein der Eigenschaft (daher der Name, es ist nicht gesetzt). Ich vermute, sein einziger Zweck ist es, es zu ermöglichen, dass eine Eigenschaft nicht gesetzt wird, selbst wenn man aus irgendeinem Grund gezwungen ist, einen Wert zu setzen (z. B. man verwendet ein Tool, das versucht, ihn unabhängig davon zu setzen).Ich habe das Fehlen des Werts
cascadeheute beklagt, und ich weiß, dass ich das schon oft getan habe. Es wäre wunderbar.Heute habe ich eine Pulsanimation mit box-Shadow erstellt. Was ich wirklich tun wollte, war, den neuen pulsierenden Box-Shadow zu jedem bereits vorhandenen Box-Shadow des Elements hinzuzufügen.
Ich habe dies mit einer neuen übergebenen Variable für mein SASS-Mixin gelöst, aber es erfordert immer noch manuelle Definition.
cascadewürde das vollständig beheben.Ich habe manchmal benötigt, die jüngste Einstellung einer Eigenschaft innerhalb der Kaskade zu „rückgängig zu machen“, besonders wenn ich innerhalb eines Drittanbieter-Designsystems arbeite, wo ich eine Einstellung „rückgängig machen“ möchte, die auf einer Eigenschaft in einer bestimmten Kaskade platziert wurde. In diesem Fall möchte ich nicht unbedingt den Wert des Elternelements unterbrechen und möchte ihn auch nicht auf den Standard der Spezifikation oder des Browsers setzen, ich möchte nur den Wert rückgängig machen, der in der spezifischsten Kaskade (oder möglicherweise ein paar Schritte zurück in der Kaskade) gesetzt wurde. Ein solcher Wert wäre fummelig und würde stark von der Kaskade abhängen, daher bezweifle ich, dass er jemals implementiert wird, aber ich habe so etwas schon mehr als einmal benötigt. Die Alternative besteht für mich darin, eine Regel zu erstellen, die die Einstellung des Designsystems für diesen Wert überschreibt und ihn auf den „vorherigen“ Wert weiter oben in der Kaskade setzt, den ich durch manuelle Inspektion der Kaskade ermitteln muss.
Das experimentelle „revert-layer“ wird es uns ermöglichen, Stiländerungen korrekt zurückzusetzen: https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer