Author: Dustin Brewer

Safari is one of those tricky browsers that aren't the most cooperative but there aren't many hacks for it that will work. Unlike IE that allows you to target the browser directly easily, Safari doesn't offer that solution within XHTML. I could only come up with 2 ways to use CSS hacks or tricks for Safari specifically.

The best step towards making sure all browsers work the same for your site is to use valid XHTML Strict code, this helps most of the time. But, sometimes you do have to venture away from that ideal.

It is my goal to not have to make a site non-standards compliant and I will typically test many different ways of doing things on a site if it isn't working for Safari, IE6 or IE7. I typically will write my code for Firefox so I don't run into many issues with it not working properly. Opera doesn't usually need any CSS hacks because it is the most standards compliant browser. It is the only browser that passes the ACID2 test, a standards compliance browser test.

Target Safari with CSS hacks

Anyway, on to the actually Safari hacks... assuming that you haven't tried my method of doing whatever is broken in a different way until you can get the same results on your browsers.

The first one is the one I hate to use but I will throw it out there first. Basically anytime you add an extra # sign Safari is the only browser that will read any of the CSS after that point. Unfortunately that will cause your CSS to not validate. So you typically don't want to use this method unless you are in a pinch.

There is one other way to target Safari, it is by using the min-device-pixel-ratio class from CSS3 that is currently only supported by Safari 3.0 and Opera 8 & 9. This is a difficult way to remember to target Safari but it does work. Below is an example of how to use it to target Safari specifically using Safari's webkit as a precursor.

@media screen and (-webkit-min-device-pixel-ratio:0){
#div {margin-left: 10px;}
}

However, just like a good portion of the true CSS hacks they will not only target that browser forever. So you want to be sure to keep a list or at least check back on websites that you know you have used hacks on

Target Safari with javascript

The other way, and more more usable way is to use javascript to target a browser. This is probably another one of the best ways to target any browser specifically the only downfall is they have to have javascript enabled. Typically though most people that would even dream of having javascript disabled are web developers like us testing things. Usually when we accidentally leave it off though, we notice pretty quickly that we left it off.

Below is how you would target Safari with javascript:

<script type="javascript"> isSafari3 = false; if(window.devicePixelRatio) isSafari3 = true; </script>

That should be all you need to get Safari all fixed up for whatever web project you are working on. I will be posting an article soon about how to use javascript to target just about every browser that is targetable. This will help a lot with trying to get your websites to work the way they should for all browsers.

About the Author:
Dustin Brewer is a web designer located in Oklahoma City, OK specializing in aesthetics in design, web standards, accessibility and usability. He also enjoys helping others to discover CSS and web design best practices through his web site, dustin brewer, a web design news site. "