LambdaTest Community

Find answers, support, and inspiration from other users

LambdaTest Community

How Modernizr helps in cross browser testing of web apps?

I wanted to know how Modernizr helps in cross browser testing of web apps. Can anyone please peovide explanation regarding that.

Up Vote Down Vote 0 Votes
Posted 4 months ago


This article is for developers who are not that much comfortable in using JavaScript, but are comfortable in using HTML and CSS for web development. There is an incredible open source JavaScript library called Modernizr that can efficiently solve challenges faced in cross browser web development and based on test case scenarios, conditionally load JS or CSS files. Modernizr detects the CSS3 and HTML5 features supported by the browser of the end user. If you are smart, and have time to use this data, then you can develop webpages that behave differently based on this detection. For example you can detect if the rendering browser is Edge version 15 which does not support a specific function of your master CSS and based on that give a fallback CSS for not supported browsers

It allows developers to test the new features and also provide fallback measures for browsers where the features are not supported. This process is a little bit more efficient and surgical than traditional browser sniffing and is called Feature detection.

What is Feature detection

When UI development was in the dark ages, developers had to write conditional scripts in order to make sure whether the new HTML or CSS feature they are about to use is supported by the browser. But what if an updated version of the browser is released that supports the feature. The code will remain the same, and the script will run unnecessarily, increasing the complexity of the code. The worst case being, you will stay uninformed that the code works in the updated browser and will go on writing conditional scripts for future codes.

Modernizr introduces Feature Detection. That will check whether the browser supports the code and gives you a “false” or “true” result. Based on that result, you need to update the code. Let’s take a look into how to install and use Modernizr and some of its features that makes cross browser compatible application development much easier.

Up Vote Down Vote 0 Votes
Posted 2 months ago
1 Answer
4 months ago