Übernahme

The CSS Podcast – 005: Inheritance

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

<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;
}

Anschließend fügen Sie einem Inhaltsartikel ein Link-Element mit dem class-Wert .my-button hinzu. Es gibt jedoch ein Problem, der Text entspricht nicht der Farbe, die Sie erwartet haben. Wie kam es dazu?

Bei einigen CSS-Eigenschaften werden die Werte übernommen, wenn Sie keinen Wert dafür angeben. Im Fall dieser Schaltfläche hat sie color von diesem CSS übernommen:

article a {
  color: maroon;
}

In dieser Lektion erfahren Sie, warum das so ist und wie die Übernahme ein leistungsstarkes Feature ist, um weniger CSS-Code zu schreiben.

Übernahmeablauf

Sehen wir uns an, wie die Übernahme mit diesem HTML-Snippet funktioniert:

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

Das Stammelement (<html>) übernimmt nichts, da es das erste Element im Dokument ist. Wenn Sie CSS-Code in das HTML-Element einfügen, wird das Dokument überlagert.

html {
  color: lightslategray;
}

Die Eigenschaft 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>-Element enthält kursiven Text, da es das am tiefsten verschachtelte Element ist. Die Übernahme bezieht sich nur auf die übergeordneten Elemente, nicht nach unten.

Welche Properties werden standardmäßig übernommen?

Nicht alle CSS-Eigenschaften werden standardmäßig übernommen, aber es gibt viele. Hier finden Sie die gesamte Liste der Eigenschaften, die standardmäßig übernommen werden, aus der W3-Referenz aller CSS-Eigenschaften:

So funktioniert die Übernahme

Für jedes HTML-Element ist standardmäßig jede CSS-Eigenschaft mit einem Anfangswert definiert. Ein Ausgangswert ist eine Eigenschaft, die nicht übernommen wird und als Standard angezeigt wird, wenn die Kaskade keinen Wert für dieses Element berechnet.

Attribute, die übernommen werden können, kaskadieren nach unten, und untergeordnete Elemente erhalten einen berechneten Wert, der den Wert des übergeordneten Elements darstellt. Wenn also für ein übergeordnetes Element font-weight auf bold gesetzt ist, werden alle untergeordneten Elemente fett formatiert, es sei denn, für ihr font-weight ist ein anderer Wert festgelegt oder das User-Agent-Stylesheet hat für dieses Element einen Wert für font-weight.

Übernahme explizit übernehmen und steuern

Vererbung kann sich auf unerwartete Weise auf Elemente auswirken. CSS verfügt daher über Tools, die dabei helfen.

Keyword inherit

Mit dem Schlüsselwort inherit können Sie dafür sorgen, dass jedes Attribut den berechneten Wert des übergeordneten Elements übernimmt. Dieses Keyword lässt sich gut verwenden, wenn Sie Ausnahmen erstellen.

strong {
  font-weight: 900;
}

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

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

Die Klasse .my-component legt stattdessen font-weight auf 500 fest. Um die <strong>-Elemente in .my-component ebenfalls font-weight: 500 hinzuzufügen, fügen Sie Folgendes hinzu:

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

Jetzt haben die <strong>-Elemente in .my-component den font-weight-Wert 500.

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

Keyword initial

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

Sie haben bereits gelernt, dass jede Property in CSS einen Standardwert hat. Mit dem Keyword initial wird eine Eigenschaft auf diesen anfänglichen Standardwert zurückgesetzt.

aside strong {
  font-weight: initial;
}

Durch dieses Snippet wird die fette Stärke aus allen <strong>-Elementen innerhalb eines <aside>-Elements entfernt und stattdessen die normale Gewichtung verwendet, also den Ausgangswert.

Keyword unset

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

Wenn Sie wissen, welche CSS-Eigenschaften standardmäßig übernommen werden, kann unset in diesem Kontext hilfreich sein. Beispiel: color wird standardmäßig übernommen, margin jedoch nicht. Daher können Sie 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 ist wieder der übernommene berechnete Wert.

Sie können den Wert unset auch mit dem Attribut all verwenden. Was passiert, wenn die globalen p-Stile im obigen Beispiel 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 Regel aside p stattdessen in all: unset ändern, werden sie immer nicht festgelegt, unabhängig davon, welche globalen Stile künftig auf p angewendet werden.

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

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Vererbung

Welche der folgenden Properties sind vererbbar?

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 verhält sich dann wie initial?

reset
kein gültiger Wert, versuchen Sie es erneut.
unset
🎉
superset
kein gültiger Wert, versuchen Sie es erneut.

Ressourcen