You’d think in 2018 we’d have a standard way to do browser detection or that the majority of browsers would handle standard idiosyncracies around CSS properly.
But here we are, and it’s still not happening.
So here’s the deal: The following gist is a library-agnostic, linted function used to test whether or not Chrome is being used. You can easily change the regular expression (or add to it) based on your needs.
But why not have something that’s easy to drop into your project:
The idea behind the above function is simple (and the code comment gives enough insight, I think, to give you a heads up).
- Check to see if Chrome or Chromium is present in the Navigator object’s user agent,
- Return true if so; otherwise, return false.
If you’re looking to modify this for your use, then I’d recommend doing, at a minimum, a console.log call on the Navigator’s user agent. This will give you the information you need to build your regular expression to determine which browser is being used.
A Word About CSS
Some may argue that if you have to do this, then you’re CSS is not correct. And in some cases, that may be right. We still have browser prefixes.
But depending on the requirements of a project or the implementation that you need to follow, it’s important to remember that one’s mileage may vary based on that alone.
So before jumping to conclusions on whether or not this is needed, note that some requirements call for measures like this. At the same time, don’t abuse it either. If browser fixes do the trick, roll with ’em.