Apply CSS only for Safari?

Question

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

check this http://stackoverflow.com/questions/2052218/is-there-any-equivalent-to-ie-conditional-comment-for-chrome-and-safari — patrick, Oct 29 '10 at 17:11

score 13 · Accepted Answer · edited May 23 '17 at 12:09

13

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

edited May 23 '17 at 12:09

Community

1
1

answered Oct 29 '10 at 17:09

Brian Scott

9,221
6
47
68

2

I assume you meant Chrome, not Opera. Chrome uses the WebKit engine, Opera uses their own engine (called Presto). – jhurshman Oct 29 '10 at 17:14
1

@jhurshman, yes I did, thanks (it's getting late on a Friday :-) ) – Brian Scott Oct 29 '10 at 17:16
@jhursh it targets Opera 9.2 too – Knu Jun 09 '11 at 23:49
1

how can i further add a media query to this safari specific css?? – bhavya_w Jun 30 '14 at 12:43

score 0 · Answer 2 · answered Oct 29 '10 at 16:38

0

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

answered Oct 29 '10 at 16:38

josh.trow

4,861
20
31

The UserAgent string can be spoofed very easily. This is not a reliable approach. – stevelove Oct 29 '10 at 17:12
I'm not saying its the best method, but to find SAFARI ONLY is nigh impossible so you take what you can get. – josh.trow Oct 29 '10 at 17:20
does css use the useragent to check which browser? – Ascherer Oct 29 '10 at 17:51
No, I think you would have to use a JS check in your code and include the appropriate style sheet. – josh.trow Oct 29 '10 at 18:36
2

user agent can be spoofed, but 99.99999% of the people browsing the web won't be spoofing user agents to get around minor css hacks so its generally safe if its a last resort. – mardala May 08 '12 at 18:16
why would someone spoof the user UserAgent string, and if you do spoof it you should expect some irregularities to ensue. UserAgent away my friend – JohnnyFaldo Sep 05 '13 at 14:26

score -2 · Answer 3 · edited Sep 05 '17 at 08:08

-2

Use this. It will work only in Safari.

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

edited Sep 05 '17 at 08:08

Pang

9,564
146
81
122

answered Sep 05 '17 at 07:31

Sheo Sagar

897
9
9

Apply CSS only for Safari?

3 Answers3

Linked