<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>
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
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment