Subscribe to RSS

CSS Hack:Getting Safari to behave

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.

Popularity: 12%

Whats Next?

  • Save to Delicious! Save the page

12 Responses to “CSS Hack:Getting Safari to behave”

  1. Rohit Says:

    Thanks for the tips. I’ve been looking for a way to solve a nasty Safari-only layout issue.

    So, when you describe how to use JavaScript to target Safari, is the most likely application to load a stylesheet (filled only with Safari fixes) if Safari is detected? Thanks.

  2. Highway of Life Says:

    Dustin,

    You are incorrect regarding Opera being the only Standards Compliant browser.
    On October 31, 2005 Safari was actually the first browser to pass the http://www.webstandards.org/files/acid2/test.html#top : ACID 2Test. — It actually passed the test officially on April 27th, but it was anon-public build at that time, but was the first browser to ever be completely standards compliant.

    Therefore it is incorrect to say that Safari is not a standards compliant browser.

    It should be noted that Opera did not pass the test until the public weekly build of March 10, 2006 — it was the first Windows and Linux compatible browser to fully pass the test. But official release of Opera 9(the first Opera version to pass the test) was not until June 20,2006.

    Take care.
    - Highway of Life

  3. empdesign » Blog Archive » Hack para Safari 3.0 Says:

    […] color: #f00; } /* IE, Firefox, etc. */ /**/ html*#prueba p { color: #690; } /* sólo en safari */ http://dustinbrewer.com/css-hackgetting-safari-to-behave/ @media screen and (-webkit-min-device-pixel-ratio:0){ #div {margin-left: 10px;} […]

  4. macx Says:

    Targeting the Safari makes no sense, because Mac-Users always download the latest System-updates and with that the newest Webkit-Engine.

  5. poopy Says:

    Dustin,

    You’ve got it backwards. Safari is probably one of the most standards compliant browsers out there. Not only was Safari the first browser to pass Acid2 (yes, even before Opera) Safari was the first browser to pass Acid3! http://webstandards.org/2008/04/07/acid3-passed-in-23-days/

  6. Smith Says:

    Macx, I think that’s a pretty ignorant and sweeping statement you made there.

    Thanks for the article, bookmarked.

  7. poopy Says:

    Wrong Macx, the newest WebKit Engine does not always get dowloaded with every update. That would be insane since WebKit updates are released every single night. Safari maybe gets an update 6 times a year.

  8. Избор на стилове според възможностите на браузъра чрез CSS3 | Блогът на Гонзо Says:

    […] се поддържат частично от Опера и Сафари. Dustin Brewer дори предлага да се ползва тази възможност за подаване на стилове […]

  9. Mark Rowe Says:

    Attempting to classify a browser as Safari based on the presence of an arbitrary property like window.devicePixelRatio is a bad idea. If other browsers decide to implement this property at some point in the future they will suddenly be detected as Safari by your script. Doing object detection is only a good idea if the decision you make as a result of it is about the specific feature you were looking for, rather than attempting to infer things about the browser in general from a single specific property.

  10. will Says:

    The bit I dont understand fully here is what reason would you have to need to target safari specifically? The only problem i have found with it is that sometimes if you roll from one item with a :hover property to another safari renders the initial :hover property instead of the current one…. but this isn’t a rendering issue as such….

  11. Targetting Safari 3 | Yelotofu Says:

    […] this CSS hack for Safari 3 today which can be handy from time to […]

  12. Alby Says:

    It works for me so very happy!

    Cheers Alby

Leave a Reply


Recent comments

CSS fix for the double margin float bug in IE6

On July 24, 2008, katalyst wrote:

omg finally bigtime thank you! i’ve been looking for a solution and yours works for me.

Understanding color in design

On July 23, 2008, Christy wrote:

i am what is referred to as a “traditional artist”- i am a fine art major & have taken a ton of color theory courses. I get confused when reading articles about color...

The best free web development add-ons for IE 6 and 7

On July 23, 2008, Valentinka wrote:

Сайт, да нет это целый портал - с фишкой. Буду теперь постоянно посещать…. и всем...

CSS fix for the double margin float bug in IE6

On July 23, 2008, agencja modelek wrote:

finally found what I sought! thx for this fix! regards, AM

Test IE5 or IE6 on your PC with IE7 installed

On July 21, 2008, Ken Hamric wrote:

CrossBrowserTesting.com allows you to check your site ‘live’ via connection via VNC to several configurations of OS and browsers. The browsers available...