I'm new to Modernizr and I'm just looking for a simple way to check for overall browser patibility. I've generated a Modernizr script to test for only the most essential ponents of my web application, which is highly dependent on HTML5, CSS3, and modern JavaScript methods. Is there a way to run all of these tests simultaneously? Looking over the documentation, I see plenty of ways to test each feature one by one, but I'm not seeing a way to do it all at once. I'm hoping to do something like this:

Pseudocode

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

I'm new to Modernizr and I'm just looking for a simple way to check for overall browser patibility. I've generated a Modernizr script to test for only the most essential ponents of my web application, which is highly dependent on HTML5, CSS3, and modern JavaScript methods. Is there a way to run all of these tests simultaneously? Looking over the documentation, I see plenty of ways to test each feature one by one, but I'm not seeing a way to do it all at once. I'm hoping to do something like this:

Pseudocode

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

• javascript
• cross-browser
• patibility
• modernizr

7 Answers 7

It turns out that all the tests are stored as booleans directly in the Modernizr object, so if you're building an application with a lot of feature dependencies and you 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;
  }
}

I was looking for the 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]);          
            }
        }
    }


}

HTH!

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

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

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

<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>

Using modern Javascript (ECMAScript 2017), you can utilise the Object.values method like so:

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