var score = 0,
DetectFeatures = {
init: function () {
this.detectFeature("querySelector", "inDocument"); //IE8+, FF3.5+, Chrome, Safari, Opera10.1+
this.detectFeature("localStorage", "inWindow"); //IE8+, FF3.5+, Chrome, Safari4+, Opera10.5+
this.detectFeature("EventSource", "inWindow"); //FF6, Chrome6, Safari5, Opera11?
this.detectFeature("Worker", "inWindow"); //IE10, FF3.5, Chrome, Safari4, Opera11.5
this.detectFeature("pointerEvents"); //IE11, FF3.6+, Chrome, Safari4+, Opera15+
this.detectFeature("classList"); //IE10+, FF3.6+, Chrome8+, Safari5.1+, Opera11.5+
this.detectFeature("boxShadow"); //IE9+, FF4+, Chrome10+, Safari5.1, Opera10.5+
this.detectFeature("atob", "inWindow"); //IE10+, and all other browsers
this.detectFeature("textShadow"); //IE10+, FF3.5+, Chrome, Safari?, Opera9.5+
this.detectFeature("gradients"); //IE10+, FF16+, Chrome26+, Safari6.1+, Opera12.1+
this.detectFeature("transition"); //IE10+, FF16+, Chrome26+, Safari6.1+, Opera12.1+
this.detectFeature("performance", "inWindow"); //highResTime: IE10+, FF15+, Chrome24+, Safari8+, Opera15+
this.detectFeature("performance.mark"); //IE10+, FF35+, Chrome25+, Opera15+
this.detectFeature("calc"); //IE10+, FF16+, Chrome26+, Safari6.1+, Opera15+
this.detectFeature("viewportUnits"); //IE9+(vh,vw only), FF19+, Chrome26+, Safari6.1+, Opera15+
this.detectFeature("scrollIntoView"); //IE8, FF1, Chrome29, Safari5, Opera38
this.detectFeature("pageVisibility"); //IE10+, FF18+, Chrome33+, Safari6.1+, Opera12.1,20+
this.detectFeature("transform"); //IE10, FF16, Chrome 36, Safari9, Opera12.1,23
this.detectFeature("crypto", "inWindow"); //IE12, FF21, Chrome11, Safari6.1, Opera15
this.detectFeature("flexWrap"); //IE11, FF28, Chrome29, Safari9, Opera12.1,17
this.detectFeature("borderImageSource"); //IE11, FF15, Chrome16, Safari6, Opera15
this.detectFeature("htmlTemplates"); //IE13, FF22, Chrome26, Safari7.1, Opera15
this.detectFeature("fontSizeAdjust"); //FF3
this.detectFeature("fontStretch"); //IE9, FF9, Chrome48, Opera35
this.detectFeature("animation"); //IE10, FF16, Chrome43, Safari9, Opera30
this.detectFeature("cssVariables"); //FF31, Chrome49, Safari9.1, Opera36
this.detectFeature("objectFit"); //FF36, Chrome31, Safari7.1, Opera19
this.detectFeature("columns"); //IE10, FF52, Chrome50, Safari9, Opera11.5-12.17,37
this.detectFeature("hyphens"); //FF43, Chrome55
this.detectFeature("userSelect"); //Chrome54, Opera41
this.detectFeature("textStroke"); //Safari11
this.detectFeature("boxReflect"); //non-W3C
this.detectFeature("shadowDOM"); //Chrome35, Opera22, Safari10
this.detectFeature("htmlImport"); //Chrome36, Opera23
this.detectFeature("dialog"); //Chrome37, Opera24
this.detectFeature("getUserMedia"); //IE12, FF36, Chrome53, Safari11, Opera40
this.detectFeature("RTCPeerConnection", "inWindow"); //FF44, Opera43
this.detectFeature("colorAdjuster"); //no known support
this.detectFeature("text-underline-position"); //support unknown
this.detectFeature("text-emphasis"); //FF46, Safari7.1
this.detectFeature("text-decoration-style"); //FF36, Chrome57, Opera44
this.detectFeature("text-decoration-skip"); //Incomplete support: Chrome57, Opera44
this.detectFeature("serviceWorker", "inNavigator"); //FF44, Chrome40, Opera27
this.detectFeature("movementX", "MouseEvent"); //Edge13, FF41, Chrome37, Opera24, Safari10.1
//TODO: this.detectFeature("::placeholder"); FF51, Chrome57
this.outputMessage("Score: " + score);
},
outputMessage: function (message, prop, fail) {
var newNode = document.createElement("p");
if (fail) {
newNode.id = prop + "_warning";
}
newNode.innerHTML = message;
document.body.insertBefore(newNode, document.body.firstChild);
},
detectFeature: function (property, where) {
var message;
const testNode = document.getElementById('first');
function failed() {
message = ": detection failed.";
DetectFeatures.outputMessage(property + message, property, true);
}
function passed() {
message = " was detected: success.";
score++;
DetectFeatures.outputMessage(property + message);
}
if (where === "inWindow") {
if (property in window) {
passed();
} else {
failed();
}
} else if (where === "inDocument") {
if (property in document) {
passed();
} else {
failed();
}
} else if (where === "inNavigator") {
if (property in navigator) {
passed();
} else {
failed();
}
} else if (where === "MouseEvent") {
if (typeof MouseEvent === "function") {
try {
var e = new MouseEvent('mousemove');
if (property === "movementX" && typeof e.movementX !== "undefined") {
passed();
return;
}
} catch (e) {}
}
failed();
} else {
switch (property) {
case "classList":
if(document.documentElement.classList) {
passed();
} else {
failed();
}
break;
case "gradients":
testNode.style.cssText = "background-image: linear-gradient(to top, #99f, #9f9)";
if(!!~('' + testNode.style.backgroundImage).indexOf("to top")) {
passed();
} else {
failed();
}
break;
case "performance.mark":
try {
if (window.performance.clearMarks) {
passed();
} else {
failed();
}
} catch (e) {
failed();
}
break;
case "calc":
testNode.style.cssText = "padding: calc(20% / 2)"; //Some browsers can do + and - but not * and /.
if(!!~('' + testNode.style.padding).indexOf("calc")) {
passed();
} else {
failed();
}
break;
case "viewportUnits":
testNode.style.cssText = "padding-left: 2vw";
if(!!~('' + testNode.style.paddingLeft).indexOf("2vw")) {
passed();
} else {
failed();
}
break;
case "pageVisibility":
if(typeof document.hidden !== 'undefined') {
passed();
} else {
failed();
}
break;
case "htmlTemplates":
if('content' in document.createElement('template')) {
passed();
} else {
failed();
}
break;
case "cssVariables":
testNode.style.cssText = "color: var(--color)";
if(!!~('' + testNode.style.color).indexOf("var(--color)")) {
passed();
} else {
failed();
}
break;
case "shadowDOM":
try {
testNode.createShadowRoot();
passed();
} catch (e) {
failed();
}
break;
case "htmlImport":
if('import' in document.createElement('link')) {
passed();
} else {
failed();
}
break;
case "dialog":
var dialo = document.createElement('dialog');
if(dialo.open === false) {
passed();
} else {
failed();
}
break;
case "getUserMedia":
if(navigator.getUserMedia) {
passed();
} else {
failed();
}
break;
case "colorAdjuster":
testNode.style.cssText = "background-color: color(#00ff00 blackness(+ 20%))";
if(!!~('' + testNode.style.backgroundColor).indexOf("blackness")) {
passed();
} else {
failed();
}
break;
case "scrollIntoView":
if (document.documentElement.scrollIntoView) {
passed();
} else {
failed();
}
break;
default:
if (property in document.documentElement.style) {
passed();
} else {
failed();
}
}
}
}
};
DetectFeatures.init();
<h4>Forked from http://jsfiddle.net/kaya_basharan/Zj9wV/.</h4>
<div>
<p id="first"></p>
</div>
[id*=warning] {
color: #f00;
}
span {
font-weight: 700;
}
p {
margin: 0;
}