Aug 16

Expressions in CSS

About Dynamic Properties: Ever heard of IE’s CSS “expression” property? It allows you to set a CSS property not to a constant, but to the result of a JavaScript expression. Like this:


p
{
width:expression(400 + "px");
}

What this lets you do, according to this really good article, is make IE emulate the max-width CSS property that it really should support like all other good browsers. Like this:


p
{
max-width:800px;
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}

Ugly hack, but crappy browsers will do that.


Comments

by Deane,   September 13, 2004 9:02 PM  

Incidentally, this hack is as good as worthless under Windows XP SP2. I tried it, and I got something I've never seen before:

A little sound effect went off, and a yellow bar appeared under the address bar explaining that "for my protection" the page had been prevented from "displaying ActiveX content."

It gave me the option to allow it, but what good is that? Too bad -- this was a nice way around a stupid, stupid limitation of IE.


by wilpak,   October 14, 2004 11:47 AM  

I think a lot is going to change in the client-side scripting since SP2 blocks most of the JS hacks.


by Deane,   October 14, 2004 11:58 AM  

I agree. Very sad, really -- this was a good way to get IE to do what you wanted, not to mention a great tool for intranet developers standardized on IE.


by jflanigan,   November 14, 2004 1:15 PM  

The ActiveX warning with XP SP2 is not just targeted at JS hacks. Just including an empty script element will cause it to fire.


by Scroll,   February 1, 2006 2:48 PM  

I know the comments are very old but when you upload your website you shouldnt have the yellow bar appear. It only appears when the file is locally for me


by Satya,   February 21, 2006 5:01 PM  

We found a number of machines would hang or otherwise behave weirdly when expression() was used with IE. There may have been other factors like spyware involved.


by Robert K S,   August 4, 2006 1:21 PM  

I can corroborate Satya's comment. Especially, minimizing IE and trying to come back to the browser will hang if expression() is included in a page's CSS. Too bad; it would have been useful.


by Josh,   January 21, 2008 6:56 AM  

I realize that this comment comes almost a year and a half following the last one, but I thought I'd add this: that expression() in css is a javascript line, and any script blocker will block it or inform you that a site is using scripts. Javascript is client-side meaning that it is working on your machine. Things like the markup, php or asp, cgi, or whatever are server-side, but scripts like Javascript will be recognized as some kind of Active-X addon. In this case it's an IE Active-X control that allows expression() css hacks to be utilized.


by Josh,   January 21, 2008 6:57 AM  

I realize that this comment comes almost a year and a half following the last one, but I thought I'd add this: that expression() in css is a javascript line, and any script blocker will block it or inform you that a site is using scripts. Javascript is client-side meaning that it is working on your machine. Things like the markup, php or asp, cgi, or whatever are server-side, but scripts like Javascript will be recognized as some kind of Active-X addon. In this case it's an IE Active-X control that allows expression() css hacks to be utilized.


by Mali Dharam,   May 8, 2008 6:57 AM  

hi guys...

i found it...i am not sure that it will run in all browsers ???

i will check it out. till then u all try your all self.


by Aaron,   May 11, 2008 9:25 PM  

I tend to use these sort of hacks to fix IE specific margins and other quirky behaviour. All good browsers completely ignore it, and I don't see much difference between these expressions and other CSS hacks.


by Smart Pad,   August 4, 2008 1:38 AM  

I never thought there's a thing like css expression. Is this backward compatible? I will definitely try this one. Thanks!



Add Comment


Want to advertise on this site? Contact FM.
Web Hosting Web hosting, dedicated servers and Web design services
Laser Toner Cartridges UK laser toner, toner cartridges, hp toner, lexmark toner, samsung toner, canon, toner, epson toner, oki toner, kyocera toner, xerox toner, remanufactured toner, compatible toner
Direct TV Deals Free 4 room direct tv deals. no equipment to buy. free fast professional direct tv installation. this is the best direct tv deal available anywhere.
SEO Article Learn from the experts with our SEO article.
rope light Shopping with birddog distributing, inc., gives you access to the lowest prices, the best customer service and the quickest delivery times possible.
Laptop AC Adapter We offer genuine factory direct replacement AC adapters.
Direct TV Best satellite TV deals.
Direct TV Deals Direct TV programming deals are varied and include packages containing from 50 channels up to over 250 channels.
8mm film to DVD Retain family memories with the only frame by frame digital restoration service in the United States for your 8mm film to DVD today
Rubber Stamp Shop for custom self-inking stamps, hand stamps, address stamps, label stamps, check endorsement stamps, check deposit stamps, date stamps, pre inks, pocket stamps, ink and much more!