Shaun Inman schlug vor ein paar Wochen die Einführung neuer Selektoren für CSS vor, mit deren Hilfe man sich auf das Elternelement beziehen könne. Er nennt sie „qualified selectors“. Diese Selektoren haben einen gewissen Charme. Man könnte damit wenn/dann-Beziehungen abbilden, die sich derzeit nur mit Javascript abbilden lassen. John Resig schlug umgehend eine jQuery-Variante vor. Eric Meyer bemerkte in einem Kommentar, daß dieser Selektor schon häufig in der zuständigen W3C-Gruppe vorgeschlagen und wieder abgelehnt wurde.
Viel interessanter – und bedenklicher – finde ich allerdings den Kommentar von Dave Hyatt – Chefentwickler von Webkit, der Safari-Browserengine. Er gibt ein starkes Statement gegen moderne CSS3-Selektoren ab:
„The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.“
Jon Sykes unterfüttert dieses Statement mit einem breiter angelegten Performancetest. Das interessanteste an seinem Ergebnis finde ich, daß sich IE und Safari stark gleichen, während beim Firefox sich kaum Unterschiede in den Untersuchungsgegenständen ausmachen lassen. Die Performanceunterschiede selber finde ich logisch und erklärbar. Je allgemeiner die Regeln werden und je weiter weg die Regeln von den Elementen sind – also keine Inline-Styles – umso mehr muss der Browser das gesamte DOM analysieren. Das dauert natürlich.
Diese Erkenntnis besagt nichts anderes, als daß wir uns einen Vorteil auf Kosten eines Nachteils erkaufen. Das ist doch normal. Denkt an all diejenigen, die mit dem Rauchen aufhören, ihre Nervosität nun aber mit Schokolade bekämpfen und deshalb zunehmen.
Hyatts Schlußfolgerung finde ich falsch. Wir sollten nicht aufhören, CSS3-Selektoren zu nutzen oder von vornherein mit ihnen abschließen. Wir sollten auch nicht jedem Element eine ID geben oder gleich zu Inline-Styles übergehen. Wir sollten auch nicht wieder zu Styling mit HTML übergehen. Hyatt und seine Kollegen sollten sich allerdings daran machen, ihre Browser zu verbessern, die Performance zu steigern. In diesem Falle zeigt mal wieder ein Finger nach vorne aber vier auf einen selber zurück.
5. Juni 2008 um 9:57 Uhr
Insgesamt ist das eine fragwürdige Einstellung für einen Browserhersteller. Bis CSS3 flächendeckend zur Verfügung steht (und damit sinnvoll anwendbar wird), wird sich auch die Leistungsfähigkeit der Systeme wieder deutlich erhöht haben.
5. Juni 2008 um 10:25 Uhr
Ich unterschreibe deinen Schlussatz. Immherhin haben die Webkit-Jungs doch auch die JS-engine so umgeschrieben dass sie vom Ansatz her anders arbeitet und schon in der anfangsphase ohne signifikante optimierungen 1,6 mal schneller ist als die optimierte version der alten Engine. Das müsste wohl auch beim CSS möglich sein.
5. Juni 2008 um 12:20 Uhr
Ich denke, die Performance in Sachen CSS wird generell überbewertet. Wann kam es denn mal vor, das eine Seite wirklich so langsam aufgebaut wurde das wir eine echte zeitliche Verzögerung im CSS-Rendering merken konnte, die den Besucher dann auch noch stören könnte?
Da dauert das Laden der Bilder doch schon um ein vielfaches länger. Und warum wird eigentlich vorgeschrieben was wir nutzen sollten? Es geht doch nur darum, die Möglichkeit überhaupt erstmal zu schaffen. Ob wir am Ende wirklich wieder mit Klassen arbeiten weil die Seite hackelt bleibt doch dann uns überlassen.
5. Juni 2008 um 14:29 Uhr
Das ist ja schön und gut, aber wie häufig sieht man die momentan schon zum Teil funktionerenden Selektoren?
Nachfahren-, Kind- und Nachbarselektoren sind in der freien Wildbahn selten anzutreffen. Selbst einfachste Errungenschaften wie Pseudoklassen (abgesehen von :hover), sind den allerwenigsten CSS Dateien zu finden. Verständlich, weil der IE bei vielen nicht mitmacht.
Insofern ist der Vorbehalt gegenüber einem so komplexen Ausdruck (immer wenn man programmieren zurück schauen muss wird es schwierig) verständlich.
6. Juni 2008 um 11:36 Uhr
Happy birthday to you, happy birthday tooo yoouu! …
9. Juni 2008 um 11:47 Uhr
ich sehe in de rückwärts gewandten Selektoren, die sich auf das Elternelement beziehen, eher die Möglichkeit für Css-Hacks, ähnlich von „!important“, d.h. theoretisch habe ich eine sauber Struktur, in der Praxis schlägt das Marketing zu, und ich muss nachbessern.
Imho stellt sich hierbei also das Performanceproblem nicht wirklich, schliesslich baut man so nicht seine Grundstruktur auf.
Die Kritik an „descendant and child selectors“ ist abwegig und stellt imho das am Css in Frage, was der eigentliche sein entscheidender Vorteil ist: die Möglichkeit, html weitgehend auf die Struktur zu beschränken.
Insofern denke auch ich – grade als Safari Nutzer – Dave, es gibt noch viel zu tun – nicht nur bezüglich der Performance…
Grüsse, Joachim