Is There Any Dedicated CSS Hacks For Safari or Opera?

Published by Chris Coyier

This question was sent in by Marcin Lachowski.

Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn't like that symbol, so you could declare something like this:

p { color: red; }
p { color: black;# }

Every other browser will read the second line replacing the first line and the text will be black. Safari doesn't like that pound sign and will stick with the first declaration and the text will be red. This is the perfect example of why using hacks are a bad idea, because it no longer works (Safari 3 and beyond).

Now there is a new hack on the block targeting newer versions of Safari as well as Opera 8/9:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari-Opera specific declarations here */
}

Originally published here.

So the answer? Yes, there is a browser-specific hacks for Safari and Opera. But you really need to ask yourself: Should you use being using hacks like this? My generic advice is no. Not only will hacks like this cause you grief in the future, but this the fact that you are looking for a hack like this is probably symptomatic of some deeper problems with how you are approaching the design. That's not to say there isn't potentially some circumstances where a hack like this is your only way out, but before doing it, take a hard look at your current approach and see if there is another way to tackle it without needing a hack.

This is a good opportunity to mention a few other things.

  • There are many "CSS hacks" for Internet Explorer. They are never necessary. They are just as susceptible to future-breakage as other hacks, and all Internet Explorer browsers provide a perfectly valid and future-proof way to handle sending them browser-specific CSS. They are called "conditional stylesheets", see How To Create an IE-Only Stylesheet. Some days, you will wish Opera and Safari had these as well, but the reality is these are problematic to "web standards". Ideally we don't want to serve different files to different browsers. This is a long slippery slope.
  • There are various ways to doing browser detection on the web. The majority of them have to do with reading the browser "user-agent" string. There are a lot of problems with this, for a great primer, read a quick history of the user-agent string. For one thing, it's spoofable. For another, it often makes use of technologies like JavaScript, which you can't be certain is enabled on every users machine. These techniques can be used to serve up stylesheets to very specific browsers, but clearly that can be problematic. If you are going to do it, it's safer to do it with a server-side technology (like PHP) then a client-side technology (like JavaScript). Check out Conditional CSS if this is appealing to you.
  • There are some situations when serving up browser-specific files is just fine, and that's when you are working in a controlled environment where you know all the details exactly. For example, the iPhone. You know exactly what user agent string it's going to serve up, you know exactly the screen size, you know exactly the JavaScript capabilities. So while it can be a good idea to create an iPhone specific page and you can be confident that your JavaScript browser sniffing will work, there are still considerations. iPhone's don't want to be served up a different page just because it's an iPhone, that's like browser racism. It wants the same web that everyone else gets. If you want to create a specific page just for it, it should be an option, not a requirement.