What Safari-Specific Pure CSS Hacks Are Out There

What Safari-specific pure CSS hacks are out there?

I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.

FYI, this hack only targets Safari 3, and also targets Opera 9.

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

Apply CSS only for Safari?

Here's an example which would set the font colour of your site to green if your browser is Safari or Chrome (both share the common Webkit rendering engine).

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        color:green; /* on Safari and Chrome  */
    }
}

This is taken from another post here

How do I add a css line ONLY for Safari

This is not possible since you would be applying the same property to Chrome as well. As Chrome, and Safari both use the -webkit- prefix.

But you could do this in PHP.

<?php
    $browser = get_browser();
    if(strtolower($browser->browser) == 'safari') {
        echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
    } 
?>

Replace safari.css with your own stylesheet. Credit to @theorise

Is there a pure-CSS hack to activate “text-align: justify” only if the browser supports “hyphens: auto”?

The new @supports property can do it, however that is not supported by all browsers either. If you are willing to accept that as a limitation you can look at the Mozilla Docs here:
@supports

What is better: CSS hacks or browser detection?

The problem is that you only really get one shot at the css (since it is pretty much static content at the client)... you can't (easily) adapt it to suit on the fly at the client - so for those tricky incompatible cases (and there's too many of them), detection is sadly the best route. I can't see this changing very soon.

With javascript, you can often avoid much of this pain through libraries like (as you state) jQuery - and checking for functionality support rather than identifying the specific browser (most of the time). There are some cases you need to know exactly (the box model, for example).

---

Related Topics