06.04.05Inheritance vs. Cascade - Vererbung und Kaskaden
Es ist mal wieder an der Zeit einen wichtigen Artikel ins Deutsche zu übersetzen. Ich habe mich für den Artikel “Inheritance vs. Cascade” von Tommy Olsson entschieden. In diesem Artikel beschreibt er zwei wichtige Konzepte in CSS, deren Unterschiede man kennen sollte. Vererbung und Kaskaden, bekannter als Inheritance und Cascade.
Inheritance (Vererbung) und Cascade (Kaskaden oder Wasserfall) sind zwei der wichtigsten Aspekte von CSS. Trotzdem verwechseln sogar die besten unter den Webentwicklern diese beiden Konzepte.
Inheritance - Vererbung
Vererbung bedeutet, dass untergeordnete Elemente Eigenschaften ihrer Elternelemente erben. Nicht alle CSS-Eigenschaften werden vererbt, aber die meisten.
Um was gehts bei der Vererbung? Stellen wir uns vor, es gäbe in CSS keine Sache wie Vererbung und das wir folgendes HTML-Listing hätten:
<div id="sidebar"> <p>Erster Absatz</p> <ul> <li>Listenelement 1</li> <li>Listenelement 2</li> </ul> <p>Zweiter Absatz</p> </div>
Lasst uns weiter annehmen, dass der Text auf der Sidebar eine unterschiedliche, kleinere Schriftgröße haben soll, als der Rest des Dokuments / der Website. Ohne Vererbung müssten wir die folgenden CSS Anweisungen schreiben:
#sidebar p, #sidebar li {
font-family: Verdana, Arial, sans-serif;
font-size: 80%;
}
Je mehr unterschiedliche Elementtypen unsere Sidebar besitzt, desto mehr Selektoren müssten wir hinzufügen. Aber dank des Vererbungsmechanismus, benötigen wir lediglich einen einzigen Selektor.
#sidebar {
font-family: Verdana, Arial, sans-serif;
font-size: 80%;
}
Die Schriftenfamilie und Schriftgrößen werden an alle untergeordneten Elemente des Elements mit id=”sidebar”, z.B. beide Textabsätze (<p>) und Listen sowie deren Elemente (<ul> und <li>), weiter vererbt.
Dank der Vererbung können wir Basiseigenschaften wie Schriftarten, Schriftgrößen und Farben bereits für das <body>-Element setzen, ohne diese für jedes Element im Dokument wiederholen zu müssen. Ganz wichtig: Hintergründe werden nicht vererbt, auch wenn es den Anschein hat. Denn wird für den <body> ein Hintergrundbild festgelegt, gilt das optisch zunächst auch für alle anderen Elemente. Diese haben aber tatsächlich, wenn kein Hintergrund für diese festgelegt wurde, automatisch den Wert transparent, also durchsichtig.
Wir haben sogar die Möglichkeit, Vererbung für Elemente zu bestimmen, denen CSS-Eigenschaften normalerweise nicht weiter vererbt werden. Das Schlüsselwort ist inherit.
Anmerkung: Die Vererbung in CSS ist das wichtigste Werkzeug, um schlanke Stylesheets zu schreiben.
Cascade - Kaskade
Cascade bedeutet, dass Eigenschaften mehrmals für ein einziges Element festgelegt werden können; entweder die gleiche Eigenschaft mit unterschiedlichen Werten oder verschiedene und zusätzliche Eigenschaften. Z.B. betrachten wir folgendes Markup:
<p id="x1" class="note">Text Text Text</p>
Wir können jetzt spezifische Eigenschaften festlegen oder globale Eigenschaften überschreiben. Z.B. mit folgendem CSS:
p {
margin:0 0 1em;
font-family:Verdana,Arial,sans-serif;
}
#x1 {
margin-right:2em;
margin-left:3em;
}
.note {
color:#f00;
font-weight:bold;
}
Ohne die Kaskade müssten wir alle Eigenschaften dieses spezifischen Absatzes (#x1) definieren:
#x1 {
margin:0 2em 1em 3em;
color:#f00;
font-family:Verdana,Arial,sans-serif;
font-weight:bold;
}
Den Mechanismus, der bestimmt welche Eigenschaften angewendet werden, wenn mehrere Regeln in Konflikt geraten, nennt man specificity (Spezifizität). Es gibt eine Reihe von Regeln in CSS, die genau definieren wie eindeutig festgelegt wird, welche Formatierungen zur Anwendung kommen.
Anmerkung: Diese Spezifizität wird nach bestimmten Kriterien berechnet. Hier nachzulesen.
Ein weitere Einsatzmöglichkeit für das Kaskaden-Konzept besteht darin, Definitionen in mehrere Bereiche zu zerlegen. So ist es beispielsweise möglich, ein Basis-Stylesheet anzulegen und einige seiner Definitionen zu ersetzen oder neue hinzuzufügen. So z.B. in speziellen Stylesheets, die nur für einzelne wenige Seiten verwendet werden.
Credits
Mit freundlicher Genehmigung von Tommy Olsson
Englischer Originalartikel: “Inheritance vs. Cascade”
Peter Müller am Jun 10, 2006 | Reply
Der Browser erstellt aus dem HTML-Quelltext einen hierarchischen Dokumentenstammbaum (DOM), in dem alle auf der Seite benutzten Elemente aufgelistet werden.
Anschließend durchläuft er auf der Suche nach einem Wert Element für Element und CSS-Eigenschaft für CSS-Eigenschaft einen vierstufigen Entscheidungsprozess, die Kaskade.
Bleibt eine CSS-Eigenschaft nach der Kaskade ohne Wert, prüft der Browser, ob er durch Vererbung eine Angabe findet.
Bringt auch die Vererbung kein Ergebnis, nimmt er einen Standardwert.
makcie am Jun 13, 2006 | Reply
Davon war in der CSS2-Spezifikation doch wohl keine Rede - siehe
6 Assigning property values, Cascading, and Inheritance.
Dort steht and und nicht versus.
Sowohl bei der Kaskade als auch bei der Vererbung geht es darum HTML-Elementen Eigenschaften und Werte zuzuweisen.
Ausgangspunkt sowohl bei der Kaskade als auch bei der Vererbung ist der Stammbaum einer Webseite.
Die Kaskade regelt in einem mehrstufigen Entscheidungsprozess, welche Eigenschaften und Werte zugeordnet werden, wenn für ein HTML-Element mehrere Stilregeln definiert wurden.
Die Vererbung regelt, wie Eigenschaften von übergeordneten Elementen an untergeordnete Elemente (Nachfahren) weitergegeben werden.
Bei der Kaskadierung und Vererbung handelt es sich um zwei verschiedene Konzepte, die aber nicht gegeneinander wirken, sondern sich ergänzen - bei der Zuweisung von Eigenschaften und Werten gilt folgende Reihenfolge:
Kaskade – Vererbung – Standardwert.
Das alles hat Peter Müller in seinem Buch “Little Boxes” sehr verständlich und anschaulich erläutert.
Björn am Jun 13, 2006 | Reply