In den letzten beiden Ausgaben des Webstandards Magazin war ein sehr interessanter Artikel darüber. Damit auch die wenigen unter euch die dieses hervorragende Magazin nicht regelmäßig lesen, und damit auch ich im Zweifelsfall weiß wo ich noch mal nachlesen kann, schreibe ich das mal hier in Kurzform zusammen.

Die Ausführungsreihenfolge der CSS Eigenschaften läuft in 4 Stufen ab.

Stufe 1: Die Gewichtung
Stufe 2: Der Ursprung
Stufe 3: Die Spezifität der Selektoren
Stufe 4: Die Reihenfolge der Selektoren

Den Ursprung kann man kurz folgendermaßen zusammen fassen:
Das Browser-Stylesheet bestimmt als erstes wie eine Seite aussehen soll. Allerdings nur rudimentär mit Anweisungen zu Schriftgrößen, Farben, Links, Formularen usw.
Neuere Browser gestatten es dem Benutzer aber auch eigene Browser-Stylesheets anzulegen. So genannte Benutzer-Stylesheets.
Als drittes gibt es dann noch die Autoren-Stylesheets. Das sind alle CSS-Anweisungen die von uns Webworkern definiert werden.

Daraus ergibt sich schon mal folgende Reihenfolge für die Gewichtung der einzelnen Stylesheets.

1. Benutzer-Stylesheet mit !important
2. Autoren-Stylesheet mit !important
3. Autoren-Stylesheet
4. Benutzer-Stylesheet
5. Browser-Stylesheet

Manch einen wird es wundern wieso das Benutzer-Stylesheet mit der !important Anweisung aus Platz 1 liegt und damit die höchste Priorität hat, aber das gibt den Benutzern mit körperlichen Beeinträchtigungen die Möglichkeit, in letzter Instanz, zu bestimmen wie eine Seite aussehen soll.

Nachdem nun klar ist welche Stylesheets wann angewendet werden geht es um die so genannte Spezifität.

Zur Ermittlung der Spezifität wird ein Punktesystem mit vier kommagetrennten Zahlen verwendet. Wobei die erste Zahl die höchste Wertigkeit hat und die letzte die Niedrigste.

Anweisungen die immer Auswirkungen vor allen andern Anweisungen haben, mit Ausnahme derer mit !important, sind diejenigen die mittels style="" definiert werden. Aber da wir ja alle moderne Webworkern sind und brav unser Layout vom Content trennen, kommt das für uns natürlich nicht in Frage.
Hätten in unserem Punktesystem aber einen Wert von 1000 oder (1,0,0,0)

Bleiben die Sektoren in unseren externen CSS-Dateien.
Da wäre als erstes die Selektion anhand einer ID (#nav) welche in unserem Punktesystem einen Wert von 100 oder (0,1,0,0) hat.

Der Klassen-Selektor und Pseudoklassen(.level1 oder :first-child) erhalten den Wert 10 oder(0,0,1,0)

Als letztes dann noch der Typ-Selektor und die Pseudoelemente (p oder :first-letter). Sie haben den Wert 1 oder (0,0,0,1)

Der Universalselektor * besitzt keine Spezifität und hat den Wert 0.

Um das ganze etwas zu veranschaulichen, hier noch ein Beispiel ausgehend von folgendem HTML.

<div id="nav">
   <div class="level">
      <p class="info">Ich bin ein Text</p>
   </div>
</div>

Wenn man jetzt folgendes in sein CSS schreibt wundert man sich schnell wieso nicht der gewünschte Erfolg eintritt und der Text in rot dargestellt wird.

#nav p { color: black;}
.info {color: red;}


Die Erklärung ist ganz einfach, die Anweisung #nav p hat laut unserem Punktesystems die Spezifität 101 oder (0,1,0,1).
Die Anweisung .info aber nur 10 (0,0,1,0).
Somit gewinnt die Klasse mit dem höherem Wert. In diesem Fall #nav p

Um den gewünschten Effekt zu erzielen muss man die Wertigkeit der Anweisung erhöhen.
Das geschieht entweder über die !important Regel, welche einer Anweisung auf die höchste Priorität setzt. Oder aber man selektiert ein wenig anders.
#nav .info {color: red;} setzt die Wertigkeit auf auf 110 oder (0,1,1,0)

Direkt gegenüber gestellt haben wir folgende Situation:
#nav p = 101
#nav .info = 110

Gerade wenn Stylesheets auf mehre Dateien verteilt sind oder einige 100 Zeilen umfassen kann man sich sehr leicht unbewusst einzelne Anweisungen überschreiben. Ich versuche die !important Regel so selten wie möglich zu verwenden da sie nur schwer überschrieben werden kann. Manchmal möchte man aber ganz bewusst Ausnahmen schaffen.

Der letzte und 4. Punkt bei der Ausführung ist die Reihenfolge.
Bei einer gleichen Wertigkeit gewinnt die Regel die als letztes im Code vorkommt.
Um in unserem Beispiel die letzte Anweisung gewinnen zu lassen, indem wir für eine gleiche Wertigkeit sorgen, müssten wir folgende Anweisungen schreiben.

p.info {color: black}
.level p { color: red;}

Beide Anweisungen haben den Wert 11 oder ( 0,0,1,1)

So das soll es gewesen sein. Wer es noch genauer wissen möchte, dem empfehle ich die Artikel im Webstandards Magazin. Dort wird dann unter anderem erklärt in welchen Fällen der Universalselektor doch eine Wertigkeit bekommen kann und vieles mehr.
Mir bleibt nur noch zu sagen, dass niemand behauptet hat das CSS leicht sei

Perfekt um minimalistische Webseiten zu schaffen

Update:
Wie ich gerade erfahren habe, ist Dirk Jesse, der Erfinder des genialen CSS-Frameworks YAML, für die 74 Byte verantwortlich.
@Andreas Danke für den Hinweis

Mit 58% haben die Conditional Comments gewonnen.
Wie bereits gesagt sicherlich nur ein Trend aber doch interessant.
Die Ausführliche Auswertung findet ihr bei Vladimir Simovic

Jetzt hat Vladimir Simovic eine Umfrage zu genau diesem Thema gestartet.
Ich bin ja mal gespannt was dabei heraus kommt. Obwohl ich mir durchaus bewusst bin dass das Ergebnis lediglich einen Trend darstellen kann.

Da hat man ein zentriertes und mit viel Mühe erstelltes Layout und dann erscheint dieser unschöne Nebeneffekt wenn man zwischen Seiten mit mehr und weniger Inhalt umschaltet.
Das Layout verschiebt sich horizontal da Raum für den entstehenden Scrollbalken geschaffen werden muss. Auch in dem Unternehmen in dem ich arbeite, existieren unterschiedliche Meinungen darüber ob man nun das Springen verhindern soll, in dem man per CSS immer Platz für einen Scrollbalken vorhält, oder nicht.

Update:

Gerade lese ich in den Kommentaren von Michales Artikel das es mit der CSS3 Anweisung overflow-y am Body Element möglich ist den Scrollbalken, bei Bedarf, inaktiv darzustellen. Diese Anweisung wir vom Firefox und Safari interpretiert. Da der IE ja ohnehin den Platz vorhält, ist das eine gute Lösung.

Ich bin allerdings der Meinung dass eine CSS Datei, übersät mit Ausnahmen für den Internet Explorer sehr schnell unleserlich und dadurch unwartbar wird. Deswegen werde ich auch weiterhin für diesen Browser eigene CSS Dateien nutzen. Ich glaube die Performance Einbußen sind zu vernachlässigen.

Ich habe die Hoffnung auch noch nicht aufgegeben das mit dem IE8 alles besser wird.

Das ganze hat aber offensichtlich so viel Emotionen ausgelöst das Ron Garret in zwei Folgeartikeln (“CSS and the meaning of life ” und “On the semantics of HTML“) die Diskussion am laufen hält.

Ich bleibe trotzdem dabei und werde meine Layouts weiterhin mit CSS erstellen.
Alles andere wäre aus meiner Sicht ein großer Schritt zurück in die 90er.

Normalerweise stellt der Browser DIV Element ohne Größenangaben in der maximal möglichen Breite da.
Nutzt man im FF3 die beschriebene Methode zum clearen von Float-Elementen, wird das äußere Div nur so breit aufgezogen wie es nötig ist um alle Inhalte darzustellen.
Der CSS Code

<style type="text/css">clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Diese Angabe benötigt der Safari-Browser zwingend !! */
.clearfix { display: block; }

/* for IE-mac */
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
</style>

Das Ergebnis im Firefox 3

Man sieht sehr gut das die blau umrahmte Box nicht die Breite der ganzen Seite beansprucht.

Der selbe Code im Firefox 2

Hier wird die Box auf die volle Breite gezogen. genau so wie man es erwartet.

UPDATE:

Mittlerweile habe ich heraus gefunden dass es sich um keinen Fehler handelt, sondern an folgender Zeile liegt.
display: inline-block;
Der Firefox 3 interpretiert das Attribut inline-block laut Spezifikation.
Da hierbei der Block selbst als Inline Element behandelt wird, dehnt er sich nur so weit aus wie der Inhalt es benötigt. Also ein völlig korrektes Verhalten. Aber mal ehrlich, wer von euch wusste auswendig was dieses Attribut bewirken soll?

Also ich glaube (hoffe) ja das es sich hier um einen Aprilscherz handelt.
Denn sollte so ein Blödsinn wirklich Realität sein ………
Ich will gar nicht darüber nachdenken.

Also noch einen schönen 1. April euch allen da draußen.

Wie man sieht scheint es beim IE7 auch noch nicht sehr viel besser geworden zu sein.

Na ja, ist ja noch Beta, obwohl das Gefühl habe ich beim IE6 ja auch immer .