Edit in JSFiddle

var score = 0,
DetectFeatures = {
    init: function () {
//        this.detectFeature("outline"); //IE8+ and all other browsers
//        this.detectFeature("opacity"); //IE9+ and all other browsers
//        this.detectFeature("wordWrap"); //Not FF3- or Opera 10.1-
        this.detectFeature("getElementsByClassName", 0, 1); //IE9+, FF3+ and all other browsers
        this.detectFeature("querySelector", 0, 1); //IE8+, FF3.5+, Chrome, Safari, Opera10.1+
        this.detectFeature("localStorage", 1); //IE8+, FF3.5+, Chrome, Safari4+, Opera10.5+
        this.detectFeature("EventSource", 1); //FF6, Chrome6, Safari5, Opera11?
        this.detectFeature("pointerEvents"); //IE11, FF3.6+, Chrome, Safari4+, Opera15+
        this.detectFeature("borderRadius"); //IE9+, FF4+, Chrome5+, Safari5+, Opera10.5+
        this.detectFeature("classList");  //IE10+, FF3.6+, Chrome8+, Safari5.1+, Opera11.5+
//        this.detectFeature("boxSizing");  //IE8+, FF29+, Chrome10+, Safari5.1+, Opera9.5+
        this.detectFeature("boxShadow");  //IE9+, FF4+, Chrome10+, Safari5.1, Opera10.5+
        this.detectFeature("atob", 1); //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", 1); //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("pageVisibility"); //IE10+, FF18+, Chrome33+, Safari6.1+, Opera12.1,20+
        this.detectFeature("transform"); //IE10, FF16, Chrome 36, Safari9, Opera12.1,23
        this.detectFeature("crypto", 1); //IE12, FF21, Chrome11, Safari6.1, Opera15
        this.detectFeature("flexDirection");  //IE11, FF22, Chrome29, Safari9, Opera12.1,17
        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"); //non-W3C
        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
        this.detectFeature("prefixed-webRTC"); //FF22, Chrome23, Opera18
        this.detectFeature("RTCPeerConnection", 1); //FF44, Opera43
        this.detectFeature("colorAdjuster"); //no known support
        this.detectFeature("wrap-flow"); //no known support
        this.detectFeature("text-underline-position"); //support unknown
        this.detectFeature("text-emphasis"); //FF46, Safari7.1
        this.detectFeature("text-decoration-style"); //FF36
        this.detectFeature("text-decoration-skip"); //no known support
        this.detectFeature("serviceWorker", 0, 0, 1); //FF44, Chrome40, Opera27
        //TODO: this.detectFeature("::placeholder"); FF51, Chrome57
        this.outputMessage("Score: " + score);
    },
    outputMessage: function (message, prop, warning) {
        var newNode = document.createElement("p");
        if (warning) {
            newNode.id = prop + "_warning";
        }
        newNode.innerHTML = message;
        document.body.insertBefore(newNode, document.body.firstChild);
    },
    detectFeature: function (property, inWindow, inDocument, inNavigator) {
        var message,
            testNode = document.getElementById('first');
            //newNode = document.createElement("p");
        function failed() {
            message = ": detection failed.";
            //newNode.id = property + "_warning";
            DetectFeatures.outputMessage(property + message, property, true);
        }
        function passed() {
            message = " was detected: success.";
            score++;
            DetectFeatures.outputMessage(property + message);
        }
        if (inWindow) {
            if (property in window) {
                passed();
            } else {
                failed();
            }
        } else if (inDocument) {
            if (property in document) {
                passed();
            } else {
                failed();
            }
        } else if (inNavigator) {
            if (property in navigator) {
                passed();
            } else {
                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 Android browser versions 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 "prefixed-webRTC":
                    if(window.webkitRTCPeerConnection || window.mozRTCPeerConnection) {
			            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;
                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;
}