Can !important rules be used in IE's CSS expressions?

Question

Firstly, I know that CSS expressions are defunct and wrong in so many ways, and also to avoid using !important where possible. This is for a special case stylesheet.

In Short

My question is... Is there any way for a CSS expression to set the !important flag?

E.g. this doesn't work:

a { color:expression('red !important'); }

[Edit: thanks to MarmaladeToday's comment below]. This also doesn't work:

a { color:expression('red') !important; }

Can this be done some other way?

---

In Detail

What I'm actually trying to do is mimic the inherit value in IE6 & 7. This works:

color:expression(
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
    );

But I also want to set the !important flag, and this doesn't work:

color:expression(
  (
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
  ) + ' !important');

I'm aware that, in JavaScript, it isn't possible to set !important via an element's style object. E.g. this won't work:

element.style.color = 'red !important';

However, it is possible to set !important via the element's style attribute:

element.setAttribute('style', 'color:red !important;');

So... are CSS expressions limited to interacting with the style object, and therefore, what I want to achieve is impossible - or is there any way for an expression to affect an element's attributes, or pass !important in some other way?

---

Starting a Bounty

No solid answers so far, so I'm starting a bounty.

Ideally, I'm looking for a CSS-based solution for mimicking inherit !important in IE6 and IE7, either with or without CSS expressions. (Please do verify that your suggestions work before posting).

At least, a link to some authoritative reference telling me that this is impossible would mean I could lay this train of thought to rest - I've not seen anything mentioning the use of CSS expressions with the !important rule.

Answer 1

The reason those CSS expressions don't work is because IE only evaluates the expression for the last property in the cascade.

E.g. if you have an HTML document with a link inside it and the following "CSS",

a {
    color: expression(function(e){
        alert('success');
        e.runtimeStyle.color = 'blue';
    }(this));
}
a { color: red; }

you will never see that alert (nevermind the style change), because the CSS expression is never evaluated. So no, you can't use an expression to set the !important flag.

That is to say, not when you try to set it on the same property. You can cheat. But that does make the expression a bit more complicated:

a {
    filter: expression(function(e){
        e.runtimeStyle.color = 'blue';
        alert('success');
        e.style.filter = '';
    }(this));
}
a { color: red; }

There are a few things to note here.

If you simply use another CSS property, you can be sure that the expression will be evaluated. Or at least, a little more sure, because if there's another rule further down the cascade that uses the same property already, you're still out of luck.

Secondly, you have to use runtimeStyle instead of currentStyle. If you used currentStyle here, the second rule would still end up overwriting it. runtimeStyle overrides all other CSS (except !important declarations). So it's the JScript equivalent of !important.

Also note that I'm resetting the filter property itself as well. That prevents the expression from being continuously re-evaluated. But as much as that may reduce performance, I don't think it's super critical. The main reason I put it in here is because I added alert()s in those expressions, and you definitely don't want to have those pop up forever.

It is in fact also possible to use any other property you make up. This works too:

a {
    bogus: expression(function(e){
        e.runtimeStyle.color = 'blue';
    }(this));
}

However, since the bogus property doesn't actually exist, you can't reset it using Javascript, so this will be re-evaluated continuously.

Answer 2

color:expression('red') !important;

Answer 3

You could try the behavior property, it's a lot more versatile than expressions.

Try this,

inherit.htc :

<SCRIPT language="JScript">
    //add your own inheritance logic here, you can use element.parentNode etc.
    var prop = element.currentStyle.behaviorProp;//specified in stylesheet
    var val = element.currentStyle.behaviorValue;//specified in stylesheet
    element.style[prop] = val;//set as inline style, you can also use setAttribute here.
</SCRIPT>

css:

body #div1 {
    color:blue;
}

#div1 {
    color:red;/*stays blue, because 'body #div1' is more specific*/
    behaviorProp:color;/*specify styleproperty for the .htc*/
    behaviorValue:green;/*WILL become green, because the .htc sets it as an inline style, which has priority.*/
    behavior:url(inherit.htc);
}

Answer 4

This sounds sick and evil, but:

color: expression((function (_this) {
    window.setTimeout(function () {
        _this.setAttribute("style", "color:" +
            (_this.parentNode.currentStyle ?
                _this.parentNode.currentStyle.color : 'red') + " !important";
    }, 0);
    return _this.parentNode.currentStyle ?
        _this.parentNode.currentStyle.color : 'red';
})(this));

In other words, this:

1. Returns "red" (or the parent color) immediately.
2. Sets a timeout that will set "red !important" (or whatever) immediately after.

Keep in mind that this could end up hosing your browser though. I didn't test it, and stuff involving CSS expressions tends to go terribly wrong.

Answer 5

The venerable ppk of quirksmode has done some work on CSS, JavaScript and the !important keyword. (Note that for test in Firefox or any other non-IE browsers, use cssRules instead of rules below.

Here's the link: W3C DOM Compatibility

You can apparently read whether a style rule in a stylesheet is important by doing this (this would get the importance level of the color property in the 2nd css rule in the 2nd stylesheet, IN ALL BROWSERS EXCEPT MICROSOFT INTERNET EXPLORER. How's that for a bummer.

document.styleSheets[1].rules[1].style.getPropertyPriority('color')
//Returns important when the style is marked !important.
//Returns an empty string otherwise.

Now, his research reveals yet another way to set !important, unfortunately this also apparently only works in non-Internet Explorer browsers

// where x is a DOM element
x.style.setProperty('color','#00cc00','!important');
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00','!important');

Apparently this strange syntax, if you are not setting things as !important, requires setting the third parameter to null:

// where x is a DOM element
x.style.setProperty('color','#00cc00',null);
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00',null);

Now, MSDN has a property called "cssText" that dangles off the style object of a DOM element. It even indicates that CSS expressions are okay. The usage is:

x.style.cssText = 'color: #00cc00 !important';

Now, this may be important (heh), the MSDN page says (emphasis mine):

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

It may be worthwhile to check out ppk's tests of cssText as well.

I unfortunately don't have the relevant versions of Windows Microsoft Internet Explorer available on this laptop, but perhaps this is of some use. I'm curious to how this shakes out, it's something I'd run into (setting !important in JavaScript) but found other ways to get around it, typically just shifting around classes or applying specificity by using an ID in the relevant selectors.

Best of luck on an interesting question!

Answer 6

It's been my understanding that !important is largely these days as a hack... specifically because IE does NOT recognize it.