Here is how you detect the browser using both JavaScript and CSS
A quick way to tell the browser in use
Often times we develop a web application and we get ready hours before a release just to realize that the UI is broken on IE or Safari. For many cases, the solution might be very simple, however, some issues can only be fixed by applying certain rules when knowing the browser being used to view the website. Browsers used to give you that piece of information when accessing navigator.appName, that was when the most common browsers such as “Microsoft Internet Explorer” and “Netscape” used different APIs and features (1). Developers had to use methods of browser detections to write code for each browser separately.
You can’t get the browser name using the aforementioned method anymore since all browsers now follow the same standards except for a few (just one, I’m looking at you IE). According to MDN Documentation, the property is only kept for compatibility purposes and returns “Netscape” regardless of which browsers you use to access it.
Browser detection is a bad practice
Let me point out the fact that I also agree with a lot of developers about the fact that browser detection is a bad practice. Why? Chris Coyier from CSS-Tricks (2) sums it up pretty nicely in the article below. In short, you don’t want to hinder browsers from accessing the website the way all the other browsers do, even though they might not actually support all the missing features at the time of development.
Instead of browser detection, you should always use feature detection. You should only write workarounds or re-designs for browsers lacking the features you require. Hoping that with updates it will be able to access it the way you intended it.
So why are we considering browser detection?
Sometimes, you just don’t have enough time or allocation to support old browsers and you might want to rule them out altogether. Which is something a lot of websites started to do like Codepen.io. If you open codepen on Internet Explorer. This is what you will see:
We know IE won’t fully support all the cool features that CSS3 brings such as the grid system. CSS3 brings a nifty way of doing feature detection with @supports, read more here. However, IE and Safari don’t support it. Which leaves little options for developers who are bind to deadlines and deliveries.
Detecting browser in use with javascript
If you are working with modern frontend technologies, most likely you are using something like React, Angular, VueJS or Svelte. In this case, the fastest way to fix browser incompatibility is to develop the UI the way you or the designer intended, and then detecting if IE is being used to render a primitive UI like a table instead. You wouldn’t want to render both and use CSS detection to show or hide each one because that would slow down the experience since re-renders will still continue to happen to the hidden alternative UI.
In most cases, you can determine the browser in use just by accessing the navigator.userAgent. The userAgent won’t return the name in a clear way so you need to write a small snippet that captures that piece of information. Check out the following snippet:
This function can detect all the browsers, however, I couldn’t find a way to detect Brave nor Vivaldi as those two masquerades as Chrome for valid reasons. That’s still not an issue because both of them supports all the features supported by Chrome.
You might have noticed that there is a bit of complexity with Safari detection, that is due to the fact that Chrome mobile recently added support for Apple pay, therefore, we can’t just use !!window.ApplePaySetupFeature to determine that it is Safari.
Detecting browser in use with CSS
This is the one that makes sense the most because you want to write fixes for certain browsers but you don’t want to change the whole experience or worst, block them from accessing the UI. You can use this to write special CSS fixes for IE or Safari. Here’s how you can achieve this:
As you can see, you can still detect Chromium browsers but you won’t be able to tell them apart, which is Ok, because rest assured that they will behave the same.
A demo
For the purpose of this article, I’ve created a repository where all the code mentioned above is used to demo the browser detection. You can view the demo here:
You can visit this link in any browser to see it in action. You will see the detection happening in both JavaScript and CSS. As of the time writing this article, all of the techniques used are working. Browsers might behave differently in the future.
Last words
These techniques are solely derived from my experience, if you know of any reliable ways of detecting browsers the please share them in the comment section below
I want to give a special shoutout to omar boudfoust for helping me test it on IE since I don’t have access to a Windows machine.
