http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Vererbung und Initialwerte

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Es gibt in CSS so viele Eigenschaften, dass man unmöglich alle für jedes Element setzen kann. CSS sieht daher vor, dass jedes Element automatisch für jede denkbare Eigenschaft einen Wert hat. Mit ihren Deklarationen ändern Webautoren also immer nur den Wert einer Eigenschaft und setzen nichts grundlegend Neues.

Falls der Webautor für ein Element keine explizite Deklaration vorgenommen hat, erfährt der Browser aus zwei Quellen, welchen Wert er auf ein Element anwenden muss: aus den Initialwerten und der Vererbung.

Die CSS-Empfehlung bestimmt für fast jede Eigenschaft einen sogenannten Initialwert, der vom Browser angenommen wird, wenn Sie nichts anderes angeben. Nur wenige Eigenschaften verfügen über keinen Initialwert, beispielsweise die Eigenschaft color, deren Initialwert den Einstellungen des Browsers überlassen bleibt.

Da CSS für hierarchische Auszeichnungssprachen konzipiert wurde, bei denen jedes Element außer dem Wurzelelement innerhalb eines anderen liegt, können Eigenschaften entlang dieser Verschachtelung vererbt werden. Aus diesem Grund hat der Inhalt der em-Elemente im folgenden Beispiel eine Schrift derselben Schriftfamilie wie der ihrer Elternelemente h1 und p.

<h1>Überschrift mit einem <em>betonten</em> Wort</h1>
    
<p>Absatz mit einem <em>betonten</em> Wort</p>


Abb. 6.4: Das Element em erbt die Schriftdefinition ihres Elternelements. Lediglich der Kursivschnitt kommt hinzu

Vererbung hilft sehr dabei, effiziente Stylesheets zu schreiben. So genügt es meistens, Schriftart, Zeilenhöhe, Vorder- und Hintergrundfarbe für das Element body zu setzen – die Vererbungsregeln nehmen Ihnen die Arbeit ab, dies für spätere Elemente zu wiederholen.

Es gibt Ausnahmen, in denen die Vererbung nicht funktioniert oder browserübergreifend nicht oder schlecht implementiert ist. Links haben meistens eine andere Farbe als gewöhnlicher Fließtext (für gewöhnlich Blau für unbesuchte, Violett für besuchte Links), ebenso Formularelemente. Im Quirks Mode (siehe Kapitel 6.8.2 »Doctype Switching«) werden einige Schriftangaben nicht in Tabellenzellen hinein vererbt.

In einem Fall lässt sich die Vererbung implizit außer Kraft setzen, also ohne dass Sie einen neuen Wert angeben. CSS kennt zusammenfassende Eigenschaften, mit denen viele verwandte Eigenschaften in einer Deklaration gebündelt werden können. Die Eigenschaften

p {
  font-weight: bold;
  font-size: 2em;
  line-height: 1.5;
  font-family: Georgia;
}

können Sie wie folgt zusammenfassen:

p { font: bold 2em/1.5 Georgia; }

Das Kürzel font fasst allerdings nicht nur die vier oben genannten Eigenschaften zusammen, sondern auch noch die Eigenschaften font-style und font-variant, selbst wenn Sie sie nicht explizit hinschreiben! Geben Sie zu diesen Eigenschaften nichts an, werden sie automatisch auf ihren Initialwert gesetzt. So haben Überschriften in den meisten Browsern standardmäßig einen fetten Schriftschnitt. Mit der Deklaration font: 3em "Palatino Linotype"; heben Sie diesen Schriftschnitt jedoch auf, weil der Initialwert für font-weight eben normal ist und nicht bold. In CSS 3 werden Webautoren mit dem Schlüsselwort initial eine weitere Möglichkeit zum Aufheben der Vererbung bekommen. Doch ehe das praxistauglich wird, vergehen wahrscheinlich noch ein paar Jahre.

Über das Schlüsselwort inherit als Wert lässt sich Vererbung erzwingen. Damit lassen sich selbst solche Werte vererben, die das normalerweise nicht tun, background-color etwa. Beachten Sie, dass Sie inherit in zusammenfassenden Eigenschaften nicht mit anderen Werten zusammen verwenden dürfen.