Expressions in CSS

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.

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

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.

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

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

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.

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.

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.

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.

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.

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.

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

Funny how this article is nearly 4 years old and we are still having to use the same lame hacks to satisfy browser failures.

Couldn't agree more jake. MS fail.

But do expressions do anything else besides min/max height/width? Expressions seem to fail miserably for most anything else.

@iGuide I used my first one today (hence finding this page) and it was for something other than min/max properties: In certain situations where a table is told via CSS to have a width of 100%, IE6 makes the table 100% of the parent's width PLUS the width of the scrollbar, causing the table to spill out of its container. No other browsers including IE7 showed the problem, so in my IE6 stylesheet I set the width of the table to be 100% minus the scrollbar width, and now all's gravy. This is for a semi-liquid AJAX application that will be used across many sites of varying sizes, which is why a static width couldn't be used. And yes, I was using the table for tabular data. :P

dasadsfdas

Great hack! Anyway, this degrades performance a lot, specially in javascript dynamic pages.

**ATTENTION**: I'm afraid I traced the CSS '*expression*' function under IE7 and it keeps running continuously even when the result of the expression would never change. Of course, there is no way for the CSS engine to determine whether that expression will change ;) I recommend not to use that 'hack' unless you want to slow down the machines of the users who visit your web pages. *Remember there are many ways to do stuff* ;)

Nice tips, thanks..

Just fyi, we've discovered the use of "expression" makes IE6 hang when run via Cytrix on Win XP

Is it really so hard for Microsoft to add "AUTO UPDATE" feature into their browser instead of coming out with 6 7 8 9 browsers and waiting for pipl to actually update on their own? This would solve 99 % of all the *ucking hacks:) makes me sad panda

Expressions are certainly very dangerous and the best solution is to stop supporting IE6 altogether. However, if you must use them, try something like this: p { max-width:800px; width:expression( function(e){ e.style.width = document.body.clientWidth > 800? "800px": "auto" }(this) ); } This will solve the problem of the element being continuously updated. To explain, the expression executes a function. "this" is the element selected by the css and is passed into the function. Inside the function, the element is referred to as 'e'. Now we set the element's width to whatever it should be which means it is no longer set to 'expression(...)'. The down side is that it will only be set once so if something about the page changes, the element won't live-update with the new correct width. A more complete solution might be to use 'debouncing' to prevent the element from updating too often but then you're going to need to include a lot of javascript in your css and it's already ugly enough. How about just telling people stuck with IE6 to use Chrome Frame instead?

What de fack

A better idea: #iesucks{ position:absolute; top:0; left:0; height:100%; width:100%; font-size:44pt; font-weight:bold; color:red; } You are seeing this box because you use an inferior brower. Upgrade to Firefox/Chrome/Safari/IE9/whatever

If you must design for the older browsers like this, I used php on the server side and pushed the javascript screen width varible in a session variable back to the page, the customized the CSS on the fly. It works without warning in IE6.

It would seem that most are unaware that the majority of css3 items in vogue right now have been and were implemented way back in IE4 through use of filters and other pre-"css3 standards" were dreamed up. IE was capable of almost anything office could do back then. The "other guys" have created these "new ideas" and "standards" that made the IE team rewrite routines and rendering rules to conform to the way the consortium stated was "standard" even though ways to accomplish the exact same results, such as drop shadow and transforms, were already available to IE users for quite some time. This was somehow magicly swept under the rug by IE competitors in order to force IE to backtrack and rewrite routines to parse and render the way those that came up with their "brilliant rendering ideas" way way way later... and somehow IE sucks when the other browsers are just now getting these capabilities? Maybe the people writing the "standards" suck because they apparently hid these IE abilities from the world. Maybe if back then the consortium made the others render the way IE did we would all be programming holograms instead of shadows... what's it been since filters were introduced in IE4.0? Maybe since the introduction of windows 98? Yup, IE was capable of these "new" ideas way back in 1997 when IE4.0 came out and is now dropping support for alot of the ways it used to incorporate directX into the browser due to the "standards" that tell the writers of the operating system that plays 3d games and renders every single aspect of your computing how to put a shadow under your text when CSS3 is fully supported. That means when the 18 year olds of today whine about how stupid IE is I can laugh at them knowing they were still in diapers when I was creating websites that had use of filters/DirectX, VML, CSS expressions, CSS with *.HTC files for behaviors, more than one scripting language, filesystem objects, and much more. All standards did was slow us down by 16+ years and allow non/anti-microsoft pundits to dictate how IE is to parse and render.

I really tried to fight it too! I meant to say "Obama Voters" in a few places in the above rant. Only problem is there are so many places it could replace the phrases that I used to describe either the un-informed, indoctrinated, or just plain "hopeful" yet inexperienced that live in a niave world filled with ideals because reality hadn't cut them down long enough for them to realize they were actually conformists and enablers of continuance of societal degrigation due to their easily persuaded and over-trusting youthfully scuptible minds that sponge in all that is heard and seen for the first time as a realisation of reality when it may only be a small sliver of the actual possibilities that haven't yet been explored ;)

Would you noobs stop bashing IE? This is an innovative feature and I wish all browsers would have it. Have you ever tried, say, vertically aligning floats using CSS only? The thing is IE concentrated more on innovation than standard compliance, for a while, and what people want, it seems, is stability and standards compliance, which they are finally providing now, as a mature browser.