Erste Bekanntschaft mit 'initial'

Wenn mich neulich jemand gefragt hätte, was der Unterschied zwischen inherit und initial ist, hätte ich vielleicht geantwortet

„Was, es gibt einen Unterschied?“

Ich schreibe seit über zehn Jahren CSS, aber irgendwie bin ich nie dazu gekommen, genau zu verstehen, was initial eigentlich ist oder bewirkt. Nennt es Unwissenheit, Faulheit oder Glück, aber inherit hat mir immer geholfen und ich habe nie darüber nachgedacht, wann initial stattdessen verwendet werden könnte. Dieser Beitrag wird also einige der Dinge teilen, die ich gelernt habe.

Was initial bedeutet

Zunächst einmal hilft uns die Spezifikation, den Unterschied zwischen einem Schlüsselwort initial und einem Anfangswert zu verstehen.

• Anfangsschlüsselwort: Wenn der kaskadierte Wert einer Eigenschaft das Anfangsschlüsselwort ist, wird der Anfangswert der Eigenschaft ihr spezifizierter Wert.
• Anfangswert: Jede Eigenschaft hat einen Anfangswert, der in der Definitionstabelle der Eigenschaft definiert ist. Wenn die Eigenschaft keine vererbte Eigenschaft ist und die Kaskade keinen Wert ergibt, dann ist der spezifizierte Wert der Eigenschaft ihr Anfangswert.

Ähm, okay. Ich habe diese Definitionen durch Google Translate laufen lassen (Scherz!) und bin zu diesem Ergebnis gekommen

Das Anfangsschlüsselwort ist das, was als Eigenschaft deklariert wird, wobei der Anfangswert die resultierende Ausgabe ist, wie sie durch den Browser-Standard definiert wird.

Wenn also das Schlüsselwort initial hier verwendet wird

.module {
  color: initial;
}

…dann könnte der Anfangswert black zurückgeben, wenn black der Browser-Standard für die Eigenschaft dieses Elements ist.

Wie es sich von inherit unterscheidet

Wenn Sie denken, das klingt sehr ähnlich wie inherit, dann haben Sie absolut Recht. Es klingt verdammt ähnlich.

Aber initial und inherit unterscheiden sich durch den zusätzlichen Schritt, den inherit unternimmt, um zu prüfen, ob es andere Eigenschaften gibt, die es in der Kaskade verwenden kann, bevor es zum Anfangswert übergeht.

Ein Beispiel für den Unterschied

Sehen Sie sich den Pen CSS Initial vs. Inherit von CSS-Tricks (@css-tricks) auf CodePen an.

Sehen Sie das? Die Eigenschaften in der linken Box sind alle so eingestellt, dass sie die Werte der Klasse .module erben, da dies das übergeordnete Element ist. Auf der anderen Seite sind die Eigenschaften in der rechten Box auf initial eingestellt, was die Eigenschaften des Elements auf die Browser-Standardwerte zurücksetzt.

Wann initial verwendet werden sollte

Ich betrachte initial gerne als einen harten Reset. Es ist leicht, dass Stile mit wachsendem CSS unübersichtlich werden, und die Verwendung von initial ist eine Möglichkeit, Dinge zu bereinigen, damit ein Element zu seinem natürlichen Zustand zurückkehren kann. Wenn initial altmodisches Nintendo wäre, würde ich es als Äquivalent zum Herausziehen einer fehlerhaften Spielkassette aus der Konsole und zum Hineinpusten verwenden (auch wenn das angeblich keine Wirkung hatte).

Aber das bedeutet nicht, dass initial ein Allheilmittel für Resets ist. Das liegt daran, dass Anfangswerte immer noch Browser-Standardwerten unterliegen, von denen wir wissen, dass sie von Browser zu Browser variieren können.

Ach wartet, ihr benutzt CSS-Resets? Ihr könnt erwarten, dass diese stattdessen als Anfangswerte verwendet werden.

Fazit: Ich würde initial verwenden, um alle geerbten Stile von einem Element vollständig zu löschen, und inherit verwenden, um sicherzustellen, dass das Element seine Anweisungen vom nächstgelegenen Elternteil erhält.

Ein praktischerer Anwendungsfall

Hier ist ein Beispiel dafür, wie initial verwendet werden kann, um abwechselnd gefärbte Zeilen in Tabellen zu erstellen.

Sehen Sie sich den Pen CSS Initial von CSS-Tricks (@css-tricks) auf CodePen an.

Browser-Unterstützung

MDN bietet eine gute Aufschlüsselung der aktuellen Unterstützung für initial. Beachten Sie den eklatanten Mangel an IE-Unterstützung.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Ja	Ja	19	15	Nein	Ja	Ja

Zusammenfassend

Ich habe mir den Kopf zerbrochen, um interessante Anwendungsfälle für initial zu finden. Obwohl ich ein großes Potenzial darin sehe, Standardstile auf ein Element anwenden zu können, bin ich ihnen in der Praxis noch nicht begegnet – das könnte aber mehr über mich aussagen als über den Eigenschaftenwert selbst.

Das wird richtig praktisch, wenn all als Eigenschaft mehr Unterstützung erhält als Eigenschaft. Das würde all: initial zu einem wirklich mächtigen Werkzeug für das Erstellen von Resets auf jedem Element machen.

Bitte teilt jede Situation, in der initial etwas war, das ihr in einem Projekt verwenden musstet. Bonuspunkte, wenn ihr es für knifflige Kunststücke verwendet habt.