Stuff and Nonsense

Malarkey is Andy Clarke, a UK based designer, author and speaker who has a passion for design, CSS and web accessibility.

Andy has been working on the web for almost ten years. He is a visual web designer and author and he founded Stuff and Nonsense in 1998. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. Andy is the author of Transcending CSS: The Fine Art of Web Design, published by New Riders in 2006.

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?

This article was originally published by Andy Clarke on his personal web site And All That Malarkey and is reproduced here for archive purposes. This article is published under a Creative Commons By Attribution License 2.0.

Andy Clarke Stuff and Nonsense Ltd.
The Cow Shed Studio, Eversleigh Gwaenysgor Flintshire LL18 6EP UK

Or call us on the dog and bone on +44 1745 851848. Download our vcard.

© Copyright Stuff and Nonsense Ltd. All Rights Reserved except as noted.