Vererbung

Manche Eigenschaften reichen ihren Wert an alle Kinder weiter, ohne dass du etwas tust. Andere tun das nie. Welche zu welcher Gruppe gehört, ist keine Willkür, sondern folgt einer einfachen Logik.

01 / 04Was sich vererbt

Textbezogene Eigenschaften vererben sich. color, font-family, font-size, font-weight, line-height, text-align, letter-spacing. Alles, was mit Schrift zu tun hat.

Kasten-Eigenschaften vererben sich nicht. padding, margin, border, background, width, height. Alles, was mit dem Kasten selbst zu tun hat.

<div class="aussen">
  <p>Ein Absatz im Kasten. Er hat keine eigene Regel.</p>
</div>

.aussen {
  /* Das hier landet auch beim Absatz. */
  color: #b91c1c;
  font-family: Georgia, serif;
  font-style: italic;

  /* Das hier nicht. Der Absatz bekommt weder Rahmen
     noch Innenabstand noch Hintergrund. */
  border: 2px solid #b91c1c;
  padding: 16px;
  background-color: #fef2f2;
}

Der Absatz hat keine einzige eigene Regel. Trotzdem ist er rot und kursiv in Georgia. Einen Rahmen hat er nicht, und einen Innenabstand auch nicht.

Zeig mit dem Inspector nacheinander auf beide. Am Kasten steht color: rgb(185, 28, 28), font-family: Georgia, serif, padding: 16px und border: 2px solid rgb(185, 28, 28). Am Absatz darin stehen dieselben ersten beiden Werte, aber padding: 0px und border: 0px none. Die Hälfte ist mitgekommen, die andere nicht, und die Trennlinie verläuft genau zwischen Text und Kasten.

Der Reiter „Regeln” macht daraus einen zweiten Beweis. Am Absatz gewinnt dort keine Regel; die einzige im Stylesheet, .aussen, steht blass da mit dem Vermerk „Selektor trifft nicht”. Sie meint den Kasten und nicht den Absatz. Trotzdem ist der Absatz rot. Genau das ist Vererbung: Ein geerbter Wert hat am Kind keine Regel, sondern nur ein Ergebnis.

Der Grund für die Aufteilung leuchtet ein, sobald man sie umdreht: würde border sich vererben, hätte jedes Element in einem umrandeten Kasten selbst einen Rahmen. Würde color sich nicht vererben, müsstest du sie an jedem Absatz, jedem Link und jedem Listenpunkt einzeln setzen.

02 / 04Formulare sind die Ausnahme

Es gibt eine Gruppe, bei der die Vererbung nicht greift, obwohl sie es müsste: Formularelemente. button, input, select und textarea bringen vom Browser eine eigene Schrift mit, meistens die des Betriebssystems in 13 Pixel.

<div class="karte">
  <p>Dieser Absatz erbt die Schrift.</p>
  <button type="button">Dieser Knopf nicht</button>
  <button type="button" class="erbt">Dieser schon</button>
</div>

.karte {
  font-family: Georgia, serif;
  font-size: 20px;
}

/* Formularelemente bringen eine eigene Schrift vom Betriebssystem
   mit. Diese eine Zeile holt sie in die Vererbung zurück. */
.erbt {
  font: inherit;
}

Der Unterschied zwischen den beiden Knöpfen ist genau eine Zeile. Ohne sie fällt jedes Formular aus dem Schriftbild der Seite heraus, und zwar zuverlässig auf jeder Seite, die du je gebaut hast.

Am Streifen ist der Abstand größer, als es aussieht. Der erste Knopf trägt font-family: Arial und font-size: 13.3333px und misst 136 × 21 Pixel, der zweite Georgia, serif mit 20px und misst rund 148 × 30. Die krumme Zahl ist kein Zufall: 13,3333 Pixel sind genau 10 Punkt, eine Angabe aus der Druckwelt, und die steht so im Browser-Stylesheet für Knöpfe. Bestellt hat sie niemand.

font: inherit an den Formularelementen gehört deshalb ins Grundgerüst jedes Stylesheets. Lektion 14.2 kommt darauf zurück, wenn es ums Gestalten von Formularen geht.

03 / 04Vier Schlüsselwörter

Für die Fälle, in denen du der Vererbung nachhelfen oder sie zurückdrehen willst, gibt es vier Werte, die bei jeder Eigenschaft erlaubt sind.

inherit nimmt den Wert des Elternteils, auch bei Eigenschaften, die sich sonst nicht vererben.

initial setzt auf den Standardwert der Eigenschaft laut Spezifikation. Achtung: das ist nicht der Wert des Browser-Stylesheets. display: initial ergibt inline, auch bei einem div.

unset ist das eine oder das andere, je nachdem: bei vererbbaren Eigenschaften wie inherit, bei den übrigen wie initial.

revert nimmt den Wert zurück, den das Browser-Stylesheet vorgesehen hatte. Das ist meistens das, was Leute meinen, wenn sie initial schreiben.

<div class="aussen">
  <p>Ein Absatz erbt die Farbe von allein.</p>
  <a href="#" class="erben">Ein Link mit inherit</a><br>
  <a href="#" class="anfang">Ein Link mit initial</a><br>
  <a href="#" class="egal">Ein Link mit unset</a><br>
  <a href="#" class="zurueck">Ein Link mit revert</a>
</div>

.aussen {
  color: #b91c1c;
}

/* Links erben die Farbe nicht, das Browser-Stylesheet setzt sie.
   inherit holt den Wert des Elternteils aktiv her. */
.erben {
  color: inherit;
}

/* initial nimmt den Standardwert aus der Spezifikation.
   Bei color ist das Schwarz, nicht das Blau des Browsers. */
.anfang {
  color: initial;
}

/* color vererbt sich, deshalb wirkt unset hier wie inherit. */
.egal {
  color: unset;
}

/* revert gibt dem Browser-Stylesheet das letzte Wort zurück. */
.zurueck {
  color: revert;
}

Alle vier stehen untereinander. inherit und unset ergeben dasselbe Rot wie der Kasten, denn color vererbt sich, und bei einer vererbbaren Eigenschaft tut unset genau das, was inherit tut.

initial ergibt Schwarz, den Standardwert aus der Spezifikation, mit dem Browser-Stylesheet hat er nichts zu tun. Und revert ergibt das gewohnte Linkblau, weil dort wieder das Browser-Stylesheet das letzte Wort bekommt.

Der Inspector nagelt die vier fest, denn im Streifen stehen sie als Zahlen: rgb(185, 28, 28) bei inherit, rgb(0, 0, 0) bei initial, wieder rgb(185, 28, 28) bei unset und rgb(0, 0, 238) bei revert. Das letzte Blau ist auf die Ziffer dasselbe, das in Lektion 1.1 an einem Link ganz ohne Stylesheet stand. Im Reiter „Regeln” siehst du dabei, dass wirklich nur eine Zeile im Spiel ist: An jedem der vier Links gewinnt genau eine Regel, mit dem Schlüsselwort als Wert, und die übrigen vier stehen blass darunter, .aussen eingeschlossen. Auch bei inherit also: Der Wert kommt vom Kasten, seine Regel gilt hier trotzdem nicht.

04 / 04Warum das die halbe Arbeit spart

Vererbung ist der Grund, warum ein Stylesheet nicht mit jedem neuen Element länger wird.

Du setzt Schriftfamilie, Schriftgröße, Zeilenhöhe und Textfarbe einmal ganz oben, am html- oder body-Element. Ab da gilt das für alles, was du danach schreibst, ohne dass du es wiederholen musst. Ausnahmen setzt du gezielt an den Stellen, an denen etwas anders aussehen soll.

Genau dieses Muster benutzt Lektion 5.4 noch einmal, dann mit eigenen Variablen: Custom Properties vererben sich wie normale Eigenschaften, und darauf steht später das ganze Farbsystem des Portfolios.