Web Design Blog
Popular Posts
Categories
CSS Hack:Getting Safari to behave
Posted on Monday, August 6th, 2007 under CSS by 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.
Whats Next?
69 Responses to “CSS Hack:Getting Safari to behave”
About 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 my web design portfolio.
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.
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
[...] 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;} [...]
Targeting the Safari makes no sense, because Mac-Users always download the latest System-updates and with that the newest Webkit-Engine.
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/
Macx, I think that’s a pretty ignorant and sweeping statement you made there.
Thanks for the article, bookmarked.
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.
[...] Ñе поддържат чаÑтично от Опера и Сафари. Dustin Brewer дори предлага да Ñе ползва тази възможноÑÑ‚ за подаване на Ñтилове [...]
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.
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….
[...] this CSS hack for Safari 3 today which can be handy from time to [...]
It works for me so very happy!
Cheers Alby
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.
body:first-of-type … doesn’t actually seem to apply anymore for targeting only Safari. it’s recognized by FF3.5.
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.
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.
[...] 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 [...]
This is a clean hack – if there ever was such a thing – well done and thanks for sharing!
)
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.
[...] CSS Hack:Getting Safari to behave | Dustin Brewer Web Design Great read about Safari and CSS (tags: css web safari hack target) [...]
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.
Rich, you are a fuckin moron
No, you are the idiot.
Have you ever developed a commercial (not content) web application. That is what we do!! 2,000+ concurrent user type stuff. You, obviously have not!! Safari simply does not work & every release causes us to debug, modify & re-write code because Safari is like a woman in menopause. We charge a 20% premium to support any of our web apps when Safari is a requirement.
I hate know it all neophytes. Give you a PC, a manual & a web design tool & you think you are a “expert”.
You are obviously an isiot, no one that I have every spoke to, including users, think that Safari is any good for application web sites. Content sites, yes.. real world stuff, no way!!!
So, take your thimble full of “knowlege” and get back to your Mac, they need you… they need all the support they can get.
Ps: of 50 of our large clients (total 250,000+ actual users), all have trashed Macs but 2 and those 2 are paying for it, big time. They cannot even install Safari 5, 4 is giving them problems and they live in the “real” world, not like you..
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.
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!
Thanks so much! now my design looks the same in all browsers!
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
Thanks, also seems to work from Chrome/Win
@dave, this makes sense since they are both based on webkit.
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.
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
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!!!
Awesome post ! Thanks for it
Dustin, you are a life saver, this article was ace! cheers
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
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?????
Perfect! Worked straight away, thanks for the tip
Worked for me! Thanks!
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
[...] 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 [...]
[..] A little unrelated, but I really liked this webpage post [..]
Could I consider a part of your entire info to my personal website
Holy crap. I can’t believe how easy this way. This is my first real foray into true css/html and I couldn’t understand what I was doing wrong with my css. I never would have guessed it was Safari’s fault. All I had to do was copy and paste. Big thanks.
[...] [...]
Great tip, it works like a charm
[...] seems to be only one reliable CSS-only way to target Safari (incidentally, it also targets Chrome, which has almost 3x as many users), outlined way back in [...]
The @media work around affects Google Chrome for anyone that is bothered.
hi Dustin
Thanks a lot for the tips, they have been very helpful
Marieke from Norway
[...] seems to be only one reliable CSS-only way to target Safari (incidentally, it also targets Chrome, which has almost 3x as many users), outlined way back in [...]
This works like a charm..! amazing stuff.. good work
Many Thanks,
Umesh
I found it useful just to use PHP to manage the browsers. It does not require hacks. It becomes a nightmare when I try to include Safari, Firefox and IE and try to do something different for each one. Using an if statement in php solves the problem:
[...] the text element – basically leaving you with no shadow, and no text. You can fix this with a Safari only CSS hack, however between IE and Safari, I would say this technique is not yet ready for deployment on any [...]
Anyone who thinks Safari is one of the most compliant, needs to quit drinking the Steve Jobs specialty Kool-aid. Building a site now for work and it displays perfectly on Opera, IE8, IE7 (go figure that one out), Firefox and Google Chrome. With Safari however, i have content appearing outside a designated area which even has specific widths attached to it.. so there’s no reason or excuse for the content to behave this way except that Safari sucks nards for compliance.