inherit vs initial vs unset: die Schlüsselwörter zum Zurücksetzen

inherit: der Wert des Elternelements

inherit erzwingt Vererbung, auch für Eigenschaften, die sonst nicht vererbt werden. a { color: inherit; } gibt Links die Farbe des umgebenden Textes. Der einzige der vier Werte in CSS 2.1.

initial: der Ausgangswert der Spezifikation

initial setzt auf den Wert, den die Spezifikation als Ausgangswert nennt – nicht auf den, den der Browser für dieses Element vorgibt. display: initial ist deshalb inline, auch auf einem div, weil inline der Ausgangswert von display ist. Das überrascht regelmäßig.

unset und revert

unset wirkt wie inherit bei vererbten Eigenschaften und wie initial bei nicht vererbten – der Wert, den die Eigenschaft ohne jede Regel hätte. all: unset setzt alle Eigenschaften eines Elements zurück, etwa für eine Schaltfläche, die wie Text aussehen soll. revert geht eine Stufe der Kaskade zurück, zum Browser-Stylesheet: display: revert auf einem div ist block.

Welche Eigenschaften von sich aus vererben

Ob eine Eigenschaft vererbt, legt die Spezifikation für jede einzeln fest, und die Aufteilung folgt einer Logik: Vererbt wird, was den Text betrifft – Schriftfamilie, Schriftgröße, Schriftschnitt, Zeilenhöhe, Vordergrundfarbe, Ausrichtung, Laufweite, Wortabstand, Leerraumbehandlung, Listenmarken und die Angaben zur Sprachausgabe. Nicht vererbt wird, was die Box betrifft: Abstände, Rahmen, Hintergrund, Anzeigeart, Positionierung, Maße und Überlauf.

Der Grund ist praktisch. Eine Schriftfamilie soll einmal oben gesetzt werden und überall gelten; ein Rahmen soll nicht um jedes Kind herum wiederholt werden. Genau deshalb wirkt inherit bei den nicht vererbenden Eigenschaften am auffälligsten – es ist die einzige Möglichkeit, einen Rahmen oder einen Innenabstand ausdrücklich vom Elternelement zu übernehmen. Die vollständige Zuordnung steht in der Schnellreferenz, wo jede Eigenschaft eine Spalte für die Vererbung hat, und der Grundlagenartikel zur Vererbung beschreibt das Zusammenspiel mit der Kaskade.

Warum initial selten das ist, was gemeint war

Der Ausgangswert einer Eigenschaft stammt aus der Spezifikation, nicht aus dem Vorgabe-Stylesheet des Browsers. Das sind zwei verschiedene Dinge, und der Unterschied ist der Grund für die meisten Überraschungen. Der Ausgangswert von display ist inline – bei jedem Element, auch bei einem Absatz oder einer Liste, denn dass diese als Block erscheinen, steht im Vorgabe-Stylesheet und nicht in der Definition der Eigenschaft. display: initial an einem Absatz macht ihn also zu einem Inline-Element und stellt keineswegs den gewohnten Zustand wieder her.

Dasselbe gilt für die Schriftgröße, deren Ausgangswert medium lautet, und für die Vordergrundfarbe. Wer den gewohnten Zustand des Browsers zurückholen will, braucht deshalb nicht initial, sondern das Schlüsselwort, das die Kaskade eine Stufe zurücknimmt und die Ebene des Browsers wieder gelten lässt. Zusammen mit dem Kürzel für alle Eigenschaften auf einmal ergibt das die zuverlässigste Art, einen Baustein von fremden Stilen zu befreien, ohne jede Eigenschaft einzeln aufzuzählen.

Ein Schlüsselwort für alle Eigenschaften

Die vier Schlüsselwörter lassen sich nicht nur auf eine Eigenschaft anwenden, sondern über die Sammeleigenschaft auf alle zugleich. all: unset setzt jede Eigenschaft eines Elements auf den geerbten Wert, wenn sie vererbt, und sonst auf den Ausgangswert. Ausgenommen sind allein die Custom Properties und die Richtungsangaben, die sonst die Textrichtung eines ganzen Bereichs kippen könnten.

Nützlich ist das an genau einer Stelle: bei einem Element, das eine fremde Umgebung mitbringt und dessen geerbte Gestaltung im Weg steht – ein Knopf, der wie ein Link aussehen soll, oder ein Baustein, der in beliebige Seiten eingebettet wird. Als allgemeiner Zurücksetzer taugt die Angabe nicht, weil sie auch die Anzeigeart auf den Ausgangswert zieht und damit Blöcke zu Inline-Elementen macht. Sie ist ein Werkzeug für den Einzelfall, nicht für den Kopf des Stylesheets.

Die Schlüsselwörter gelten für jede Eigenschaft

Anders als sonst in CSS sind diese Werte nicht bei einzelnen Eigenschaften aufgeführt, sondern gelten für alle – auch für solche, die es zum Zeitpunkt der Spezifikation noch gar nicht gab. Sie sind Teil der Wertesyntax selbst und stehen deshalb immer allein: Eine Kombination wie margin: inherit 0 ist ungültig, und die ganze Deklaration wird verworfen.

Bei einer Kurzform wirken sie auf alle Bestandteile zugleich. background: inherit übernimmt Farbe, Bild, Position, Wiederholung und Verankerung gemeinsam vom Elternelement; einzelne davon lassen sich so nicht ausnehmen. Und in einer Custom Property haben die Schlüsselwörter dieselbe Bedeutung wie überall, was beim Zurücksetzen eines Farbschemas an einem Baustein nützlich ist.

Wann welches

• Elternwert übernehmen: inherit.
• Auf den Zustand ohne Regeln: unset.
• Auf den Browser-Standard für dieses Element: revert.
• initial nur, wenn wirklich der Spezifikations-Ausgangswert gemeint ist – meist ist revert das, was man erwartet.

Häufige Fragen