Comments on: The Real Performance Overhead of CSS Expressions

By: Rupam

Rupam — Wed, 05 May 2010 10:58:11 +0000

This is really a very good piece of writing as it can clarify lots of doubt in the mind of css coders. Again I’ve a doubt. setting of a width can be done javascript but I’d like to see the coding for the following css expresion written for png images in ie6.

position:relative;
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “spacer.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));

By: GreLI

GreLI — Fri, 05 Mar 2010 16:33:47 +0000

IE expressions are great to fix support for various things like hover (using exclusive onmouseenter/onmouseleave) or focus on bulk of elements. Mostly I use one time run expressions via redefining attribute by runtimeStyle and I noticed that expressions run many times when there are multiple selector. E.g. in .class1, .class2, .class3 { behavior: expression(…) } expressions executing constantly, but when I used only one selector expression was executed only one time per element (zoom is used for better combining):
.input_text {
//zoom: expression(
function(t){
t.runtimeStyle.zoom = ‘normal’;
t.attachEvent(‘onfocus’,function() { t.className += ‘ focus’ });
t.attachEvent(‘onblur’,function() { t.className = t.className.replace(‘ focus’, ”) });
}(this)
);
}

By: Márton Sári

Márton Sári — Fri, 19 Feb 2010 02:10:07 +0000

As mentioned above by Arnab C, who linked to my article, one-time execution of CSS expressions is a solved issue.

The only thing I would add to this here is that therefore you can put virtually any initialization javascript code in CSS expressions without repeated execution.

Not as i could mention any valid case for putting complex code in expressions, but for CSS workarounds targeted for IE, i think, CSS expressions are a good place.

By: Andreas Grabner

Andreas Grabner — Wed, 17 Feb 2010 22:02:11 +0000

@Will & @Boris
Thanks for your input – thats great!
I am sure all our readers appreciate the input.

By: Boris Kuzmic

Boris Kuzmic — Wed, 17 Feb 2010 20:12:29 +0000

@Andreas
I’ve tested in WinXP virtual machine (again, IE8 is default browser) using DynaTrace Ajax Edition and it is still evaluating css expressions.
Also, I’ve played with removeExpression function but with no real effect.
On every: “Rendering (Drawing)” I see about 50 – 100 new “Rendering (Evaluating CSS expressions)”.

Maybe I’ll use this technique only for IE6 (in some sort of generic stylesheet).

By: Will Peavy

Will Peavy — Wed, 17 Feb 2010 16:05:24 +0000

I found a nice sample at: http://perishablepress.com/press/2008/05/28/css-hackz-series-png-fix-for-internet-explorer/
.
.png {
position:relative;
behavior:expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “‘, sizingMethod=’image’)”,
this.src = “transparent.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “‘, sizingMethod=’crop’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));
}

By: Will Peavy

Will Peavy — Wed, 17 Feb 2010 15:41:52 +0000

@Andreas – I haven’t setup a sample, but plan to.

@Robin – to clarify: alphaimageloader and opacity are commonly used in CSS expressions.

By: Andreas Grabner

Andreas Grabner — Wed, 17 Feb 2010 14:39:12 +0000

@Boris: yep – i ran into the copy/paste error in the beginning
I am not sure how detailed IETester is. dynaTrace AJAX actually hooks the Rendering Engine of IE – therefore we get more information than most of the other tools. I can totally see why the Rendering engine still is evaluating the expression – even though it does not call the JavaScript method anymore it still needs to iterate through all CSS Expressions internally.
Let me know your findings once you have time testing it on other systems
Thanks for your input!!

By: Boris Kuzmic

Boris Kuzmic — Wed, 17 Feb 2010 14:29:32 +0000

Also, did you correctly copy pasted code. Watch out for “”.
Just a thought

By: Boris Kuzmic

Boris Kuzmic — Wed, 17 Feb 2010 14:26:25 +0000

I’ve tested in only on Vista (IE 8 installed) using IETester v.0.4.2(both IE 6 and 7 instances) so I don’t know how it works in native browser.

Also Dean Edwards has been using that style long time ago. I can’t access his blog, so here is cached version of blog post:

http://74.125.77.132/search?q=cache:8d9ldygCGk8J:dean.edwards.name/weblog/2005/06/base64-sexy/+ie+base64+sexy+version

I will try later in virtual machine with WinXP.