Distinguish between Chrome and Safari user agent string in CSS (no JavaScript)
Is there a CSS selector that targets Safari only and one that targets Chrome only?
To give something to start with, this is a selector that I thought only Safari would select, unfortunately it turns out that it also targets Chrome:
html[data-useragent*="Safari"] {
[...]
}
+3
Blackbird
source
to share
1 answer
You can combine an attribute selector with a selector :not()
:
/* Safari */
html[data-useragent*="Safari"]:not([data-useragent*="Chrome"]) {
[...]
}
And correspondingly:
/* Chrome */
html[data-useragent*="Safari"][data-useragent*="Chrome"] {
[...]
}
But as DarkDust wrote, you have to tweak the specific issue between browsers, not browsers in general, since you cannot rely on browser vendors to change nothing. I must admit that it is very difficult without javascript.
+3
kramsee
source
to share