CSS/Vererbung

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt die Vererbung in CSS. Für die Vererbung in JavaScript siehe JavaScript/Vererbung.


Vererbung bedeutet, dass anstatt des Standardwertes der berechnete Wert der Eigenschaft des Elternelements verwendet wird .

Allgemein[Bearbeiten]

Für jede Eigenschaft ist ein bestimmter Wert als Standardwert definiert. Wird einer Eigenschaft kein Wert zugewiesen, so gilt der Standardwert als festgelegt.

Abweichend von dieser Regelung tritt das Prinzip der Vererbung in Kraft. Vererbung bedeutet, dass anstatt des Standardwertes der berechnete Wert der Eigenschaft des Elternelements verwendet wird.

Daraus folgt, dass das Wurzelelement keine Eigenschaften erben kann. Hier gilt der Standardwert. Zudem ist für jede Eigenschaft geregelt, ob sie vererbt werden kann oder nicht.

Beispiel
<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
h1 { color: green; border-left: 3px solid green; }
In diesem Beispiel werden die Eigenschaften color und border-left für das h1-Element deklariert.

Die Farbangabe wird auch vom abbr-Element verwendet, da color eine Eigenschaft ist, die vererbt wird. Der tatsächliche Standardwert der color-Eigenschaft (der vom Benutzer festgesetzt und vom Browser für das Wurzelement verwendet wird), wird hier nicht angewendet.

Die Eigenschaft border-left wird nicht vererbt, daher besitzt das abbr-Element im Gegensatz zum h1-Element keinen seitlichen Rahmen. Da border-left eine shorthand-Eigenschaft ist, werden die Standardwerte aller zusammengefassten Eigenschaften verwendet. Ausschlaggebend ist hier also, dass der Standardwert von border-left-style dem Wert none entspricht.

Anhand der Eigenschaft font-size wird deutlich, warum berechnete anstatt festgelegter Werte vererbt werden.

Beispiel
<body>
 <h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
</body>
body { font-size: 20px; }
h1 { font-size: 1.5em; }
Für das h1-Element wird die Schriftgröße auf 30 Pixel berechnet (20 Pixel mal 1,5 ergibt 30 Pixel). font-size ist eine Eigenschaft, die vererbt wird, daher ist die Angabe font-size: inherit; beim abbr-Element nicht erforderlich.

Angenommen, es würde der festgelegte Werte vererbt. Dann betrüge die Schriftgröße des abbr-Elements 45 Pixel (30 Pixel mal 1,5 ergibt 45 Pixel). Dies wäre jedoch unerwünscht, da das Element der strukturellen Auszeichnung und nicht der zusätzlichen Gestaltung dient.

Tatsächlich wird daher der berechnete Wert des h1-Elements (30 Pixel) geerbt.

inherit - Vererbung erzwingen[Bearbeiten]

Obwohl nur bestimmte Eigenschaften vererbt werden können, ist es möglich, das Prinzip der Vererbung auf jede beliebige Eigenschaft anzuwenden. Hierzu wird einer Eigenschaft das Schlüsselwort „inherit“ (englisch: „erben“) als einziger Wert zugeordnet.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Wird die Vererbung erzwungen, entsprechen sowohl der festgelegte als auch der berechnete Wert der Eigenschaft dem berechneten Wert der Eigenschaft des Elternelements.

Beispiel
<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
h1 { border-left: 3px solid green; }
abbr { border-left: inherit; }
In diesem Beispiel bewirkt das Schlüsselwort inherit, dass die Eigenschaft border-left vom h1-Element an das abbr-Element vererbt wird. Beide Elemente erhalten also einen seitlichen Rahmen.
Beachten Sie: Der Wert inherit kann jeder Eigenschaften zugewiesen werden. Legen Sie den Wert jedoch für eine Eigenschaft des Wurzelelements fest, so nimmt diese Eigenschaft ihren Standardwert an.

Achtung!

Der Internet Explorer kennt die Angabe inherit erst seit Version 8, verarbeitet sie aber in den Versionen 9 - 11 fehlerhaft: Mit Ausnahme der Eigenschaft font-size, erben Eigenschaften den spezifizierten anstatt des berechneten Werts ihres Elternelements. Dies kann zu Darstellungsfehlern führen, wenn Werte in relativen Einheiten wie em oder ch festgelegt sind, die Basis dieser Einheiten jedoch pro Element unterschiedlich definiert ist.

initial - Standardwert wiederherstellen[Bearbeiten]

Die Vererbung verhindert bei den Eigenschaften, die sie betrifft, dass nach dem Festlegen eines Werts der Standardwert wiederhergestellt werden kann. Andere Eigenschaften verfügen nicht über Werte, die dem definierten Standardverhalten entsprechen (z.B. text-align).

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

In CSS 3 wurde daher das Schlüsselwort initial (englisch sinngemäß „Ausgangspunkt“) hinzugefügt. Wird initial einer Eigenschaft als Wert zugeordnet, so wird der Standardwert der Eigenschaft verwendet.

Beispiel
<div id="kommentare">
 <h1>Kommentare zum Artikel</h1>
 <p>Erster Kommentar</p>
</div>
#kommentare { text-align: center; }
#kommentare p { text-align: initial; }
In diesem Beispiel wird jeder Text innerhalb des div-Elements zentriert. Anschließend wird die Textausrichtung der p-Elemente auf den Standardwert zurückgesetzt. Dadurch werden Texte, deren Schrift von links nach rechts verläuft, linksbündig; Texte, deren Schrift von rechts nach links verläuft rechtsbündig dargestellt.