Berechnung der Spezifität von Stylesheet-Informationen
Beim Einsatz von cascading Stylesheets (css), kann man schon manchmal verzweifeln, wenn das definierte Stylesheet den gewünschten Effekt vermissen lässt, obwohl es syntaktisch richtig eingesetzt wurde. Dabei können Sie über die Berechnung der Spezifität relativ einfach ermitteln, welches Stylesheet die höchste Priorität hat bzw. an welchem Selektor Sie die Stylesheet-Information hinterlegen müssen, damit der gewünschte Effekt eintritt.
Herkunft der Stylesheet-Information
Bevor Sie mit der Definition eigener Stylesheets beginnen, sollten Sie grundlegende Kenntnis über die Herkunft der vorhanden Stylesheet-Information haben.
- Browser-Stylesheets
Dies sind die Formatierungen, die der Browser für die verschiedenen Elemente standardmäßig mit bringt. - Benutzer-Stylesheets
Dies sind die Formatierungen, die der Anwender individuell in seinem Browser vornimmt (z.B. Schriftarten, Schriftgrößen).
Benutzer-Stylesheets haben eine höhere Priorität als Browser-Stylesheets. - Autoren-Stylesheets
Dies sind individuell vom Autor einer Website erstellte Formatierungen.
Autoren-Stylesheets haben eine höhere Priorität als Benutzer-Stylesheets.
Berechnung der Spezifität
Zur Berechnung der Spezifität nimmt man folgende Kategorisierung vor:
- Die höchste Spezifität haben style-Attribute direkt am HTML-Element (Kat. a).
- Danach folgen Stylesheets, die für einen bestimmten Id-Selektor festgelegt wurden (Kat. b).
- Danach folgen Stylesheets, die über Klassen- oder Pseudoklassen-Selektoren definiert wurden (Kat. c)
- Zuletzt folgen Stylesheets, die einem Typ-Selektor (z.B. div, p, span) zugeordnet wurden (Kat. d)
- Universalselektoren (z.B. *) werden bei dieser Berechung nicht berücksichtigt.
Daraus lässt sich die folgende Wertigkeit ableiten:
- Kat. a = 1000er-Stelle
- Kat. b = 100er-Stelle
- Kat. c = 10er-Stelle
- Kat. d = 1er-Stelle
Wenn man diese Einteilung in eine Tabelle überträgt, kann man die Spezifität relativ einfach ermitteln:
Die Stylesheet-Definition mit der größen Spezifität trifft auf das jeweilige Element zu. Bei gleichwertigen Angaben kommt i.d.R. die
zuletzt getroffene Vereinbarung zur Anwendung.
Durch die !important-Regel können diese Regeln außer Kraft gesetzt und die Priorität somit erhöht werden, z.B. a {color:red !important;}
Debug von Stylesheet-Informationen
Zum Debuggen von Stylesheet-Informationen kann man folgende Firefox-AddOns empfehlen: