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.

Whats Next?

  • Save to Delicious! Page saved 0 times

39 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. 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. [...] 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. [...] се поддържат частично от Опера и Сафари. 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. [...] 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

  13. Glass says:

    You can also target Safari with the following:

    body:first-of-type .class {}

    That is: just prepend css the rule with body:first-of-type.

    Simple.

  14. bresson says:

    Its silly to think Safari users download the latest updates. Many Safari users, notably creatives in corporate environments, do not have download rights and requires an IT admin to download. MacX, you expose your ignorance. Unfortunately, the web is full of ignorance utterances such as yours.

  15. camslice says:

    Another justification for the hack is to combat the way Safari treats the :focus pseudo class. It sees :focus as a temporary state, ie: an element is in ‘focus’ while the mouse button is being depressed but not once it is released. FF & IE6/7 put an element in ‘focus’ once the mouse button has been clicked, with the element losing focus when another is clicked.

  16. [...] can certainly use a safari hack: CSS Hack:Getting Safari to behave | web design news and style but I cant help but think that there must be something else thats causing the issue – Ive never [...]

  17. nick says:

    This is a clean hack – if there ever was such a thing – well done and thanks for sharing! :o )

  18. Barbara says:

    Thanks for the hack! After creating a flyout menu that required targeting in IE6 and IE7, I found it messed up in Safari on the Mac and needed a way to target Safari only. So yes, Safari DOES sometimes need targeting.

  19. [...] CSS Hack:Getting Safari to behave | Dustin Brewer Web Design Great read about Safari and CSS (tags: css web safari hack target) [...]

  20. Rich says:

    What kind of dummy would use Safari anyway? Much less make CSS to support that dumb 4% of internet users. Spend your time on more productive things.

  21. boz says:

    Rich, you are a fuckin moron

  22. Bryan says:

    I am a freelance web designer/developer. It’s what I do to make a living. I build my websites against Safari first and then hack everything up to make it work in other, lesser browsers.

    No browser is perfect, but Safari is far and away the best.

  23. Finally, I have been battling this beast for weeks. Many people have offered up solutions, but none workes as easily as the two you just provided. Thank you so much!

  24. Elvira_Iris says:

    Thanks so much! now my design looks the same in all browsers! :)

  25. I found your blog on google and I really like your design. I just Bookmark your Blog to see your latest design. Keep up the good work. Look forward see more of your design in the future.
    Btw Website Design Middlesex
    Really need some good web designers like you. Thanks

  26. Dave says:

    Thanks, also seems to work from Chrome/Win

  27. Hilary says:

    I was working on getting the background to line up with the wrapper, on FF/IE all non web kit browsers, perfect¬! web kit grrrrrrr so thank you very muchly for this. I develop in FF then bug fix for everything else. I have the latest nightly build of webkit installed and this particular issue is still there. simply put, I have a background with a nice straight l;ine that has to go across the whole page but the wrpper has to have a header in line and the only way to do this so the whole page flowed no matter what size the browser was to have a bg image for the body and a wrapper container div with the continuation of the graphic. it has to look like the line is all the way across the page
    so put in a background image on the body and then another in the wrapper. so far soo good but as some browsers add to the inner divs (grrrrr) I have a problem even though the graphic is from the same image they just do not match!
    so the search for a web kit only fix! the funny thing is this problem just did not show up in google’s chrome! That is UNTIL is used the hack! sigh!

    But thank you anyway.

  28. Thanks for this. Never ever had a problem with safari before as I’ve always found my sites look the same in ff as safari.

    However, I had a floated div that simply wouldn’t position correctly in ff and safari. This hack solved it for me and saved some of my sanity :)

  29. Stomme poes says:

    Shaky object detection, but I’ll take it. That focus problem was driving me nuts, along with the adjacent selector bug (fixed in Safari4 but not in 3 or Chrome). Thank you!!!

  30. Mihai Tuhari says:

    Awesome post ! Thanks for it :)

  31. philipbeel says:

    Dustin, you are a life saver, this article was ace! cheers

  32. neha says:

    HI,i am facing an issue in Mac Safari and Mac FF.. Its a padding issue.. can anyone tell me hack for this.

    Thanks in Advance

  33. Tim Wilson says:

    Using the following to target Safari/Chrome for the CSS Sliding Doors method.:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Google Chrome only – fix margins */
    button span {
    margin-top: -1px;
    }
    }

    Stangely, it works fine locally, however when it gets added to the rest of my css within Visual Studio 2010 and I launch the build, the targeted CSS for Safari & Chrome is not recognized.

    I have searched high and low and cannot determine why the code would work locally but not once added to my server????

    HELP! Anyone?????

  34. Shaan Nicol says:

    Perfect! Worked straight away, thanks for the tip

  35. CurioJeff says:

    Worked for me! Thanks!

  36. Bijayani says:

    Hi,

    I happened to see your post and wanted to share a link where a software engineer of my company has shared a tip on “CSS hack for Safari Browser”.

    Here is the link:
    http://www.mindfiresolutions.com/CSS-hack-for-Safari-Browser-672.php

    Hope you find it useful and of assistance.

    Thanks,
    Bijayani

  37. [...] issue with relative positioning in Safari. Luckily for me (and you), Dustin Brewer found a way to get Safari to behave:[css]@media screen and (-webkit-min-device-pixel-ratio:0) {     /* Add your [...]

Leave a Reply


About Dustin Brewer

Dustin Brewer

Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.

Contact Information

© 2009 Dustin Brewer Design. All Rights Reserved.
Located in Oklahoma City, OK 73170