What Safari-specific pure CSS hacks are out there?

Question

I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.

Answer 1

So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.

Answer 2

You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.

Answer 3

There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example

.blah { color: #fff; }
.blah { color: #000;# }

In Safari the colour will be white, in everything else it will be black.

However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.

The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.

Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.

Answer 4

I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.

FYI, this hack only targets Safari 3, and also targets Opera 9.

@media screen and (-webkit-min-device-pixel-ratio:0) {
   /* Safari 3.0 and Opera 9 rules here */
}

Answer 5

This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?

If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. You can find an example at http://creativebits.org/webdev/ie_conditional_css

By using conditional stylesheets you can avoid hacks all together and target browsers.

If you are looking to do something special in safari check out http://trac.webkit.org/wiki/WebDevelopers