CSS Vererbung: inherit, vererbbare Eigenschaften im Dokumentbaum – mit Beispielen

Das Konzept der Vererbung wurde mit CSS 2 eingeführt und bildet heute eins der Kernkonzepte der Cascading Stylesheets. Es steht für die Übertragung der deklarierten CSS-Werte von einem Element auf das nachfolgende. Dabei gibt jedes Element des Dokuments seine Werte an seine Kind- Elemente weiter. Grundsätzliches zur Baumstruktur und zum Konzept der Abstammung ist im Artikel Der Dokumentstammbaum erläutert.

Genau genommen müssen wir uns das so vorstellen, dass jedes (X)HTML-Element etwa 110 Eigenschaften besitzen kann. Nicht jede Eigenschaft ist an jedem Element anwendbar. Die Spalte 'Anwendbarkeit' auf den Seiten der Schnellreferenz zeigt, an welchen Elementen welche Eigenschaften deklariert werden können. Jede dieser Eigenschaften kann einen oder mehrere Werte annehmen. Diese Werte deklarieren wir mit Hilfe von Stylesheets.

Der große Vorteil der Vererbung ist nun, dass die deklarierten Werte von jedem Element des Dokuments an dessen Kind- Elemente weiter gegeben werden. Wir brauchen sie deshalb nicht für jedes Element erneut zu deklarieren. Das spart uns eine Menge Arbeit und macht das Stylesheet übersichtlicher.

Wie die Vererbung funktioniert

Bei der Vererbung gibt ein Element den oder die Werte seiner Eigenschaft A an die Eigenschaft A seines Kind- Elements weiter, der Wert der Eigenschaft B geht an die Eigenschaft B des Kind- Elements, usw. Es werden also die Werte aller Eigenschaften an die korrespondierenden Eigenschaften des Kind- Elements übertragen. Die Vererbung erfolgt dabei immer von HTML-Element zu HTML-Element entlang der Baumstruktur des Dokuments.

Es ist nicht möglich, ein bestimmtes Element als Zielelement der Vererbung zu bestimmen. So können wir z. B. keine Eigenschaften gezielt von einem Element auf ein anderes übertragen. Schon gar nicht lässt sich eine Vererbungs- Struktur innerhalb des Stylesheets definieren.

Praktischerweise wollen wir unsere Betrachtung der Vererbungsregeln auf das Element body und seine Nachfahren- Elemente beschränken. Im Dokument- Stammbaum rechts lässt sich verfolgen, wie jedes Element generell seine Werte an seine Kind- Elemente vererbt:

Die an das erste Element div (links) deklarierten Werte werden über die Elemente der Liste bis zu den Anker- Elementen 'durchgereicht'. Auch die Regeln, die für die Elemente ul und li zutreffen, werden bis an die Elemente a weiter gegeben.

Analog dazu gibt der div-Container auf der rechten Seite die für ihn geltenden Deklarationen an die Elemente p und table weiter. Diese wiederum vererben die deklarierten Werte an ihre eigenen Kind- Elemente. Dieser Grundsatz gilt generell und auch dann, wenn ein Element mit einem geerbten Wert nichts anfangen kann. So wirken sich z. B. die Werte der Eigenschaft font-size nicht auf die Tabellenelemente aus, dennoch werden sie letztendlich an den Elementen innerhalb der Tabellenzellen wieder sichtbar.

Weil aber nichts auf der Welt einfach ist, gibt es einige Einschränkungen und Verfeinerungen zu beachten, die trotzdem alle Sinn machen. Wir sehen uns diese Ausnahmefälle weiter unten noch genauer an. Vorher wollen wir aber auf ein paar unnötige Deklarationen eingehen, die immer wieder empfohlen werden.

Vererbungs-Mythen

Es gibt ein paar nutzlose Deklarationen, die sich immer noch hartnäckig auf einigen Websites, aber auch in einzelnen Fachbüchern, halten. Sie gehen zurück auf die Zeit um 2000/2001, als sich die Unterstützung von CSS 2, und damit der Vererbung, noch nicht allgemein durchgesetzt hatte. Damals hatten sie den Sinn, die Eigenschaften mit neutralen Werten vorzubesetzen. Heute ist das nicht mehr notwendig, weil alle Browser sich an die festgelegten Ausgangswerte und an die Vererbungsregeln halten. Zwei dieser Empfehlungen sollen hier beispielhaft betrachtet werden.

Vorbesetzen der Eigenschaften margin und padding mit dem Wert 0.

Oft wird empfohlen, diese Eigenschaften für die Elemente html und body (oder auch andere) mit dem Wert 0 vorzubesetzen. Dabei wird argumentiert, man habe so eine bessere Kontrolle über die Abstände. Das folgende Negativbeispiel mag diese Vorgehensweise illustrieren:

html, body, p, ul, li { padding: 0; margin: 0; }

Tatsächlich gibt es eine Reihe von Gründen, die gegen diese Praxis sprechen.

• Die Ausgangswerte der Eigenschaften margin und padding sind bereits 0. Sie brauchen also nicht noch einmal extra deklariert zu werden.
• Wer zusätzlich Listenelemente in so eine Vorbesetzung mit hinein nimmt, muss beachten, dass dadurch die Einrückung der Listenpunkte verhindert wird.
• Die Deklarierung von Eigenschaften am Element html ist an sich ohne Sinn, da hier body das einzige darstellbare Kindelement ist. Selbst wenn deklarierte Werte von html an body vererbt werden, reicht es aus, die Deklaration am Element body vorzunehmen (siehe dazu das nächste Beispiel). Grundsätzlich sollte man den Selektor html nur für Browserhacks verwenden.

Wirklich notwendig ist nur, dass man die Eigenschaft margin am Element body zurück setzt, weil sonst in den meisten modernen Browsern die Inhalte mit einem kleinem Abstand zum Browserfenster ausgegeben werden:

body { margin: 0; }

Font-Eigenschaften für alle Elemente vorbesetzen.

Eine andere Unsitte ist die Empfehlung, die Angaben zur Schrift für alle Elemente innerhalb des Webdokuments vorzudefinieren.

body, p, ol, ul, li, h1, h2, h3, h4, h5, h6, q, tr, td usw usf { font: 15px "Trebuchet MS",Verdana,sans-serif; }

Auch hier gibt es wieder eine Reihe von Argumenten, die gegen diese Praxis sprechen:

• Alle font- Eigenschaften werden vererbt, eine Deklaration ist daher nur am Element body notwendig.
• Übertriebene Gruppierungen führen zur Unübersichtlichkeit im Stylesheet.
• Auch, wenn es heute nicht mehr so wichtig ist: die zusätzlichen Bits und Bytes müssen alle herunter geladen werden und vergrößern unnötig das Übertragungsvolumen.
• So eine Vorabdeklaration für alle Elemente bedeutet eine Regel mehr, die in der Kaskade erfasst und verarbeitet werden muss. Das heißt, für die Darstellung jedes einzelnen Elements auf dem Bildschirm ist mehr Rechenzeit erforderlich – die Ausgabe im Browser wird verlangsamt.

Wenn man diese Deklaration nur an das Element body anbringt, gilt sie automatisch für alle Elemente der Website.

body { font: 15px "Trebuchet MS",Verdana,sans-serif; }

Abteilung 'Lasten und Beschränkungen'

Hier nun geht es um alles, was nicht geht. Die Liste der Ausnahmen ist nicht unbedingt kurz:

• Viele Eigenschaften vererben ihre Werte nicht.
  • Ausnahme hiervon: der Wert inherit.
• Die Bedingungen der Kaskade, die anderen Werten Vorrang vor den geerbten Werten geben können.
• Umformung relativer Werte: erst der Berechnete Wert wird vererbt.
• Einige Eigenschaften weisen bei der Vererbung Besonderheiten auf.
• Elemente mit vorgegebenen Eigenschaften.
• Elemente, die im Dokumentstammbaum nicht auftreten.

Vererben oder nicht vererben....

Die erste Einschränkung der Vererbung liegt an den Eigenschaften selbst, denn nicht für alle Eigenschaften werden die Werte von einem Element zum nächsten vererbt. Die folgende Tabelle gibt eine Übersicht darüber, welche Eigenschaften ihre Werte vererben und welche nicht. Ob Werte vererbt werden oder nicht, ist dabei nicht davon abhängig, ob sie vorher deklariert wurden. Wenn für eine Eigenschaft kein Wert deklariert wurde, gilt immer der Ausgangswert, und der wird gegebenenfalls auch vererbt.

Der Wert inherit

Der Wert inherit ist kein generischer Wert wie alle anderen Werte. Eine Eigenschaft, die mit inherit deklariert wird, nimmt immer den Berechneten Wert des Elternelements an, unabhängig davon, mit welcher Zahlenangabe und Einheit der Wert am Elternelement deklariert ist. Die Deklaration von inherit ist für den Webautor die einzige Möglichkeit, die Vererbung einer Eigenschaft an ein Element direkt zu beeinflussen.

Bei der Nutzung des Wertes inherit gibt es zwei Möglichkeiten:

• Eigenschaften, deren Werte laut Standard nicht vererbt werden:
  Sie erhalten zunächst den Ausgangswert. Hier bewirkt inherit die Vererbung der Werte des Elternelements. Dabei spielt es keine Rolle, ob für die entsprechende Eigenschaft im Elternelement ein Wert explizit deklariert wurde, ob am Elternelement der Ausgangswert gilt oder ob das Elternelement den Wert seinerseits geerbt hat. Der Browser verwendet immer den Wert, der schon für das Elternelement gilt.
• Eigenschaften, deren Werte normalerweise vererbt werden:
  Hier macht die Verwendung von inherit zunächst keinen Unterschied. Sie bewirkt dasselbe wie die normale Vererbung. Ein Unterschied zeigt sich erst dann, wenn dem Wert der Zusatz !important angehängt wird und dadurch verschiedene Stylesheets oder Deklarationen unterschiedliche Gewichte erhalten. Der Zusatz !important ist nicht vererbbar.

Der Wert inherit begründet keinerlei Unterschied in der Spezifizität.

Bis heute wird dieser Wert nur durch die Gecko-Engine ausreichend unterstützt. Man sollte deshalb die Verwendung von inherit auf Beispielseiten beschränken, aber in der Produktion vermeiden.

Relative und absolute Werte

Im Bereich der CSS-Werte unterscheiden wir zwischen absoluten und relativen Werten. Absolute Werte sind an jedem Element unabhängig von den Werten anderer Elemente, sie werden nicht umgeformt oder umgerechnet und genauso vererbt, wie sie deklariert werden. Beispiele für absolute Werte sind: top, orange, hebrew oder 12pt.

Relative Werte (und dazu gehören auch Prozentwerte) dagegen richten sich nach den Werten der Eigenschaften an anderen Elementen, z. B. richtet sich eine in em ausgedrückte Schriftgröße nach der Schriftgröße des Eltern- Elements und eine in Prozent deklarierte Breitenangabe richtet sich nach der Breite des umschließenden Blocks. Diese Werte durchlaufen vor der Darstellung eine Reihe von Umrechnungen. Ein Zwischenergebnis dieser Umformungen, der sog. Berechnete Wert, wird an die Nachkommen weiter vererbt. Die genaue Abfolge dieser Umrechnungen ist im Abschnitt Relative Längenwerte detailliert beschrieben.

Besonderheiten bestimmter Eigenschaften

• Kurzschrift-Eigenschaften:
  Die Ausgangswerte von Kurzschrift-Eigenschaften sind nicht definiert und wo nichts definiert ist, kann auch nichts vererbt werden. Genau genommen bedeutet die Deklaration einer Kurzschrift- Eigenschaft nur eine Abkürzung der Deklaration für alle Einzeleigenschaften. Wenn die Werte dieser Einzeleigenschaften weiter vererbt werden, hat das hat am Nachfolge- Element denselben Effekt, als wenn die Werte der Kurzschrift- Eigenschaft vererbt würden.
  Als vereinfachte Faustregel (die aber nirgendwo geschrieben steht und auch nicht 100%-ig korrekt ist) kann man davon ausgehen: werden die einzelnen Eigenschaften vererbt, wird auch die Kurzschrift- Eigenschaft vererbt.
• Hintergrund:
  Für den Hintergrund kommt der Farbwert transparent als Ausgangswert der Hintergrundfarbe mit ins Spiel. Deshalb ist jeder Hintergrund ursprüglich durchsichtig. Wenn wir nun den Hintergrund für ein Element deklarieren, dann entsteht der Eindruck, dass die Nachfahren- Elemente den Hintergrund erben. Das erscheint aber nur aufgrund des Durchsichtigkeit des Hintergrundes so. Im Beispiel 1 ist dies gut erkennbar (die Graphik benötigt einige Momente mehr zum Laden).
• Textdekoration:
  Auch die Textdekoration eines Elements läuft unter den Nachfahren- Elementen weiter, ohne aber wirklich vererbt zu werden. Hier liegt das Prinzip der Überspannung zugrunde, dass auf der Referenzseite der Eigenschaft text-decoration genau erklärt ist.

Besonderheiten bei bestimmten Elementen

Zum Abschluss soll noch auf einige spezielle Eigenheiten hingewiesen werden, mit denen Elemente die Darstellung und Vererbung ihrer Eigenschaften beeinflussen.

• Elemente, die nicht im Stammbaum auftauchen:
  Wenn ein Element nicht im Stammbaum erscheint, kann es auch seine Eigenschaften nicht weitergeben. Dies sind insbesondere Spalten (col) und Spaltengruppen (colgroup) in Tabellen.
• Elemente mit vorgegebenen Eigenschaften:
  Dies sind Elemente, deren Verwendung in früheren Zeiten gang und gäbe war, wie das berüchtigte font, oder i und b. Alle diese Elemente enthalten ihre eigenen Eigenschaften zur Darstellung am Bildschirm. Sie unterbrechen deshalb die Vererbung und die betreffenden Eigenschaften müssen für die nachfolgenden Elemente wieder neu deklariert werden. Im Artikel HTML-Elemente und Attribute durch CSS ersetzen ist erläutert, wie sich die Verwendung dieser und anderer veralteter HTML-Elemente vermeiden lässt.
  Die Elemente em und strong gehören nicht dazu, denn laut Spezifikation dienen sie nur einer besonderen Hervorhebung von Textteilen. Wie die Browser dies umsetzen, ist nicht vorgegeben.

CSS Vererbung: vererbbare Eigenschaften – welche werden vererbt, welche nicht?

Die Liste der vererbbaren Eigenschaften ist kürzer, als man denkt. Die Spezifikation legt für jede Eigenschaft fest, ob sie vererbt wird. Die Regel dahinter ist einfach: Was den Text betrifft, wird vererbt; was die Box betrifft, nicht. Vererbbare Eigenschaften sind unter anderem color, alle font-Eigenschaften, line-height, letter-spacing, word-spacing, text-align, text-indent, text-transform, white-space, list-style, quotes, cursor, visibility und die Tabelleneigenschaften border-collapse, border-spacing, caption-side und empty-cells. Nicht vererbt werden margin, padding, border, background, width, height, display, position, float, overflow, z-index und text-decoration – Letzteres wirkt zwar optisch auf die Nachfahren, weil die Linie durchgezogen wird, aber der Wert selbst wird nicht vererbt.

Die Vollreferenz nennt für jede Eigenschaft in der Zeile Vererbung, ob sie zu den vererbbaren Eigenschaften gehört; die Schnellreferenz stellt die Angabe für alle Eigenschaften eines Kapitels in einer Spalte nebeneinander.

Der Wert inherit – Vererbung erzwingen

Für nicht vererbbare Eigenschaften gibt es einen Schalter: Mit dem Schlüsselwort inherit übernimmt ein Element den berechneten Wert seines Elternelements auch bei Eigenschaften, die normalerweise nicht vererbt werden. Ein Rahmen, der dem des Elternelements gleichen soll, eine Hintergrundfarbe, die eine verschachtelte Box wieder aufnimmt – inherit löst das ohne Wiederholung des Werts. Der zweite Nutzen: inherit hebt eine Regel auf, die weiter oben in der Kaskade etwas gesetzt hat. Ein Link in der Fußzeile, der die Textfarbe seiner Umgebung tragen soll statt des Link-Blaus, bekommt color: inherit.

footer a { color: inherit; }        /* wie der umgebende Text */
.kasten .kasten { border: inherit; } /* wie der äußere Kasten */

CSS 2.1 kennt nur inherit. Die späteren Module ergänzen initial (zurück auf den Ausgangswert), unset (vererbt oder Ausgangswert, je nachdem, was für die Eigenschaft normal ist) und revert.

Vererbung im Dokumentbaum – der Weg eines Werts

CSS Vererbung folgt dem Dokumentbaum, nicht der Reihenfolge im Quelltext und nicht der Position auf dem Bildschirm. Ein em in einem p in einem div erbt von p, das von div, das von body, das von html. Fehlt eine Deklaration auf dem ganzen Weg, gilt der Ausgangswert der Eigenschaft. Vererbt wird immer der berechnete Wert: Steht auf body font-size: 125%, dann erbt p nicht die Prozentzahl, sondern die daraus berechnete Pixelgröße. Deshalb summieren sich verschachtelte Prozent- oder em-Angaben nur dort, wo sie erneut gesetzt werden.

Beispiele: CSS Vererbung an color, font und margin

Drei Fälle, in denen CSS Vererbung, die im Alltag am häufigsten vorkommen:

1. Farbe. body { color: #333; } färbt jeden Text im Dokument, weil color vererbt wird. Ein a bleibt davon unberührt, weil der Browser-Stylesheet für Links eine eigene Farbe setzt, die in der Kaskade gewinnt.
2. Schrift. html { font: 100%/1.5 serif; } gibt allen Elementen Schriftfamilie, Größe und Zeilenhöhe. Formularelemente sind die bekannte Ausnahme: Browser setzen für input, button und select eigene Werte; font: inherit auf diesen Elementen stellt die Vererbung wieder her.
3. Außenabstand. div { margin: 2em; } rückt nur das div ein, nicht seine Kinder – margin wird nicht vererbt. Wer den Abstand innen wiederholen will, schreibt ihn erneut oder benutzt inherit.

CSS Vererbung und Kaskade – zwei verschiedene Mechanismen

Beide beantworten die Frage, welcher Wert gilt, aber in verschiedener Reihenfolge. Zuerst läuft die Kaskade: Sie sammelt alle Deklarationen, die auf ein Element zielen, und wählt nach Herkunft, Spezifität und Reihenfolge eine aus. Erst wenn die Kaskade nichts ergibt, greift die Vererbung – und danach der Ausgangswert. Eine vererbte Farbe verliert deshalb gegen jede noch so schwache Regel, die das Element direkt trifft.

Beispiele

Die Beispiele sind eigenständige Dokumente und werden hier so dargestellt, wie ein Browser sie rendert.

Häufige Fragen

Was bedeutet Vererbung in CSS?

Ein Element übernimmt den berechneten Wert einer Eigenschaft von seinem Elternelement im Dokumentbaum, wenn keine Regel diese Eigenschaft für das Element selbst setzt. Das gilt nur für Eigenschaften, die die Spezifikation als vererbbar kennzeichnet.

Welche CSS-Eigenschaften werden vererbt?

Vor allem Text- und Schrifteigenschaften: color, font, line-height, letter-spacing, word-spacing, text-align, text-indent, text-transform, white-space, list-style, visibility, cursor und die Tabelleneigenschaften border-collapse, border-spacing, caption-side, empty-cells.

Welche Eigenschaften werden nicht vererbt?

Alles, was die Box betrifft: margin, padding, border, background, width, height, display, position, float, overflow, z-index. Auch text-decoration wird nicht vererbt, wirkt aber optisch auf Nachfahren.

Was macht der Wert inherit?

inherit weist einer Eigenschaft ausdrücklich den berechneten Wert des Elternelements zu – auch bei Eigenschaften, die normalerweise nicht vererbt werden. Er eignet sich, um Werte wieder aufzunehmen oder eine weiter oben gesetzte Regel aufzuheben, etwa color: inherit für Links.

Wird der angegebene oder der berechnete Wert vererbt?

Der berechnete Wert. Aus font-size: 125% auf body erbt ein Absatz die daraus berechnete absolute Größe, nicht die Prozentangabe. Deshalb summieren sich em- und Prozentangaben nur dort, wo sie erneut deklariert werden.

Warum erbt mein Link die Textfarbe nicht?

Weil das Stylesheet des Browsers für a:link und a:visited eine eigene Farbe setzt. Diese Deklaration trifft den Link direkt und gewinnt in der Kaskade gegen die Vererbung. a { color: inherit; } stellt die Vererbung wieder her.

Was ist der Unterschied zwischen Vererbung und Kaskade?

Die Kaskade wählt unter allen Deklarationen, die ein Element direkt treffen, nach Herkunft, Spezifität und Reihenfolge. Vererbung greift erst, wenn die Kaskade für eine Eigenschaft nichts ergibt. Danach bleibt nur noch der Ausgangswert.

Warum haben Formularfelder eine andere Schrift als der Text?

Browser-Stylesheets setzen für input, button, select und textarea eigene Schriftwerte. Diese Deklarationen gewinnen gegen die Vererbung von body. font: inherit auf den Formularelementen behebt das.