Is there a way to run all Modernizr tests at once?

Question

I'm new to Modernizr, and I'm just looking for an easy way to check for general browser compatibility. I created a Modernizr script to test only the most important components of my web application, which is very dependent on HTML5, CSS3 and modern JavaScript methods. Is there a way to run all of these tests at once? After looking through the documentation, I see many ways to test each function one by one, but I do not see a way to do it right away. I hope to do something like this:

pseudo code

if (Modernizr.testAll()) { // Load site } else { // Redirect to compatibility page } 

Answer 1

It turns out that all tests are stored as Boolean directly in the Modernizr object, so if you create an application with a lot of function dependencies and want to test them all at once, use this:

 var supported = true; for (var feature in Modernizr) { if (typeof Modernizr[feature] === "boolean" && Modernizr[feature] == false) { supported = false; break; } } 

Answer 2

I was looking for the exact same thing and I came up with the following code:

 for (var feature in Modernizr) { if (typeof Modernizr[feature] === "boolean") { console.log("Modernizr_" + feature + ": " +Modernizr[feature]); for (var subFeature in Modernizr[feature]) { if (typeof Modernizr[feature][subFeature] === "boolean") { console.log("Modernizr_" + feature + "_"+ subFeature + ": " + Modernizr[feature]); } } } } 

NTN!

Answer 3

A cleaner way that works for me and all on one line

Object.values(Modernizr).indexOf(false) === -1

Answer 4

I personally struggled a lot with this. But finally, he found the answer at the end of the day. You can use my code below, it will show a complete list of Modernizr features and their meanings:

 <script type="text/javascript"> $(document).ready(function () {}); </script> <script type="text/javascript"> $(function () { function ListAllMOdernizrFeatures() { var TotalString = "Modernizr features<br><br>"; var arrModernizrFeatures = new Array(); for (var feature in Modernizr) { if (typeof Modernizr[feature] === "boolean") { console.log("Modernizr_" + feature + ": " + Modernizr[feature]); arrModernizrFeatures.push("Modernizr." + feature + ": " + Modernizr[feature]) for (var subFeature in Modernizr[feature]) { var ModernizrFeature = Modernizr[feature]; if (typeof ModernizrFeature[subFeature] === "boolean") { arrModernizrFeatures.push("Modernizr." + feature + subFeature + ": " + ModernizrFeature[subFeature]); } } } } arrModernizrFeatures.sort(); // in lexicographical order for (var PropertyIterator = 0; PropertyIterator < arrModernizrFeatures.length; PropertyIterator++) { TotalString += PropertyIterator + 1 + ". " + arrModernizrFeatures[PropertyIterator] + "<br>"; }; document.getElementById("ListFeatures").innerHTML = TotalString; } setTimeout(ListAllMOdernizrFeatures, 100); }); </script> 

Answer 5

Using modern Javascript (ECMAScript 2017), you can use the Object.values method as follows:

 if (Object.values(Modernizr).indexOf(false) !== -1) { console.log('Update your browser (and avoid IE/Edge 😜)') } 

Object.values fetches all test results from Modernizr into an array, and then indexOf(false) checks to see if any of the elements in the array are false (i.e. the test failed).