Mit CSS-Expressions kann man in alten Internet Explorern bis Version 7 JScript (Microsofts JavaScript-Variante) in CSS notieren und damit Werte von CSS-Eigenschaften berechnen. Auf diese Weise lassen sich CSS-Darstellungsangaben, die alte IEs nicht interpretieren, auch in alten IEs umsetzen.
Beispiel: Um Links in der Textfarbe darzustellen, lässt man diese vom Elternelement erben:
a { color: inherit }
IEs ≤ 7 verstehen den Wert inherit jedoch nicht. Eine CSS-Expression dafür wäre (Achtung, so nicht verwenden):
a { color: expression( this.parentNode.currentStyle.color ) }
Die allgemeine Syntax ist:
Selektor { Eigenschaft: expression( JScript-Ausdruck ) }
Zu beachten ist, dass in den Klammern nur Ausdrücke (expressions) stehen dürfen, keine Anweisungen (statements). Siehe molilys JavaScript: Syntax-Grundlagen.
In einer Regel zur Website-Performanz sagt Steve Souders: „Das Problem mit Expressions ist, dass diese viel öfter ausgewertet werden als man denkt. Sie werden nicht nur dann ausgewertet, wenn die Seite gerendert oder ihre Größe geändert wird, sondern auch, wenn gescrollt wird und sogar dann, wenn der Nutzer die Maus auf der Seite bewegt.“ Dies verlangsamt die ohnehin schon langsame Darstellung von Webseiten im Internet Explorer noch mehr.
Er gibt jedoch auch gleich die Lösung dafür: „einmal ausgewertete Expressions, wobei das erste Mal, wenn eine Expression ausgewertet wird, diese die CSS-Eigenschaft auf einen expliziten Wert setzt, welcher die CSS-Expression ersetzt.“
Das relativiert seine Empfehlung „Vermeide CSS-Expressions“; sie sollte lauten: Vermeide wiederholt ausgewertete CSS-Expressions.
Das Überschreiben des Werts der CSS-Eigenschaft erreicht man mit dem runtimeStyle-Objekt:
Selektor { Eigenschaft: expression( this.runtimeStyle.Eigenschaft = JScript-Ausdruck ) }
In unserem Beispiel:
a { color: expression( this.runtimeStyle.color = this.parentNode.currentStyle.color ) }
Bei Eigenschatften mit Bindestrich ist zu beachten, dass diese in JavaScript in CamelCase notiert werden, margin-left bspw. als marginLeft.
Verstoßen CSS-Expressions nicht gegen das Prinzip, HTML, CSS und JavaScript sauber voneinander zu trennen? Nein, denn das Prinzip besagt, Markup, Darstellung und Verhalten sauber voneinander zu trennen. (Siehe dazu Jens Meierts Einführung in Wartbarkeit und die Abbildungen.) HTML, CSS und JavaScript sind Techniken dafür, nicht die Schichten selbst. Wenn JScript verwendet wird, um die Darstellung anzugeben, weil dies in alten IEs mit reinem CSS nicht möglich ist, dann gehört dieses JScript eben zur Darstellungsschicht, nicht zur Verhaltensschicht. Von daher spricht nichts dagegen, solches JScript im Stylesheet zu notieren.