Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

11.6 Die Vererbung (inheritance)

Wenn der Browser bei der Sammlung relevanter Deklarationen überhaupt keine gefunden hat, tritt die Vererbung auf den Plan. Vererbung bedeutet, dass bestimmte Eigenschaften (z. B. font-family) von Vorfahren (z. B. body) an Nachfahren (z. B. #navibereich ul) weitergegeben werden.

Auch wenn Sie von den mendelschen Gesetzen aus dem Biologie-Unterricht nicht mehr viel wissen, sollten Sie sich die Vererbungslehre für CSS etwas genauer anschauen.

Vererbung macht ein Stylesheet übersichtlicher

Auf der Startseite haben Sie das Prinzip der Vererbung bereits benutzt, zum Beispiel bei der Deklaration der Schriftart und -größe. Eine der ersten Regeln im Stylesheet für die Beispielseiten sieht – etwas verkürzt – so aus:

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

Diese Deklaration gilt nicht nur für body, sondern auch für alle Nachfahren. Da im Prinzip alle Elemente einer Webseite Nachfahren von body sind, gilt die Schriftart für alle Elemente dieser Webseite, sofern im Rahmen der Kaskade nicht bereits etwas anderes definiert wurde.

Wenn es das Prinzip der Vererbung nicht geben würde, müssten Sie alle Elemente namentlich erwähnen, und die gleiche Deklaration könnte ungefähr so aussehen: 

body, h1, h2, p, ul, li, a, strong, em, address {
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

Deutlich umständlicher als vorher. Geschickter Einsatz von Vererbung macht ein Stylesheet übersichtlicher.

Bestimmte Eigenschaften werden nicht vererbt

Einige Eigenschaften werden nicht vererbt. Das gilt zum Beispiel für die Box-Modell-Eigenschaften wie  widthpaddingborder und  margin. Der Grund liegt auf der Hand:

  • Stellen Sie sich ein Dokument vor, in dem für body eine 2 Pixel breite rote Rahmenlinie definiert wurde.
  • Jetzt stellen Sie sich die Webseite vor, wenn die Eigenschaft border an alle Kind-Elemente vererbt würde: Sie müssten für jedes Element auf der Seite explizit border: none deklarieren, damit nicht alle Elemente einen roten Rahmen bekommen.

Die wichtigsten nicht vererbbaren Eigenschaften sind:

  • padding, border und margin
  • alle Eigenschaften für background
  • width und height (auch in den Varianten min- und max-
  • position, top, right, bottom, left
  • float und clear
  • display

Eine komplette Übersicht finden Sie in der hervorragenden Schnellreferenz von Klaus Langenberg:

Diese Schnellreferenz gibt es dort auch als PDF zum Download.

Mit »inherit« können Sie Vererbung erzwingen

Mit der Deklaration von inherit kann ein Webautor erreichen, dass der vom Browser errechnete Wert für das Elternelement übernommen wird. Allerdings verstehen nicht alle Browser inherit und deshalb sollte es eher vorsichtig eingesetzt werden.

Potenzielle Probleme bei der Vererbung relativer Werte

Wie im Abschnitt über Werte und Maße gesehen, gibt es in CSS absolute und relative Werte. Während absolute Werte wie top oder pt oder auch Farbwerte wie orange unabhängig von den Werten anderer Elemente und somit immun gegen Veränderung durch Vererbung sind, ist das bei relativen Werten wie Prozent oder em anders: 

  • Eine in em definierte Schriftgröße orientiert sich an der Schriftgröße für das Elternelement. Eine Angabe von 0.8em wird also von Vererbung zu Vererbung ein bisschen kleiner. 
  • Ebenso geht eine in Prozent definierte Breite von der Breite des umgebenden Elements aus.

Falls beim Umgang mit relativen Werten also seltsame Effekte wie zu kleine Schriftgrößen oder zu schmale Elemente auftreten, denken Sie an die Vererbung und anschließend noch einmal gründlich drüber nach, was da genau passiert sein könnte.

Vererbt wird der berechnete Wert

Vererbt wird nicht der im Stylesheet definierte Wert (specified value), sondern der vom Browser berechnete Wert (computed value). Im Falle einer Schriftgröße also z. B. nicht der angegebene Wert 80%, sondern die vom Browser berechnete Schriftgröße, z. B. 12px

Mit dem Firefox-Add-on Firebug können Sie sich genau anschauen, welchen Wert der Browser für welche Eigenschaft berechnet hat.