First of all, before I begin, please know that in every case, you should detect browser features and not browser versions. However, there are still times that you may need to know the browser version (such as providing screenshots of various browser alerts – ie: ActiveX installation).
Detecting IE Compatibility Mode
A complete example is shown below:
The output for this looks like the following:
If you change over to compatibility mode in IE, you’ll notice that the output changes.
Why is this Bad?
What do we do when Chrome 74 is released? What about Internet Explorer 11? Keeping up with user agent strings is a nightmare which is why there are so many commercial products that attempt to detect browser versions.
The Solution: Detecting Browser Features
In the past, it may have been difficult to detect browser features as there were so many potential implementations of a feature. In nearly all modern browsers, features have all been standardized around HTML 5. Internet Explorer 10 standardizes in HTML 5. Google recently announced that their abandoning WebKit to standardize more.
It’s not that difficult to check for features. It’s as simple as checking to see if the feature is undefined and then acting upon it. You can see an example below:
In this case, since WebKit has its own implementation of the getUserMedia() method, we must include the webkit preface to some of the properties.
You can see this in live action by clicking here. If you are using Chrome or another WebKit browser, you’ll be prompted to allow the browser to have access to your webcam. If not, you should get an error message.
Feel free to fork the Gist above and begin adding your own features to detect to the BrowserFeatures object.