Sunday, 3 September 2017

Modernizr feature discovery demo

I just made a Modernizr feature discovery demo! It lists up the features Modernizr looks for and tests the browser you are running if it supports that feature! Plunk - Modernizr demo




<html class="no-js">

<head>
<meta charset="utf-8"/>
<title>Modernizr browser feature detection</title>
<script data-require="modernizr@*" data-semver="2.6.2" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>

<style>

.greenlight {

}

.yellowlight {

}

.redlight {

}

.trafficlight {


}

.trafficlight:after {
    background-color: #10AF20;
 border-radius: 10px;
 padding-left: 5px;
 padding-right: 5px;
}

.redlight:after {
 content: "UNSUPPORTED ";
    color: #f0f0af;
    background-color: #AF1020;
}

.yellowlight:After {
 content: "PERHAPS SUPPORTED";
 color: #f0f0af;
    background-color: #AFAF10;
}

.greenlight:after{
 content: "SUPPORTED ";
 color: #f0f0af;
 background-color: #10AF20;
}

.underlight{
 margin-left:30px;
}

li {
 font-family: Trebuchet, Verdana;
 margin: 4px;
}

</style>

<body>
<h2>Modernizr browser feature detection</h2>


<ul id="ModernizrFeatureList">
<script>

function displayfeature(feature, isSubfeature){
   var isFeaturePartiallySupported = false;
   var isFeatureSupported = false; 
   if (eval("Modernizr." + feature) === true){
    isFeatureSupported = true;
   }
   if ((eval("Modernizr." + feature) === "probably") | (eval("Modernizr." + feature) === "maybe")){
    isFeaturePartiallySupported = true;
   }

   //debugger;

   var trafficlight = "trafficlight" + " ";
   if (isFeatureSupported)
    trafficlight += "greenlight"; 
   if (isFeaturePartiallySupported)
    trafficlight += "yellowlight"; 
   if (!isFeatureSupported && !isFeaturePartiallySupported){
    trafficlight += "redlight";
   }

   if (isSubfeature)
    trafficlight += " underlight";

   var featureToShow = "<li class='" + trafficlight + "'>" + feature + ": " + eval("Modernizr." + feature) + " </li>";

   return featureToShow;
}

var modernizrProps = _.sortBy(Object.keys(Modernizr), function(key){ return key; });


modernizrProps.forEach(function(feature, index){

  var modernizrFeatureType = eval("typeof Modernizr." + feature); 

   if (modernizrFeatureType == "boolean"){
     var f = displayfeature(feature, false);
     $("#ModernizrFeatureList").append(f);
   }
   else if (modernizrFeatureType === "object"){
    try {
     //debugger;
     for (var subfeature in  eval("Modernizr." + feature)){
     var subf = displayfeature(feature + "." + subfeature, true);
     $("#ModernizrFeatureList").append(subf);
    }

    }
    catch (Error){

    }
   }
 
});


</script>

</ul>
</body>
</html>



Share this article on LinkedIn.

No comments:

Post a Comment