IE6 performance with CSS expressions

Question

We are developing a web application that will be sold to many clients. There is already one client (a bank) which has decided that it will buy the product once it is ready. Unfortunately due to some miscommunication it came out rather late that the only browser they use is IE6. The application was already started with the thought in mind that it does not need to support anything else below IE7. The results are pretty good too - it's fully useable on IE7/FF/Opera/Safari. Haven't tested on Chrome, but expect little problems there. Unfortunately there is now the IE6 requirement after all...

The application isn't too far developed yet, and the design is pretty much OK, so the change isn't that horrible. Still, it'll take some work.

A nice thing about IE6 is that it supports two nonstandard and very helpful features. First is conditional comments, which lets me include some CSS/JS files only for IE6. Second is CSS expressions. That is, things like this:

input
{
    background-color: expression(this.type='text'?'silver':'');
}

In essence it binds CSS values to JavaScript expressions. This allows to easily emulate many CSS features that IE6 does not support natively, and could lighten my burden considerably.

Unfortunately IE is infamous for its JavaScript performance. I'm worried that using too many of these expressions might slow it down to a crawl. I also have no idea what computers the bank is using. Since it's a pretty big one, I'd expect a wide variety in all their branch offices. I don't expect to use anything much there - some simple math, ternary operators and looking at this element's/parent element's properties. Still there would be a couple dozen of these in the IE6_override.CSS file.

Can this be a problem?

Added: Blah, this was what I was afraid of. OK, will see how much I can use other hacks to get around the shortcomings. Thanx, people!

Answer 1

http://developer.yahoo.net/blog/archives/2007/07/high_performanc_6.html

Turns out you might want to avoid using these, they are dangerous.

Answer 2

Yes, expressions are realy slow in IE period. Find ways to avoid them.

Answer 3

Unfortunately CSS expressions are very poor performance wise, as the result is calculated constantly, all the time the page is loaded, not just when the page is first loaded. If you have to use expressions then you'd be better off use using standard JavaScript with an onLoad event.

See this article for more info: http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/

Answer 4

Expressions are re-evaluated on many page events, which has the potential to slow down entire page performance when used too liberally. (And yet still, they can't respond to all events that might cause them to need re-evaluating.)

MS have admitted expression() was a mistake, and are removing it from future browsers.

There are generally better individual JavaScript workarounds for IE6's various CSS shortcomings.

It is rather sad that so many companies are still sticking with the dire IE6. Maybe if you deliver the project late they'll have upgraded by then!

Answer 5

I haven´t tried it myself, but IE7-js looks promising. It claims to make IE6 compatible with IE7

Edit: By the way, to just add some styles for IE6, you can also use

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen"  href="ie6styles.css" />
<![endif]-->

And you can always use jquery to set css properties dynamically in all browsers including IE6.

Answer 6

I'd suggest you to switch to any JS Framework which supports CSS Selectors so you can emulate the behaiviour of CSS expressions

you can test JS Frameworks performance if you open this URL on IE6

http://slicktest.perrohunter.com

cheers

Answer 7

Probably too late for you Vlix-...

It is possible to make IE expressions perform optimally, not only to avoid things like continuous re-evaluation, but to also hook your desired style to IE-specific classnames, therefore making your IE-Specific CSS easier to maintain (as the expressions themselves are disgusting):

input
{
 1:expression(this.executedExpressions ? void 0 : this.className += (this.type == 'text' ? ' ie-text' : ''));
 2:expression(this.executedExpressions = true);
}

input.ie-text
{
 background-color:silver;
}

If you're going to use IE expressions at all, this is the best way. (I really ought to write a thorough article about it).

Answer 8

If you do have to use them, the techniques found at One-time execution of IE CSS expressions will help with the performance (but not security) issues.