3

Is there a CSS selector which targets only Safari, and one which targets only Chrome?

To give something to start from, this is the selector that I thought would select only Safari, unfortunately it turns out that it targets Chrome as well:

html[data-useragent*="Safari"] {
  [...]
}
Blackbird
  • 2,368
  • 4
  • 26
  • 41
  • 2
    Have you tried this ? http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome – Joel Almeida Apr 17 '15 at 08:17
  • 2
    Since it's always fragile/problematic to test for a specific browser, the question is _why do you need that?_ Is there a specific problem with Safari (which?) or Chrome (which?) that you need to work around? – DarkDust Apr 17 '15 at 08:26
  • @DarkDust for example: flexbox model is not working for current Safari versions while it's working fine for Chrome (https://css-tricks.com/forums/topic/flexbox-not-working-on-safari/) – Agustí Sánchez Apr 12 '17 at 12:13

1 Answers1

3

You could combine the attribute selectors with the :not() selector:

/* Safari */
html[data-useragent*="Safari"]:not([data-useragent*="Chrome"]) {
  [...]
}

And respectively:

/* Chrome */
html[data-useragent*="Safari"][data-useragent*="Chrome"] {
  [...]
}

But as a DarkDust wrote, you should target a specific issue between the browsers and not the browsers as a whole, since you can't rely on the browser vendors not to change anything. I have to admit that it's kinda hard without javascript.

kramsee
  • 309
  • 2
  • 10
  • I just thought it worked, but it doesn't - desktop Chrome is actually targeted by the first selector. – Blackbird Apr 21 '15 at 18:41
  • I created a fiddle to test it once again with current useragent strings: http://jsfiddle.net/swfx95jt/1/ Can you show me your html or the useragent strings you are applying to the html tag? – kramsee Apr 22 '15 at 05:44
  • Thank your for your comment, the JsFiddle definitely works, so I'm confused why it doesn't work similarly in my project. Setting it back to "answered" while I investigate... – Blackbird Apr 22 '15 at 07:48
  • Actually the JsFiddle doesn't work. This is the kind of code that is close to the original question, and it doesn't work for any browser, because it's just not compatible with JsFiddle: http://jsfiddle.net/swfx95jt/2/ – Blackbird Apr 22 '15 at 07:59
  • ok, I see where the problem is. I was assuming that you were serving your html files, where the `` tag had a `data-useragent` attribute – which would be inserted on the server. If you're not doing this, you should take a look at the question Joel Almeida posted and especially the second answer: http://stackoverflow.com/a/25975282/1902425 Additionally you should clarify your question, since you're not working with useragent strings, – kramsee Apr 22 '15 at 11:04
  • 1
    The OP states that the attribute selector that they have matches in both Safari and Chrome. That would imply that they are in fact serving their documents with such an attribute. But they seem to be telling a completely different story here. – BoltClock Apr 22 '15 at 11:19
  • 1
    I am indeed serving HTML files, where the `` tag has a `data-useragent` attribute. After another test, the solution works. I realise the reason why I thought the solution failed, was due to some caching issues on my side. I'm very sorry for the confusion. Still, this taught us that JsFiddle isn't the right tool to do quick tests on user-agent. – Blackbird Apr 22 '15 at 12:04