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.
I’m having the same problem with safari.. contents exceed a designated area that has specific width. How can I solve this?
@Tony Use an extra div, remember to work out the sizes and padding that the browsers add and subtract the difference.
i need the hack for safari browser. now can find it.
Simply saying thanks won’t just be sufficient, for the fantastic readability in your documentation. I’ll instantly seize your rss feed to stay informed of any updates. Admirable work and much success in your small business endeavors!
I used to think Safari was great until I came across Safari specific errors. The w3c whould make conditional comments part of the spec for all browers xDD
I know modern browers try to adhere to the spec as much as possible, but there are always times things can go wrong.
I just hit the strangest bug I’ve ever seen in Safari. After a certain point Safari just stops displaying any of the other elements on my page, even though they appear in the source. Everything is fine in Firefox. Does Safari have some known issues with floating items inside boxes that are also floating? (just a guess…)
Safari is the biggest piece of garbage software in the wild. If Steve Jobs could spend more time fixing his own problems rather than bagging every other company, the world would be a better place.
I have the latest Safari for Windows and guess what? It is NOT possible to copy and paste a web address into the address bar. Try it. Paste your address, hit enter and the browser will refresh the page you are on rather than going to the new address….. ridiculous!
Thanks!
Interesting read i think your website is good with informative content which i like to add to my bookmarks. I’d like to share everyone this new type of device that allows you to spy on other peoples mobile pretty clever if you ask me check out cell phone spy software
To the world you may be one person, but to one person you may be the world.
Safari – love it or hate it people use it so why make visiting your site a bad experiance for those users? Thanks for these tips I will definatly be using your code snippets.
Your article helps to understand the subject in a few seconds, a big thank you for these explanations. I ask myself different questions after reading the article. In any case thank you for letting us share your views. Have a good day and a long life to your blog.
I genuinely enjoy reading through on this site, it has got wonderful blog posts.
Nice post. Thjank
Nice post pro, thank.
I had a problem where a certain element look fine in FireFox, Chrome and IE but different in Safari. Some of the CSS I coded for my WordPress site was done in DreamWeaver CS. After searching the web and struggling, I finally fixed the problem.
It seems that DreamWeaver inserts a “@charset “UTF-8″;” code on the first line of the CSS file. After I removed the charset code form the CSS file, Safari behaved.
I would firstly suggest that anyone removes this piece of code before attempting anything else. If you don’t have this code in your CSS file, then you can go on trying other methods.