0

Need to check which browser my app is running in. Specifically, it has to do with applying some special styles on Safari only.

The usual way of doing this I'd thought would be the following:

const isSafari = navigator.userAgent.includes('Safari')

The issue is, it would seem that Chrome also has Safari in it's userAgent.

  • Chrome: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36
  • Firefox: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:97.0) Gecko/20100101 Firefox/97.0
  • Safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15

What would be a more reliable way of detecting when Safari is being used?

Thanks!

Edit: I am also opened to solutions that could just be done through pure CSS.

What I am trying to do is add a scrollbar-gutter in a div. For Safari however, this isn't going to do any good, so I'd like for that case to instead just set overflow-y to scroll.

This is what my code currently looks like:

const App = () => {

  const isSafari = navigator.userAgent.includes('Safari') // is true for chrome as well! Need something more reliable!
  return (
    <div
      style={{
        border: '1px solid black',
        ...(isSafari ? { overflowY: 'scroll' } : { scrollbarGutter: 'stable' })
      }}
    >
    A bunch of content which may or maynot have a scrollbar present.
 
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
theJuls
  • 6,788
  • 14
  • 73
  • 160
  • There should be 100s of questions on detecting browsers. – epascarello Mar 01 '22 at 22:40
  • https://stackoverflow.com/questions/7944460/detect-safari-browser – epascarello Mar 01 '22 at 22:42
  • Yes. Most of which, the answers are telling me to check the userAgent or install an external library. – theJuls Mar 01 '22 at 22:43
  • the one linked there I did not see. And may actually be my answer. userAgent + vendor. But feels like there should be a simpler way. – theJuls Mar 01 '22 at 22:44
  • 1
    useragent "sniffing" is considered a poor choice when detecting browsers as it can be easily changed by the user anyway. feature detection is considered a better option in most cases - applying styles for specific browsers can sometimes be done purely in CSS too (though, I think that is more likely to be only for internet explorer these days - but, Safari IS the new internet explorer) – Bravo Mar 02 '22 at 00:26
  • Fair point, I know it's not ideal. I just wanted some kind of heuristic to only apply something on Safari. What would be the alternative way in which I can detect it through CSS? I will add further context in the OP of what is being done. – theJuls Mar 02 '22 at 03:12

0 Answers0