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>
No comments:
Post a Comment