CODEWITHSUNDEEP
javascriptcross-browsercompatibilitymodernizr
David Jones
David Jones

Reputation: 10219

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

I'm new to Modernizr and I'm just looking for a simple way to check for overall browser compatibility. I've generated a Modernizr script to test for only the most essential components 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 compatibility page
}

Upvotes: 8

Views: 2056

Answers (7)

Sebastian Viereck
Sebastian Viereck

Reputation: 5895

Use this Code if you want to display all feature detections in the browser:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modernizr Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

</head>
<body>
<h1>Feature Detection</h1>
<div id="feature-detection-result">

</div>
<script>
    var features = Object.keys(Modernizr);
    features = features.sort();

    features.forEach(feature => {
        if (typeof Modernizr[feature] === "boolean") {
            var element = document.createElement('p');
            element.innerHTML = feature + ' ' + Modernizr[feature];
            document.getElementById('feature-detection-result').appendChild(element);
        }
    });
</script>
</body>
</html>

Upvotes: 0

Sebastian Viereck
Sebastian Viereck

Reputation: 5895

Use this Code if you want to display all feature detections in the browser:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modernizr Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

</head>
<body>
<h1>Feature Detection</h1>
<div id="feature-detection-result">

</div>
<script>
    var features = Object.keys(Modernizr);
    features = features.sort();

    features.forEach(feature => {
        if (typeof Modernizr[feature] === "boolean") {
            var element = document.createElement('p');
            element.innerHTML = feature + ' ' + Modernizr[feature];
            document.getElementById('feature-detection-result').appendChild(
                element
            );
            console.log(feature, Modernizr[feature]);
        }
        }
    );
</script>
</body>
</html>

Upvotes: 0

Ben Carey
Ben Carey

Reputation: 16958

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 😜)')
}

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

Upvotes: 0

Funny Fat Man
Funny Fat Man

Reputation: 3

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>

Upvotes: 0

Avram Ionut
Avram Ionut

Reputation: 1

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

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

Upvotes: 0

Rowan
Rowan

Reputation: 137

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!

Upvotes: 0

David Jones
David Jones

Reputation: 10219

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

Upvotes: 8

Related Questions