Clever Geek Handbook

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


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


source






More articles:


All Articles