The expression Property Value

Internet Explorer 5 for Windows introduced CSS expressions, an extension that allows us to use Microsoft JScript to assign a dynamic value to a CSS property value.1 This value could be something as simple as a mathematical calculation, or something as complicated as an expression to calculate an appropriate width based on the size of the browser window.

Important: Active Scripting Must Be Enabled

In order for expressions to work they do need JavaScript to be enabled on the client browser. Even though they are called from within a CSS style sheet they’ll fail if JavaScript is disabled. It should also be noted that there may be security issues in using expressions and there is also a significant impact to performance and therefore in most cases it is best to avoid using expressions at all and find alternative more suitable methods instead.

Without getting into too much detail about scripting, here are a couple of examples to give you an idea of how CSS expressions work.

The first example demonstrates how we can use an expression to imitate the min-width and max-width CSS properties that aren’t supported by Internet Explorer 6 and earlier versions. The following example applies to Internet Explorer Windows versions 5 and above:

#outer{
  width: expression(
      (d = document.compatMode == "CSS1Compat" ?
          document.documentElement : document.body) &&
      (d.clientWidth > 1024 ? "1024px" :
          d.clientWidth < 600 ? "600px" : "auto")
  );
  background: red;
}

This expression results in a value that’s applied to the width property. The element with an ID of "outer" will be restricted to a maximum width of 1024 pixels, and a minimum width of 600 pixels, depending on the size of the browser window. The width value is automatically monitored and updated, so the user’s resizing of the browser window will trigger whether the minimum or maximum width should be in effect. Note that the expression needs to take into account whether the element is being rendered in quirks or standards mode in order to ascertain the correct value for clientWidth, as the method for obtaining this value varies between these two modes.

In the next example, we imitate the position property value fixed, which, again, isn’t supported in Internet Explorer for Windows versions 6 and earlier:

h1#fixed {
  position: absolute;
  top: expression(
      (d = document.compatMode == "CSS1Compat" ?
          document.documentElement : document.body) &&
      (eval(d.scrollTop))
  );
}

The h1 element with ID "fixed" will remain at the top of the viewport even though the content of the main document scrolls up and away. The display is a little jerky, which exemplifies a drawback of using expressions: a considerable performance overhead incurred by doing so. As the values are being monitored constantly you may find that the performance of the page becomes slower, and the display isn’t as smooth as usual when windows are resized or redrawn.

Expressions are a powerful feature, but they do blur the distinction between presentation and behavior. Think carefully before you use expressions, and assess whether the behavior you want could be implemented more cleanly via a dedicated script.

Important: IE8 and Expressions

As of Windows Internet Explorer 8, dynamic properties have been deprecated and are only supported for Web pages displayed in IE5 mode or IE7 mode.

Footnotes

1 JScript is Microsoft’s implementation of JavaScript. While JScript’s core language implementation is basically the same as JavaScript’s, the DOM implementation is quite different.

User-contributed notes

ID:
#3
Contributed:
by ain
Date:
Sat, 18 Oct 2008 11:06:56 GMT

Any script execution at the Style Sheet stack of the browser is a performance issue and more importantly a security threat so the use of IE expressions should not be encouraged. It's a non-standard approach that does not comply with W3C directives.

Microsoft has decided to end expressions in Internet Explorer as well so IE8 will run without this support by default (in Standards mode).

Related Products