Übernahme

The CSS Podcast – 005: Inheritance

Angenommen, Sie haben gerade CSS-Code geschrieben, um Elemente wie eine Schaltfläche aussehen zu lassen.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

Fügen Sie dann einem Artikel ein Linkelement mit dem class-Wert .my-button hinzu. Es gibt jedoch ein Problem: Der Text hat nicht die gewünschte Farbe. Wie kam es dazu?

Einige CSS-Eigenschaften werden übernommen, wenn Sie keinen Wert für sie angeben. In diesem Fall wurde die color übernommen:

article a {
  color: maroon;
}

In dieser Lektion erfahren Sie, warum das so ist und wie Vererbung eine leistungsstarke Funktion ist, mit der Sie weniger CSS schreiben können.

Übernahmevorgang

Sehen wir uns an, wie Vererbung funktioniert, anhand dieses HTML-Snippets:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

Das Stammelement (<html>) erbt nichts, da es das erste Element im Dokument ist. Wenn Sie dem HTML-Element CSS hinzufügen, wird es im Dokument kaskadiert.

html {
  color: lightslategray;
}

Die Property color wird standardmäßig von anderen Elementen übernommen. Das html-Element hat color: lightslategray. Daher haben alle Elemente, die die Farbe übernehmen können, jetzt die Farbe lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Nur das <p> hat kursiven Text, da es das am tiefsten verschachtelte Element ist. Die Vererbung erfolgt nur nach unten, nicht zurück zu übergeordneten Elementen.

Welche Properties werden standardmäßig übernommen?

Nicht alle CSS-Eigenschaften werden standardmäßig übernommen, aber viele. Hier ist die vollständige Liste der standardmäßig übernommenen Eigenschaften, die aus der W3-Referenz aller CSS-Eigenschaften übernommen wurde:

Funktionsweise der Vererbung

Für jedes HTML-Element ist standardmäßig eine CSS-Eigenschaft mit einem Anfangswert definiert. Ein Anfangswert ist eine Eigenschaft, die nicht übernommen wird und als Standardwert angezeigt wird, wenn in der Kaskade kein Wert für dieses Element berechnet werden kann.

Eigenschaften, die übernommen werden können, werden nach unten vererbt. Untergeordnete Elemente erhalten einen berechneten Wert, der dem Wert des übergeordneten Elements entspricht. Wenn also für ein übergeordnetes Element font-weight auf bold festgelegt ist, werden alle untergeordneten Elemente fett formatiert, es sei denn, für font-weight ist ein anderer Wert festgelegt oder das User-Agent-Stylesheet enthält einen Wert für font-weight für dieses Element.

Überschreibungen explizit erben und steuern

Die Vererbung kann sich auf Elemente auf unerwartete Weise auswirken. CSS bietet Tools, die dabei helfen können.

Das Keyword inherit

Mit dem Keyword inherit können Sie festlegen, dass eine Property den berechneten Wert der übergeordneten Property erbt. Sie können dieses Keyword beispielsweise verwenden, um Ausnahmen zu erstellen.

strong {
  font-weight: 900;
}

Mit diesem CSS-Snippet wird für alle <strong>-Elemente ein font-weight von 900 festgelegt, anstelle des Standardwerts bold, der dem Wert font-weight: 700 entspricht.

.my-component {
  font-weight: 500;
}

Die Klasse .my-component setzt font-weight stattdessen auf 500. Wenn die <strong>-Elemente in .my-component auch font-weight: 500 sein sollen, fügen Sie Folgendes hinzu:

.my-component strong {
  font-weight: inherit;
}

Die <strong>-Elemente in .my-component haben jetzt eine font-weight von 500.

Sie können diesen Wert auch explizit festlegen. Wenn Sie jedoch inherit verwenden und sich das CSS von .my-component in Zukunft ändert, ist sichergestellt, dass Ihre <strong> automatisch auf dem neuesten Stand bleibt.

Das Keyword initial

Die Vererbung kann Probleme mit Ihren Elementen verursachen. initial bietet Ihnen eine leistungsstarke Option zum Zurücksetzen.

Sie haben bereits gelernt, dass jede CSS-Eigenschaft einen Standardwert hat. Mit dem Schlüsselwort initial wird eine Property auf diesen ursprünglichen Standardwert zurückgesetzt.

aside strong {
  font-weight: initial;
}

Mit diesem Snippet wird die Fettdruckschrift aus allen <strong>-Elementen in einem <aside>-Element entfernt und stattdessen die normale Schriftart verwendet, was der Standardwert ist.

Das Keyword unset

Das Attribut unset verhält sich anders, wenn eine Property standardmäßig übernommen wird oder nicht. Wenn eine Property standardmäßig übernommen wird, ist das Keyword unset mit inherit identisch. Wenn die Property nicht standardmäßig übernommen wird, ist das Keyword unset gleich initial.

Es kann schwierig sein, sich zu merken, welche CSS-Eigenschaften standardmäßig übernommen werden. In diesem Zusammenhang kann unset hilfreich sein. Beispiel: color wird standardmäßig übernommen, margin jedoch nicht. Sie können also Folgendes schreiben:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Jetzt wird margin entfernt und color nimmt wieder den übernommenen berechneten Wert an.

Sie können den Wert unset auch mit der Property all verwenden. Was passiert im obigen Beispiel, wenn die globalen p-Stile einige zusätzliche Eigenschaften erhalten? Es wird nur die Regel angewendet, die für margin und color festgelegt wurde.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

Wenn Sie die aside p-Regel stattdessen in all: unset ändern, spielt es keine Rolle, welche globalen Stile in Zukunft auf p angewendet werden. Sie werden immer zurückgesetzt.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Wissen testen

Ihr Wissen über Vererbung testen

Welche der folgenden Eigenschaften werden standardmäßig übernommen?

animation
Animationen werden nicht an Kinder weitergegeben.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Welcher Wert verhält sich wie inherit, es sei denn, es gibt nichts zu übernehmen, und dann wie initial?

reset
Ungültiger Wert. Bitte versuchen Sie es noch einmal.
unset
🎉
superset
Ungültiger Wert. Bitte versuchen Sie es noch einmal.

Ressourcen