Adding !important within a dynamically written stylesheet for Internet Explorer

Question

I have been experimenting with using javascript to dynamically write stylesheets. In Firefox, one can use the setProperty method on the style for the cssRules of the styleSheets, like...

document.styleSheets[0].cssRules[0].style
  .setProperty(propertyName, propertyValue, 'important');

...to set the !important flag on the style. I have not found an equivalent for this in Internet Explorer (the setAttribute method does not have such an option for setting the !important flag on a style). Some experimentation found that for exact styles, such as border-top-width, I can rewrite the cssText string to add the !important, but then I discovered that if you individually set all the borders, IE rewrites the actual rule to be a short hand form, so it rewrites to border-top, border-right, etc., and each gets set, but without the !important flag. Further, if I explicitly set it via the short hand form, it does not accept a rewrite of the cssText to take the !important flag.

So the question is, does anyone know of a way, when dynamically writing styles to a styleSheets rule, to get IE to consistently set the !important flag for that rule?

Thanks for your help,

Scott

Answer 1

I think your best bet here is to write your css so that you don't have to use !important to override styles in the cascade. It sucks, but that's how the IE crumbles.

Answer 2

I have spent some more time doing some testing, and have come to the conclusion that my rewrite of the cssText is working to add !important to some mysterious internal flag setting of IE, even though the shortened properties that itself rewrites for the cssText do not reflect that.

Apparently, neither the cssText property (if it is examined after my rewrite to add the !important) nor the Microsoft Developer Toolbar examination of the element are showing the fact that the property has an !important setting on it. The element is, however, displaying as if my rewrite worked. I tested this by placing an !important on the base style for an image border like so:

img {border: 3px solid green !important;}

Then with javascript I created my styleSheets object and added a rule that was both more specific (using the id of the image) and that had its cssText rewritten with !important after already having set the style of the styleSheets object by a javascript call for borderTopColor = red. I then set the inline style of the element to change the top color to yellow. The results were as I would expect with the !important flag. The red wins out, as it is a later (and more specific) call than the original green, and the inline style does not override it. If I remove the rewrite of the!important then the color reverts to green, and if I remove green's !important the color reverts to yellow.

I also tested this with the green having a higher selector specificity than my javascript written style for the red. That, too, behaved as expected, with green winning out since it now had the higher selector specificity with the competing !important of the red declaration.

This was tested on IE8, IE7, and IE6 (yes, it worked there too). While rewriting/setting the cssText of the styleSheets is not as easy as being able to set it with a straight javascript call on the property, at least it works. The real 'bug' is the fact that neither the cssText nor the Developer Toolbar were giving me correct information that an !important flag was set on those styles, so if someone were coming behind and examining the site, they may get confused as to why something is happening with the styles (why something that does not seem to be important is acting as if it is).