Hauptmenü

Untermenü

Advanced CSS - Grenzen der Vererbung

1. Der "Müll" aus dem Internet

... war mal wieder ganz beachtlich. Als ich zu diesem Thema etliche Recherchen anstellte, musste ich mal wieder feststellen, dass viele der aufgestellten Behauptungen / Theorien / Beweise / Mutmaßungen doch ziemlich an den Tatsachen vorbei geschrammt sind. Es kann natürlich durchaus sein, dass die Spezifikationen das tatsächlich so vorsehen. Nur wurden dabei offenbar die Browser übersehen. Darum habe ich die folgenden Punkte auch in allen gängigen Browsern (für PC) überprüft, um auf Nummer sicher zu gehen

2. Das Grundsätzliche

Wer die folgende Liste überfliegt, wird doch ziemlich enttäuscht sein über die Grenzen der Vererbung. Zumal ich das Prinzip ja so überschwänglich gelobt habe. Allerdings ist die Aufteilung, nachdem ich sie mal zusammengestellt habe, meiner Meinung nach wohl durchdacht. Tatsächlich bedeuten die Grenzen der Vererbung für uns in der tagtäglichen Arbeit eine erhebliche Erleichterung.

3. Die Übersicht

CSS-Anweisung wird vererbt wird nicht vererbt Ausnahmen/Anmerkungen/Hinweise
Schriftformatierungen font
color*
letter-spacing
word-spacing
text-transform
text-decoration**
  * greift nicht beim <a>-Tag
** Soll angeblich nicht vererbt werden, die Browser machen es trotzdem
Listen   list-style* * Soll vererbt werden, aber nur wenn es zuvor wie auch immer an ein <ul> gebunden wurde
Ausrichtung line-height*
text-align
text-indent**
white-space
vertical-align * Wirkt beim <a> "außerhalb" des Tags, wenn nicht display: block gesetzt wurde
** Keine Auswirkung auf <a>, <textarea> wird komplett verschoben
Abstände   margin*
padding*
* In allen Varianten
Rahmen   border* * In allen Varianten
Positionierung   position*
top, left, bottom, right*
* Hat faktisch eine Auswirkung, wenn das übergeordnete Element entsprechend ausgezeichnet wurde. Ist aber keine Vererbung im eigentlichen Sinn
Hintergrund   background* * In allen Varianten
Darstellung   width, height
display*
visibility*
overflow
clip
float
clear
z-index*
* Hat faktisch eine Auswirkung, wenn das übergeordnete Element entsprechend ausgezeichnet wurde. Ist aber keine Vererbung im eigentlichen Sinn

4. <textarea>

Dieses HTML-Tag scheint aus unerfindlichen Gründen eine Sonderstellung einzunehmen. Normale Vererbung gibt es hier grundsätzlich erst mal nicht. Kein font, kein color, garnichts. Nüscht, nada, niente, rien! Gut, ein paar Ausnahmen gibt es schon, aber auf die Details gehe ich hier nicht ein. Probiert es mal selber aus.

Warum?

Keine Ahnung. Ich selber wüsste keinen vernünftigen Grund, warum man ausgerechnet bei diesem Element eine so rabiate Ausnahme macht. Vielleicht liegt der in den Untiefen alter HTML-Spezifikationen begraben, deren Sinn in heutigen Tagen keiner mehr versteht. Fakt ist aber, dass man Vererbung bei textarea-Elementen nur über das Wildcard-Zeichen * erreichen kann. Also zum Beispiel mit:


*
{
  font-familyVerdanaArialHelveticasans-serif;
}
div.content *
{
  font-familyVerdanaArialHelveticasans-serif;
  color#00f;
}

Und warum kann man nicht einfach eine CSS-Anweisung mit textarea erstellen? Klar kann man das. Aber das hat nichts mit Vererbung zu tun, du Trollnase grins.

Weitere Elemente

Das Verhalten von <textarea> gilt auch noch für Tags, die zur Auszeichnung von so genanntem Computercode bestimmt sind. Als da wären <pre>, <code> und noch ein paar andere, die ich in meinem ganzen Leben noch nicht benutzt habe und sie deshalb nicht aufführe. Hier halte ich diese Einschränkung aber für sehr nützlich.

5. inherit

Will man die Grenzen der Vererbung umgehen, so hilft dabei obiges Zauberwort. Denn damit kann man Eigenschaften von Elternelementen auf deren Kinder weitergeben. Die Zuweisung selber erfolgt dann bei Letzteren.


<div class="hint">
  <h3>Bla Blubb Jodelbalh</h3>
</div>
...
div.hint {
  border1px solid #dadada;
}
div hint h3 {
  borderinherit;
}

In diesem Fall erbt also die Überschrift dritter Ordnung den Rahmen im berühmten Trio-grau vom übergeordneten <div>-Element. Aha aha aha.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt