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-family: Verdana, Arial, Helvetica, sans-serif;
}
div.content *
{
font-family: Verdana, Arial, Helvetica, sans-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 .
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 {
border: 1px solid #dadada;
}
div hint h3 {
border: inherit;
}
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