Apply CSS only for Safari?

Question

Can I add a css block that I want to show only in Safari and other browsers?

Answer 1

Here is an example that would set the font color of your site to green if your browser is Safari or Chrome (both share a 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.

Answer 2

Using the UserAgent string, you can check Safari and! Chrome Both use WebKit Renderer, and both have Safari in the UA string, but Chrome also has "Chrome." Honestly, I’ll just check on Webkit and the code, because who knows what another WebKit browser puts UA in its lines.

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

Answer 3

Use this. It will only work in Safari.

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