Vererbung

Eine Farbe am body, und jeder Absatz der Seite ist in dieser Farbe gesetzt. Ein Rahmen am body, und kein einziger Absatz hat einen. Manche Eigenschaften reichen ihren Wert an alle Kinder weiter, andere nie. Welche zu welcher Gruppe gehört, kannst du dir mit einer einfachen Logik herleiten.

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.

Im Inspector steht am Kasten 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 eine Hälfte ist mitgekommen, die andere nicht. Die Grenze verläuft zwischen Text und Kasten.

Im Reiter „Regeln“ steht der zweite Beweis. Am Absatz gewinnt dort keine Regel. Die einzige im Stylesheet, .aussen, steht blass da mit dem Vermerk „Selektor trifft nicht“, denn sie meint den Kasten und nicht den Absatz. Trotzdem ist der Absatz rot. Das ist Vererbung. Ein geerbter Wert hat am Kind keine Regel, nur ein Ergebnis.

Warum das so aufgeteilt ist, merkst du, sobald du es umdrehst. 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

Bei Formularelementen greift die Vererbung nicht, obwohl sie es müsste. 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 Button 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;
}

Zwischen den beiden Buttons liegt eine einzige Zeile. Ohne sie fällt jedes Formular aus dem Schriftbild der Seite heraus, und zwar auf jeder Seite.

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

font: inherit an den Formularelementen gehört deshalb ins Grundgerüst jedes Stylesheets. In Lektion 14.2 kommt das wieder, wenn du Formulare gestaltest.

03 / 04Vier Schlüsselwörter

Um der Vererbung nachzuhelfen oder sie zurückzudrehen, gibt es fünf Werte, die bei jeder Eigenschaft erlaubt sind. Der fünfte, revert-layer, hängt an den Layern aus der nächsten Lektion und kommt in diesem Kurs nicht mehr vor. Hier geht es um die anderen vier.

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

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

unset wirkt 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 CanvasText, also Schwarz, kein Blau. */
.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 dasselbe wie inherit.

initial ergibt Schwarz. Der Standardwert aus der Spezifikation heißt CanvasText, die Textfarbe des Systems, und die ist auf einer hellen Seite schwarz. 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.

Im Inspector lassen sich die vier genau festmachen, 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 der ersten Lektion 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 eine einzige Regel, mit dem Schlüsselwort als Wert, und die übrigen vier stehen blass darunter, .aussen eingeschlossen. Auch bei inherit kommt der Wert also vom Kasten, und 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.

Ich setze Schriftfamilie, Schriftgröße, Zeilenhöhe und Textfarbe einmal ganz oben, am html- oder body-Element. Ab da gilt das für alles darunter. Ausnahmen stehen nur dort, wo etwas anders aussehen soll.

Dasselbe Muster kommt in Lektion 5.4 wieder, dann mit eigenen Werten. Custom Properties, oft CSS-Variablen genannt, vererben sich wie normale Eigenschaften, und darauf steht später das ganze Farbsystem des Portfolios.

In der Aufgabe sollen Überschrift, Absatz und Button einer Karte ihre Schrift und Farbe von einer einzigen Stelle beziehen.