dogfood CSS-Test

Kombinierte CSS-Klassen und CSS-Selektoren

[09h16] WebDev -- Ich muss mich mal heute etwas länger hinsetzen und paar eMails beantworten, u.a. zum gestrigen Eintrag bzgl. der beiden Klassen in einem Klassen-Attribut.
Machen wir mal ein Beispiel:
.a { border: 4px solid #ffcc00;}
.b { background-color: #ffff00;}
.a.b { color: #ff6600;}
DIV mit Klasse A: class="a"
DIV mit Klasse B: class="b"
DIV mit Klasse A und B: class="a b"
Das interessante ist das dritte DIV mit dem Klassenwert class="a b", der günstigtensfalls von drei Selektoren angesprochen werden kann: .a, .b und .a.b.
Safari 1.2.2: alle drei Selektoren
Netscape 6.2/NT SP6: alle drei Selektoren
Firefox 0.8/OS X: alle drei Selektoren
Opera 5/NT 4 SP6: alle drei Selektoren
Opera 6/NT 4 SP6: alle drei Selektoren
Opera 7/NT 4 SP6: alle drei Selektoren
Opera 7.52/OS X: alle drei Selektoren
IE4/NT SP6: nur die beiden ersten Selektoren
IE5.5/Win95: alle drei Selektoren
IE6/NT SP6: alle drei Selektoren
IE5.2/OS X: Nur .a wird korrekt angezeigt. Der zweite DIV-Container (.b) übernimmt auch die Attribute von .a.b. Der dritte DIV-Container .a.b wird zwar korrekt angezeigt, aber sorgt ja für den „Kollateralschaden“ beim DIV .b.
Gerrit hat mich in einer Mail erst auf die Idee gebracht die kombinierte Klasse mit .a.b anzusprechen. Er verweist zudem auf DHTML-Kitchen der Schwächen des IE5/Mac im Umgang mit solchen Selektoren beschreibt und im Falle des Selektors .a.b abstürzt.
Ulf berichtet von merkwürdigen Konstellationen unter IE5 (ich nehme an Windows) mit #id und .classes, die von IE5 nicht genommen werden.
Generell gilt: dies ist nur ein einfaches Testbeispiel. Alle Erfahrungen mit CSS zeigen, dass der Teufel im Detail steckt. Und so kann es irgendeine Konstellationen (z.B. durch komplexen CSS-Code) geben, in denen die obigen Selektoren dann doch für Probleme sorgen.