CSS Expressions

CSS Expressions

CSS expressions used to work in older IE's, but they have been completely abandoned in IE8:

Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons, as detailed in the IE blog entry titled Ending Expressions. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode.

So it's arguably not really worth learning them any more.

If not, what should I use?

Depending on the use case, JavaScript or media queries.

As @Yet Another Geek notes, your above example can be implemented using position: fixed. IE6 doesn't support that - the CSS expression was probably created to work around that.

Avoid CSS expressions

YSlow claims that you have an inline style, so at least it is not from a css file. If you can't find the <style> in your own html, something else is adding this to your code.

This could maybe an external JavaScript, or maybe it comes from an browser extension you added, e.g a developer tool.

In your browser debug console type document.getElementsByTagName("style") to list all <style> in your generated document

Replacement for css expression

expression() is a non-standard feature. It does not exist in any level of CSS. It's an old IE specific feature that has been removed from newer versions of IE, and is not coming back.

Since expression() is nothing more than a bridge between JavaScript and CSS, the simplest solution is to write the equivalent JavaScript. Exactly what the equivalent code looks like will probably depend on your layout.

css expression :not with two condition

I believe you can just chain the :not selector like this:

div#container > div:not(.show):not(.about)
{
    display: none;
}

It appears to work correctly on this fiddle.

set the body height width css expressions

div.tall_top does not show up because your body,html does not have a height.

Set the height to 100%

    html,body {
        margin:0;
        width:100%;
        height:100%;
        background:blue;
    }

Demo: http://jsfiddle.net/codef0rmer/3x6fh/2/

---

Related Topics