CSS + JavaScript = Evil
I’ve never been a big fan of using the Internet Explorer CSS expressions, under the belief that you can use regular JavaScript to do the same thing whenever you want. However, recently I fell victim to the belief expressions may be useful and decided to give it a try. Then proceeded to spend three days tracking down a JavaScript bug that was related directly to the expression I forgot I used. Here’s what happened.
I had two elements on the page, and the expression used these two elements to create a measurement of width for a third. I removed one of the two elements without remembering I had used it in an expression. When I loaded up the page in IE, I got a JavaScript error, one of the very useful, “‘variableName’ is undefined.” It gave line 1 and character 1 as the offending code. Naturally, I went into all the JavaScript files and looked…no mention of that variable. Stepped into the debugger at the time the error occurred, the debugger said there was no source available for this location. Lot of help that was. I systematically went through adding and removing elements on the page before I finally called over another set of eyes. Yep, it was the expression that I forgot I had used making a reference to the element I had removed.
So, if you ever run into a problem where you get a JavaScript error that you can’t step into a debugger to see and the offending code is said to be on line 1 and character 1 in IE, check your CSS for expressions. It could save you a lot of time and effort.
Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.
Both comments and pings are currently closed.




4 Comments
Couldn’t agree more. I stumbled upon similar issues several times and eventually gave up using IE expressions in CSS completely.
Alexei on April 6th, 2006 at 7:41 am
I also found that if you have too many elements to which a given CSS rule and its expression are applied (through class, id, or some other selector), peformance can suffers heavily for more dynamic pages, as the browser is having to run the expression for each such element quite frequently.
Julian on April 6th, 2006 at 8:01 am
This is the same reason I hardly use expressions. There’s been too many times I forgot I used one and spent quite a while trying to find the culprit of a problem, only to find the culprit is an expression.
There’s no doubt they’re handy; especially when you need to know the dimensions of one element and apply it to another.
Jeremy on April 6th, 2006 at 1:48 pm
Ditto – I agree too.
Microsoft’s MSDN docs on Dynamic Properties and CSS expressions make them sound great. But the actual outcome is slow, buggy, and proprietary.
Bradley on April 8th, 2006 at 4:21 pm
Comments are automatically closed after 14 days.