Safari, You've Let Me Down

April 19, 2007 6:59 AM

What's the best way to have a CSS rule apply only to Safari?

I know about a million IE hacks, and half a million old school ones for Netscape. But I've come across a seeminly intractible Safari rendering difference, and I think the easiest way to deal with it should be a Safari-specific rule. But I don't know any workarounds. I thought of applying a separate safari stylesheet, just for that one rule, but I can't figure out what the syntax is-- I am used to the if IE syntax which is mocrosoft proprietary.

Any advice or help is much welcomed!!

posted by miss tea to Computers & Internet (12 answers total)

"AppleWebKit" is a string your browser detection script could be checking for, if you're using that method.
posted by mcwetboy at 7:06 AM on April 19, 2007

Are you serving the pages from some kind of scripting language like PHP?

If I was faced with this problem, I'd make the CSS file a PHP script, have PHP check which browser is requesting the file, and have it send a different version of the CSS file, depending on the browser. If it's just a few lines in the CSS file, you could just do it with if..then..else:


Part of CSS file for all browsers

<?
if($browser=="safari"){
?>
Safari CSS code
<?
}else{
?>
Code for other browsers
<?
}
?>

But that's just me. I don't know how you'd do it in straight HTML.
posted by Jimbob at 7:07 AM on April 19, 2007

Best answer: Oh here, you might want to look at this.
posted by Jimbob at 7:08 AM on April 19, 2007

Response by poster: Beautiful! Thanks much. I used the simplest sniffer and just echoed the safari specifics as a separate css (just in case any other issues come up). Works like a charm.

Gotta love the php.
posted by miss tea at 7:31 AM on April 19, 2007

Depending on what you're doing, you can accomplish it via Javascript.

- Define both Safari- and non-Safari-versions of your class in your .css file.
- Assign the non-Safari-version of your CSS class in your HTML file.
- Set your document's onLoad attribute to be "setSafariCSS('foo')", where "foo" is the ID of whatever HTML element you need to fix.

- Do your Javascript:
function setSafariCSS(elementID)
{
if(Safari browser check passes)
{
document.getElementByID(elementID).setAttribute("class","[name of your Safari CSS class]");
}
}

Doesn't scale well, but there ya go.
posted by mkultra at 7:39 AM on April 19, 2007

Post the problem code. CSS quirks should be documented in public. Perhaps there is a way to work around your problem without resorting to server-side tricks.
posted by ijoshua at 10:36 AM on April 19, 2007

A CSS-only hack for this - and it's VERY hacky because it targets current browsers, not older/obsolete browsers - is as follows:

#mydiv p {color:red;} /* For all browsers */

body:last-child:not(:root:root) #mydiv p {color:green;} /* For /* Safari 1.3+ only */

Use with care.
posted by Ridge at 10:45 AM on April 19, 2007

Best answer: Duh, got my CSS comments screwed up. Let's try that again:

#mydiv p {color:red;} /* For all browsers */

body:last-child:not(:root:root) #mydiv p {color:green;} /* For Safari 1.3+ only */
posted by Ridge at 10:46 AM on April 19, 2007

Response by poster: Interesting, Ridge. Why does that work?

And to ijosh-- I't's a basic implementation of the son of suckerfish dropdown, with the issue being that when the subnav slams back to left:auto safari's definition of auto reapplies the padding in the parent element, making the subnav too far over to the right.

The safari specific style sheet just adds a negative left margin to counteract that.

I just noticed my typo of 'mocrosoft.' sorry.
posted by miss tea at 1:01 PM on April 19, 2007

CSS hacks (like the one Ridge described) cause problems when new versions of browsers are released.
posted by mbrubeck at 2:39 PM on April 19, 2007

I found where I nabbed that snippet of CSS from: Full explanation here.

FTA:

Safari/WebKit, KHTML, and Gecko are the only engines to currently support last-child. Since the body element is always the last child of html (in validating markup), this gives us a way to hack for Safari (and, perhaps unfortunately, Konqueror).

...

The...trick is to target all Safaris including the recent WebKits. We have to filter out Gecko, and thankfully a simple quirk does just that: Gecko doesn’t understand :not(:root:root), or any other double negation of that sort. Since body isn’t :root, we can easily hack around Gecko.

mbrubeck, hence my cautionary "Use with care" above.
posted by Ridge at 2:45 PM on April 19, 2007

miss tea, how does your implementation differ from the reference implementation of the Son of Suckerfish code? I don’t notice any problems with Saf and their examples.

If padding is causing the trouble, perhaps you can find a way to reapply it to achieve the same effect without resorting to hacky CSS… I notice that in the stylized example, the padding is applied to the a element rather than the li element. If that isn't an option, maybe you can use margins instead.

I’ll again offer to help if you can post the code you’re working with, or if you prefer, you can email it to me (address in profile.)
posted by ijoshua at 8:15 AM on April 20, 2007