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", "inDocument"); //IE9+, FF3+ and all other browsers
		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("pointerEvents"); //IE11, FF3.6+, Chrome, Safari4+, Opera15+
		this.detectFeature("borderRadius"); //IE9+, FF4+, Chrome5+, Safari5+, Opera10.5+
		this.detectFeature("SVG"); //IE9+ and all other browsers.  Various known bugs.
		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", "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("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"); //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("prefixed-webRTC"); //FF22, Chrome23, Opera18
		this.detectFeature("RTCPeerConnection", "inWindow"); //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, 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;
		var 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 "SVG":
					if(!!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) {
						passed();
					} else {
						failed();
					}
					break;
				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 "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;
				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;
}