The star hack in IE8 and dynamic stylesheets

July 3rd, 2009. Tagged: CSS, IE

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.

Tell your friends about this post: Facebook, Twitter, Google+

18 Responses

  1. 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

  2. Re: the update, do you mean setting element.style['*background'] works in IE7?

  3. I haven’t tried this one, but this works:
    e.style.cssText = ‘*backgorund: pink’

  4. in javascript you don’t have to do this

    just use

    if (isIE6) {
    } else if (isIE7) {
    } else if (isIE8) {

  5. [...] 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, [...]

  6. [...] The star hack in IE8 and dynamic stylesheets [...]

  7. 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!

  8. 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.

  9. 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 …

  10. 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));
    }

  11. this is perfect hack for IE8

    .test { color: black/; }

  12. this is perfect hack for IE8

    .test { color: black/; }

    when I type code is missing you can write like this

    (backslash zero slash)

    /

  13. IE8 Hack css

    .test { color: #fc3/ }

  14. reading green Im putting my mark here. Get it? Putting?
    Can I have a laugh now? No?

  15. I jumped and whooped! Finally! My website is working in IE6 AND IE9 using the “parent>child” hack then I view it in IE8, wtf!!! M$oft’s making web designing a living hell.

  16. for me works this in ie8:

    .test {color:#fc3\9;}

  17. Great website……

    [...]we like to honor many other internet sites on the web, even if they aren’t linked to us, by linking to them. Under are some webpages worth checking out[...]…

  18. damage hack…

    [...]The star hack in IE8 and dynamic stylesheets / Stoyan’s phpied.com[...]…

Leave a Reply