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

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 2

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).