CSS expressions in IE and scoping

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.

Show Plain Text
  1. #wrapper {
  2.     width: expression(documentElement.clientWidth > 1000 ? '1000px' : 'auto');
  3. }

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.

Show Plain Text
  1. 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.

Comments

These 2 make IE crash every time:
width:expression(this.clientWidth + ‘px’);
width:expression(this.parentNode.offsetWidth + ‘px’);

This one (similar to yours) makes the DIV so small it disappears, or abnormally large!
width:expression(this.parentNode.clientWidth + ‘px’);

Is there any logic to this at all? You might be the first person in history to get Microsoft expressions to work for anything other and min and max height and width!

anonymous user on 9/30/08

Any script execution at the Style Sheet stack of the browser is a performance issue (as you can also tell from the comment of iGuide) 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.

Good news is Microsoft is ending expressions in Internet Explorer as announced on Thursday earlier this week. Indeed a very nice move towards the standard-compliant browser.

anonymous user on 10/18/08

flash tekkie: I am a big supporter of standards, however IE 6/7 are totally broken in the scope of standards compliancy. With so few standards compliant options to get the results needed, we have no other options outside of hacking. I know there are performance issues with css expressions, but in many cases they are the only option, if you know of a way to emulate things like min-width without and being able to specify all 4 side positions when absolutely positioning elements I would love to hear them.

mark story on 10/19/08

Thanks, I needed the second one for IE6, worked good for me :)
I have read your last coomment and fully agree with you. except for a psition:absolute; issue. In my practice there was no need to specify all 4 side positions. Two was always enough such as top:5px; left:5px; or bottom:-5px; right:0; jr in any other way with percentage issues

tylik on 7/12/10

Comments are not open at this time.