Hide CSS from Safari

If you feel the need to be nasty to Safari, here's another way to do just that.

I'm not sure if this has come up before or if indeed it is of any interest (after all, why would anyone want to hide CSS styles from Safari?). But if you're still here, this is a new (to me) method. (Shall we call it MSIH? ;)

On a soon to be launched client project, it was decided for a few reasons that Internet Explorer 5 Mac would be retired. This is simple to do by wrapping CSS rules in an additional @media rule.

@media all {
/* rules */
}

As is common knowledge, I divide my CSS into three files, valid CSS2/3 (fruit.css), hacks or filters (cream.css) and proprietory rules (topping.css). (You might recall those silly names from the Web Standards Trifle) and I import the second two files from the primary stylesheet.

@import url(cream.css);
@import url(topping.css);
/* rules */

Interestingly, combining the two methods by placing the imports inside @media rule makes Safari ignore all the styles within the @media rule!

/* Be nasty to Safari */
@media all {
@import url(cream.css);
/* rules */
}
/* End be nasty to Safari */

So, if you feel the need to be nasty to Safari, here's another way to do just that.

Update

I now have an official Safari bug number to call my very own!

4249130
a.k.a. :
a.k.a. : @import inside @media causes Safari to ignore all styles within @media

Thanks Vicki!

Replies

1. #1 On September 8, 2005 01:30 AM Jeff Adams said:

   Your second paragraph confused me. Which one is it, Internet Explorer 5 mac or Safari?

2. #2 On September 8, 2005 01:31 AM Jeff Adams said:

   uhh...nevermind. Just read it again (slower) and it makes perfect sense.

3. #3 On September 8, 2005 02:45 AM Andrew Krespanis said:

   Hehe, you didn't happen to pick this one up from your friend Brothercake, did you? :)
   Check out the generated CSS file for his Ultimate Dropdown Menu sometime -- it's the ultimate @media maze!

   Thanks for the tip Andy :D

4. #4 On September 8, 2005 09:14 AM Malarkey said:

   @ Andrew:

   Brothercake is indeed an evil genius. I haven't spoke to him for a few weeks so I can only imagine what diaboliocal schemes he is cooking up in his secret lab.

5. #5 On September 8, 2005 12:56 PM Matt Sephton said:

   Andy, how long has this "feature" been in Safari and how much longer do you think it will be there now that is out in the wild/reported?

6. #6 On September 8, 2005 01:27 PM Mike Stenhouse said:

   Hiding stuff from Safari scares me. The IE team never upgrade anything and the Firefox lot publicise their upgrades months in advance but Safari seem to sneak upgrades out as soon as they find them. I've had to use html:lang(en) once or twice now and I just know that one day I'll wake up and boxes won't line up any more...

7. #7 On September 10, 2005 07:11 PM Martin said:

   The Validator doesn't like it …

8. #8 On September 12, 2005 08:17 AM Malarkey said:

   OK chaps, from the horses mouths':

   I've just been told by Tantek that placing an import inside a media rule is not valid, so he passed me to David Baron of Mozilla.

   David explained in great detail (and with a look at the Mozilla code base) that Firefox behaves correctly by ignoring the imported CSS files inside the media rule. So David passed me to the Safari developer team.

   The very charming Vicki has taken up the challenge of fixing what has turned out to be a Safari bug. Safari currently behaves badly by ignoring all the rules and not just the imports.

   So there you have it, not a hack but a browser bug uncovered.

9. #9 On September 12, 2005 03:29 PM trovster said:

   Is that Dave Shea in the Safari (heh, I just got it!) hunting hat?