Freitag, 10. Dezember 2010

28: Inheritance and Cascade

Zusammengefasst nach dem Artikel von Tommy Olsson
http://dev.opera.com/articles/view/28-inheritance-and-cascade/
28: Inheritance and Cascade



Vererbung
 
Mit Vererbung im CSS wird gemeint, dass bestimmte Eigenschaften von einem Eltern Element an sein Kinder weitervererbt wird. Jedoch sind nicht alle CSS Eigenschaften vererbbar, da es bei diesen keinen Sinn machen würde, wie zum Beispiel beim margin.


Warum Vererbung sinnvoll ist

 
Die Vererbung ist sehr hilfreich beim stylen eines HTML Dokumentes mithilfe des CSS. Würde es diese Funktion nämlich nicht geben, müssten Eigenschaften wie font-family, font-size und Textfarbe für jedes einzelne Element definiert werden.
Mit der Vererbung ist es dann möglich, zum Beispiel für html oder body die Text Eigenschaften zu definieren und diese Definitionen werden dann von allen anderen Elementen übernommen. Dies kann dann auch bei bestimmten Containern angewandt werden, welche dann ihre Eigenschaften auf alle Elemente innerhalb dieses Containers übertragen.


Wie Vererbung funktioniert

 
Jedes Element innerhalb eines HTML Dokumentes bekommt die Eigenschaften des Eltern Elements vererbt, ausgenommen vom html, da es kein Eltern Element hat.
Jedoch muss beachtet werden, dass vererbte Eigenschaften überschrieben werden können. Wenn zum Beispiel im html font-size: 16px; angegeben ist aber im body nur 14px; wird das letztere das vorherige überschrieben. Daraus kann man sich merken, dass das untere Element alle gleichen Eigenschaften vom oberen überschreibt. Es zählt immer das, was als letztes angegeben wurde.


Vererbung erzwingen

 
Vererbung kann auch erzwungen werden, wenn bei einer Eigenschaft „inherit“ dazugestellt wird:

Beispiel:
p {
  background: inherit;
}
Bei diesem Beispiel werden alle Paragraphen die Hintergrund Eigenschaften vom Eltern Element übernehmen.

Das erzwingen einer Vererbung sollte aber mit bedacht verwendet werden, da Microsoft Internet Explorer diese Eigenschaft nicht unterstützt.


Der Wasserfall

 
Schon aus dem Namen CSS - Cascading Style Sheet kommt heraus, dass der Wasserfall ein wichtiges Konzept ist. Damit wird der Mechanismus gemeint, welcher das Endergebnis kontrolliert, wenn mehrere, widersprüchliche CSS Erklärungen für dasselbe Element verwendet werden. Es gibt drei Konzepte, welche die Ordnung von CSS Erklärungen kontrollieren:

  • Wichtigkeit
  • Spezifität
  • Grundordnung
  • Wichtigkeit

Wichtigkeit:Die Wichtigkeit einer CSS Erklärung hängt davon ab, wo sie festgelegt wurde. Die widersprüchlichen Erklärungen werden in dieser Ordnung angewandt:
  • User agent style sheets
  • Normal declarations in user style sheets
  • Normal declarations in author style sheets
  • Important declarations in author style sheets
  • Important declarations in user style sheets
User agent style sheet: ist der bereits existierende style sheet des Browsers. Jeder Browser hat automatisch Definitionen, wie verschiedene HTML Elemente angezeigt werden sollen, wenn keine anderen Eigenschaften vom Benutzer oder Designer angegeben werden.

User style sheet: ist der vom Benutzer definierte style sheet. Nicht alle Browser unterstützen user style sheets, aber sie können vor allem für Personen mit bestimmten Einschränkungen von Vorteil sein.

Author style sheet: ist der vom Autor der Seite erstellte style sheet, oder des Webdesigners.

Normal declarations: sind genau das, was der Begriff sagt, normale Erklärungen. Der Gegensatz dazu sind important declarations, welche Erklärungen sind, die von einem !important Anweisung gefolgt sind. Important declarations übertrumpfen alle anderen style sheets.

Grundsätzlich ist aber zu sagen, dass ein Designer nicht zu viel über die Wichtigkeit von Style Sheets nachdenken sollte. Es ist nicht möglich zu wissen, ob ein Benutzer ein user style sheet definiert hat, welches das CSS vom Designer überschreibt.

Spezifität:
Wenn mehrere Eigenschaften eines Elementes nicht übereinstimmen, und jede hat die gleiche Wichtigkeit, dann wird die Eigenschaft gewinnen, welche die beste spezifische Zuweisung hat. Eine Zuweisung mit geringer Spezifität trifft auf mehrere Elemente zu, wie *, eine hohe nur auf ein Element der Seite, wie id oder nav.

Grundordnung:
Wenn nun zwei Erklärungen auf ein Element zutreffen und beide die gleiche Wichtigkeit und Spezifität hat, dann entscheidet die Grundordnung. Die Erklärung, welche später im style sheet aufkommt, gewinnt.
Wenn nur mit einem externen style sheet gearbeitet wird, dann wird bei einem Konflikt die untere Erklärung die obere überschreiben. Wenn ein Konflikt bei mehreren style sheets entsteht, entscheidet die Ordnung, wie diese mit dem html verlinkt wurde. Auch hier wird wieder der untere style sheet den oberen überschreiben.

Keine Kommentare:

Kommentar veröffentlichen