CSS Expression

ie

What is CSS expression?

CSS expressions allow a web author to hook script expressions into the dynamic nature of HTML elements. The natural events of the page (onresize, onclick, onmouseover and so on) causing these expressions to be re-evaluated whenever content could possibly reflow. Once IE encounters the expression construct it binds the code directly to the object. If you use any fancy DOM work to disable either the entire stylesheet (stylesheet switching) or just to kill a single element, it won’t work as the expression is already bound to the actual elements.

Why should we avoid CSS expression when possible?

Avoid CSS expression if possible. CSS-expression is only available in IE 5 - 7. Microsoft removed it from some version of IE8. It can be used to emulate some CSS properties that IE does not support: position:fixed, max-width, max-height, min-width, and min-height.

IE support something called CSS expression. A lot of time, people use it to address CSS incompatibilities across browsers. An expression is just a javascript expression that IE will execute and the result is set as the CSS style. In this case, here is a way to get around the lack of support for CSS min-width in IE. You can say that when this expression is evaluated, look at the body width, if it is less than 600 pixels, set it to 600 pixel, otherwise set it to "auto". They problem is that CSS expressions are executed many more time than you expects. They are execute everytime you move the mouse around the page. If you have this expression, during the typical user interaction with the page, the expression is executed between 10 to 50 thousand times, so if you aren't aware of that and you've done a little heavy in your javascript, it can really impact the load time of the page. There are way to get around it. If we have a one time expression, it only has to be evaluated once during the lifetime of the page, we can do a one time expression where the evaluation of the expression overwrite itself. Or we can write an event handler. As in the case of min-width, rather than using an expression, add an event handler to the resize event. That what make CSS expression easy. They are tie to events automatically so that you don't have to worry about that. But that is what is bad about them. They are tied to all the events, so they are executed all the time. So do the heavy lifting yourself, figure out which event you need those expression to be evaluated against, and tie it to those events.

CSS expressions allow a web author to hook script expressions into the dynamic nature of HTML elements. The natural events of the page (onresize, onclick, onmouseover and so on) causing these expressions to be re-evaluated whenever content could possibly reflow. Once IE encounters the expression construct it binds the code directly to the object. If you use any fancy DOM work to disable either the entire stylesheet (stylesheet switching) or just to kill a single element, it won’t work as the expression is already bound to the actual elements.

If you try to apply the max-width to an element whose own width is dependent on the elements contained within. Reflowing content causes the onresize event to fire, which in turn may cause an infinite loop.

IE8 supports CSS expressions only if run in "compatibility" mode, but it does not support them in "standards" mode. If you do not need to maintain backwards compatibility with older versions of IE, you should convert any instances of expressions used in place of standard CSS properties to their CSS standard counterparts. For a complete list of CSS properties and IE versions that support them, see the MSDN CSS Attributes Index. If you do need to support older versions of IE in which the desired CSS properties are not available, use JavaScript to achieve the equivalent functionality.

If you are using CSS expressions for dynamic styling, it makes sense to rewrite them as pure JavaScript to both improve performance in IE and get the benefit of supporting the same functionality in other browsers at the same time.

How to use CSS expression?

Here is the basic usage:

p {
    width:expression(some javascript code);
}

How to use CSS-expression to emulate position:fixed in IE6?

#fixed {
  position:absolute;
  left: 10px;
  top: expression(body.scrollTop + 50 + 'px');
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License