Sie befinden sich hier:
» 
» 
30.05.2011

Berechnung der Spezifität von Stylesheet-Informationen

Kategorie(n): HTML und CSS Tipps

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:

Selektor
 a b c d 
Spezifität
style=““
 1 0 0 0 
1000
#divId
 0 1 0 0 
0100
.clsXYZ
 0 0 1 0 
0010
p
 0 0 0 1 
0001
Bei verschachtelten Selektoren muss man die einzelnen Spezifitäten summieren:
Selektor
 a b c d 
Spezifität
#divId p
 0 1 0 1 
0101
#divId p a
 0 1 0 2 
0102
#divId .clsXYZ a
 0 1 1 1 
0111
#divId a:hover
 0 1 1 1 
0111
#divId .clsXYZ a:hover
 0 1 2 1 
0121

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:

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

19