CSS Hack:Getting Safari to behave
August 6th, 2007 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.
Popularity: 12%
August 6th, 2007
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.
August 6th, 2007
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
December 20th, 2007
[…] 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;} […]
May 10th, 2008
Targeting the Safari makes no sense, because Mac-Users always download the latest System-updates and with that the newest Webkit-Engine.
May 12th, 2008
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/
May 12th, 2008
Macx, I think that’s a pretty ignorant and sweeping statement you made there.
Thanks for the article, bookmarked.
May 12th, 2008
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.
May 12th, 2008
[…] се поддържат частично от Опера и Сафари. Dustin Brewer дори предлага да се ползва тази възможност за подаване на стилове […]
May 14th, 2008
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.
May 19th, 2008
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….
May 20th, 2008
[…] this CSS hack for Safari 3 today which can be handy from time to […]
June 6th, 2008
It works for me so very happy!
Cheers Alby