Übernahme

The CSS Podcast – 005: Inheritance

Angenommen, Sie haben gerade CSS 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;
}

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

Einige CSS-Eigenschaften werden übernommen, wenn Sie keinen Wert dafür angeben. Im Fall dieser Schaltfläche wurde die color aus diesem CSS übernommen:

article a {
  color: maroon;
}

In dieser Lektion erfahren Sie, warum das passiert und wie Sie mit der Vererbung weniger CSS schreiben können.

Übernahmeablauf

Sehen Sie sich 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>) erbt nichts, da es das erste Element im Dokument ist. Wenn Sie dem HTML-Element CSS hinzufügen, wird es im Dokument abwärts kaskadiert.

html {
  color: lightslategray;
}

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

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Nur für <p> wird der Text kursiv formatiert, 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 finden Sie die vollständige Liste der Attribute, die standardmäßig übernommen werden, aus der W3-Referenz aller CSS-Attribute:

Funktionsweise der Übernahme

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

Eigenschaften, die vererbt werden können, werden abwärts kaskadiert. Untergeordnete Elemente erhalten einen berechneten Wert, der dem Wert des übergeordneten Elements entspricht. Wenn für ein übergeordnetes Element font-weight auf bold festgelegt ist, werden alle untergeordneten Elemente fett formatiert, sofern für ihr font-weight kein anderer Wert festgelegt ist oder das User-Agent-Stylesheet einen Wert für font-weight für dieses Element enthält.

Explizite Vererbung und Steuerung der Vererbung

Die Vererbung kann sich unerwartet auf Elemente auswirken. Deshalb bietet CSS Tools, die dabei helfen.

Das Keyword inherit

Mit dem Keyword inherit können Sie dafür sorgen, dass eine beliebige Property den berechneten Wert ihres übergeordneten Elements übernimmt. Eine sinnvolle Verwendung dieses Schlüsselworts ist das Erstellen von Ausnahmen.

strong {
  font-weight: 900;
}

Mit diesem CSS-Snippet wird für alle <strong>-Elemente ein font-weight von 900 festgelegt. Der Standardwert wäre bold, was font-weight: 700 entspricht.

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

Mit der Klasse .my-component wird font-weight stattdessen auf 500 festgelegt. Damit die <strong>-Elemente in .my-component auch font-weight: 500 sind, fügen Sie Folgendes hinzu:

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

Die <strong>-Elemente in .my-component haben jetzt den font-weight-Wert 500.

Sie können diesen Wert explizit festlegen. Wenn Sie jedoch inherit verwenden und sich das CSS von .my-component in Zukunft ändert, wird Ihr <strong> automatisch aktualisiert.

Das Keyword initial

Die Vererbung kann Probleme mit Ihren Elementen verursachen. Mit initial haben Sie eine leistungsstarke Option zum Zurücksetzen.

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

aside strong {
  font-weight: initial;
}

Mit diesem Snippet wird die Schriftstärke „fett“ aus allen <strong>-Elementen in einem <aside>-Element entfernt und stattdessen die normale Schriftstärke verwendet, die der ursprüngliche Wert ist.

Das Keyword unset

Das Attribut unset verhält sich unterschiedlich, je nachdem, ob ein Attribut standardmäßig übernommen wird oder nicht. Wenn ein Attribut standardmäßig übernommen wird, ist das Keyword unset dasselbe wie inherit. Wenn die Eigenschaft nicht standardmäßig übernommen wird, entspricht das Schlüsselwort unset dem Wert initial.

Es kann schwierig sein, sich zu merken, welche CSS-Eigenschaften standardmäßig übernommen werden. unset kann in diesem Zusammenhang hilfreich sein. color wird beispielsweise 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;
}

margin wird entfernt und color wird wieder zum übernommenen berechneten Wert.

Sie können den Wert unset auch mit der Property all verwenden. Was passiert, wenn die globalen p-Stile einige zusätzliche Attribute erhalten? Es gilt nur die Regel, 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 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;
}

Das Keyword revert

Wie Sie in der Lektion zum Kaskadenmodell gelernt haben, stammen Stile aus verschiedenen Quellen: User-Agent-Basisstile, Nutzerpräferenzstile und von Ihnen erstellte Stile. Mit dem Keyword revert werden Stile rückgängig gemacht, die im selben Ursprung festgelegt sind, in dem das Keyword revert verwendet wird.

Das ist nützlich, wenn Sie ein Design festgelegt haben, es aber in einigen Fällen nicht angewendet werden soll. Mit inherit, initial und unset wird angegeben, wie der Wert eines Stils berechnet wird. Mit revert wird nur angegeben, dass andere von Ihnen geschriebene Stile nicht angewendet werden.

p {
  padding: 2em;
}

aside p {
  padding: revert;
}

In diesem Snippet wird für <p>-Elemente ein Innenabstand festgelegt. Wenn sich das <p>-Element jedoch in einem <aside>-Element befindet, wird überhaupt kein padding angegeben. Stattdessen wird auf einen Stil für Nutzereinstellungen (falls einer festgelegt ist) oder auf die Basisstile des User-Agents zurückgegriffen.

Das Keyword revert-layer

Kaskadenebenen sind eine nützliche Möglichkeit, Ihre Stile zu organisieren und zu priorisieren. Das Schlüsselwort revert-layer ähnelt revert. Anstatt jedoch anzugeben, dass für eine Eigenschaft keine Ihrer Autorenstile angewendet werden sollen, werden nur die Stile in der aktuellen Ebene rückgängig gemacht.

Wenn Sie eine UI-Bibliothek eines Drittanbieters verwenden, ist es sinnvoll, sie in eine Ebene zu importieren und alle Überschreibungen in eine Ebene mit höherer Priorität einzufügen. Anschließend können Sie eine Überschreibung mit revert-layer entfernen. Es werden dann die Standardeinstellungen der UI-Bibliothek verwendet.

Wenn in keinen anderen Layern ein Wert für die Eigenschaft angegeben ist, verhält sie sich wie revert und verwendet einen Wert aus einem früheren Ursprung.

Wissen testen

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

reset
Ungültiger Wert. Versuche es noch einmal.
unset
🎉
superset
Ungültiger Wert. Versuche es noch einmal.

Ressourcen