The star hack in IE8 and dynamic stylesheets
CSS hacks
⇓ skip if you already know about the star and underscore hacks
For most CSS tasks, there are only two hacks that are straighforward to use, easy to spot and maintain (delete down the road), easy to understand. The star hack that targets IE6 and 7 and the underscore hack that targets IE6.
Consider this:
.box { background: red; /* normal browsers */ *background: blue; /* IE 6 and 7 */ _background: green; /* IE6 */ }
In normal browsers, you get red. Normal browsers ignore *background and _background because they are invalid. IE6 and 7 have a bug that accepts the definition prefixed with a star as if you defined it as "background". And because *background comes after background, IE6 and 7 will say "oh, the latest one overwrites". Similarly the underscore. But the _ bug was fixed in IE7 and only IE6 still treats _background as if it was background.
So the code above will paint a red box in normal browsers, blue in IE7 and green in IE6. IE8 is also a normal browser so IE8 in IE8 mode will give you red. BTW, this technique applies to all properties, not only background.
Surprise
The problem I found is when you set styles dynamically. Say you have a bunch of CSS content as a string and you want to create a new style tag and shove the code there. I've blogged about this before.
When you set styles dynamically IE8 behaves as IE7.
, and double
» Here's a demo/test page.
The code:
var def = ".box {background: red; *background: blue; _background: green;} "; var ss = document.createElement('style'); ss.setAttribute("type", "text/css"); if (ss.textContent) { // FF, Safari ss.textContent = def; } else { ss.styleSheet.cssText = def; // FF, IE } var head = document.getElementsByTagName('head')[0]; head.appendChild(ss);
This will give you blue in IE8, which is really unfortunate.
UPDATE: Thanks to a question from @stubbornella, I updated the test with setting the inline style attribute, as opposed to creating a new <style> tag. Turns out IE8 behaves as normal IE8 in this case and ignores the star and the underscore hacks. So only creating a new style tag dynamically via JavaScript is the problem.
This entry was posted on Friday, July 3rd, 2009 and is filed under CSS, ie. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
July 4th, 2009 at 3:45 am
Great article, thanks a lot! It’s interesting to notice how unknown this “star” hack is, but however it comes to be very useful sometimes.
greetings
July 5th, 2009 at 12:50 pm
Re: the update, do you mean setting element.style['*background'] works in IE7?
July 5th, 2009 at 1:57 pm
I haven’t tried this one, but this works:
e.style.cssText = ‘*backgorund: pink’
July 10th, 2009 at 1:34 am
in javascript you don’t have to do this
just use
if (isIE6) {
} else if (isIE7) {
} else if (isIE8) {
…
July 10th, 2009 at 4:48 am
[...] original here: The star hack in IE8 and dynamic stylesheets By: Admin Date: July 10, 2009 3:14 pm Categories: Blog, CSS, ObjectPost tags:CSS, data, [...]
July 16th, 2009 at 1:32 am
[...] The star hack in IE8 and dynamic stylesheets [...]
December 1st, 2009 at 7:43 am
Hi, my problem is slightly different, I’ve tried various hacks and I’m on the 3rd rewrite in 3 weeks. Alternating between screaming and sobbing!
http://www.sunseekerdoors.co.uk/2009-cb has a javascript for magicbox, javascript for vertical scroller and rss feed from blog - all need css tweaks between browsers. Finally they are all working well or at least reasonably except the vertical scroller in IE8, which positions itself down the page.
I dumped the original .js for this simpler one but same problem; also tried replacing with marquee but that didn’t work in firefox (reached the top then restarted so only 1st few items were ever showing).
I don’t really care which method is used as long as the page works in all major browser versions. The more I try fixing it, the worse the code gets.
Can anyone help please? I’m desperate!
December 1st, 2009 at 8:50 am
I’m sorry, I forgot that there is also a flyout menu that works in firefox, IE6 etc, but not in IE8.
I am incredibly fed up with microsoft but then, who isn’t.
December 2nd, 2009 at 6:27 am
update: I found a js-marquee that works! http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm (well, except IE6 where it only works for the first cycle then drops below the display area); The problem with the flyout menu in IE7/8 appears to be caused by using STRICT - using Transitional creates other prblems but we’re working on it …
February 2nd, 2010 at 5:43 pm
I ran into a similar problem recently and found that there is actually a simple workaround for this. If you append the style element to the document before setting the cssText property, IE8 will interpret it in normal IE8 mode and the example will work fine.
This is mentioned as a usage caveat of the cssText property on MSDN: http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx
It was also mentioned in the comments on this blog here:
http://www.phpied.com/dynamic-script-and-style-elements-in-ie/#comment-70592
The solution I ended up using is almost the exactly same. Note that you don’t even have to set the type attribute if you append the style element to the document first:
var style = document.createElement(’style’),
styleRules = ‘.box {background: red; *background: blue; _background: green;}’;
document.getElementsByTagName(’head’)[0].appendChild(style);
if (style.styleSheet) {
style.styleSheet.cssText = styleRules;
} else {
style.appendChild(document.createTextNode(styleRules));
}