CSS expressions in IE and scoping

May 07 2008

• Hacking,
• Internet Explorer,
• Web Development,
• Web Design,
• CSS,

All versions of Internet Explorer from 5.5 forward support CSS expressions. If you are not familiar with CSS expressions in IE, they are a powerful and non-standard way commonly used to plug the gaping and vast holes in IE’s CSS support. They allow you to set properties like max-width and min-width through the use of simple Javascript expressions.

#wrapper {
    width: expression(documentElement.clientWidth > 1000 ? '1000px' : 'auto');
}
 

Many of the examples and documentation that I have found regarding this technique, generally reference documentElement, and often nothing else. Furthermore, I found microsoft’s documentation to be confusing and somewhat vague. However, there was an important pearl of information.

… Because the DHTML Document Object Model (DOM) makes every HTML element and attribute accessible, it is easy to use scripts to dynamically read and change styles. … msdn

Which got me thinking, if you can access documentElement and other DOM global objects. I wonder what this is set to in an CSS expression?

this is Interesting

To my surprise in a CSS expression this refers to the element the selector captures. Not only that but you can traverse the DOM as you normally would.

height: expression(this.parentNode.clientHeight  +"px");

This fit the ticket exactly for me. I needed to size an element that was absolutely positioned to fill its parent’s height. Normally this is impossible in IE 6, but thanks to CSS expressions and this being properly scoped you can easily access the ancestors and descendants of an element.