[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.