Apply CSS only for Safari?

问题:

Is it possible to add a block of css that I only want to be displayed in Safari and no other browsers?

回答1:

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

回答2:

Using the UserAgent string, you can check for Safari and !Chrome. Both use the WebKit Renderer and both have Safari in the UA string, but Chrome also has 'Chrome'. To be honest, I'd just check for Webkit and code to that because who knows what other WebKit browser put in their UA strings.

Safari :

Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-HK) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5

Chrome :

Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/540.0 (KHTML, like Gecko) Ubuntu/10.10 Chrome/8.1.0.0 Safari/540.0

回答3:

Use this. It will work only in Safari.

/* Only for Safari  */
::i-block-chrome, .yourClassName {
     border:1px solid #f00;
}