如何检测浏览器对CSS3属性的支持

过去功能检测非常容易。

在网络早期，浏览器嗅探是一种合理的解决方案。 开发人员将检查用户代理并运行针对应用程序的JavaScript代码。 这很痛苦，但通常是必要的，因为浏览器技术差异很大。

Web标准的兴起减少了代码分叉的需求。 Internet Explorer的事件模型和XMLHttpRequest实现与W3C标准不一致，但是一些对象检测克服了这些障碍。 我们的代码大部分都可以在任何地方使用。

现在，我们有了HTML5和CSS3。 没有浏览器支持所有功能，因此通常需要包含垫片或使用检测技术来确保跨浏览器的兼容性。 考虑以下浮雕文字示例：

body
{
	font-family: sans-serif;
	background-color: #fff;
}

.emboss
{
	font-size: 2.5em;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

大多数现代浏览器显示出令人愉悦的效果：

为此，我们将字体设置为与背景相同的颜色。 不幸的是，这使文本在不支持文本阴影的浏览器中不可见。 这包括Internet Explorer 9.0和所有浏览器的旧版本。

救援的现代化工具！

Modernizr是一个了不起的库，可检测CSS属性，转换，HTML5元素，画布，SVG，地理位置，本地存储，触摸事件等。 最小化的gzip压缩版本只有3.7kb，您可以通过下载定制的版本进一步减少它。

Modernizr提供了JavaScript API，并将诸如textshadow，opacity，cssgradients，svg等的类名称附加到html元素。 因此，我们可以相应地重写浮雕文字CSS：

.emboss
{
	font-size: 2.5em;
	font-weight: bold;
	color: #333;
}

.textshadow .emboss
{
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

如果您需要检测各种功能， Modernizr是目前可用的最佳解决方案之一。

滚动自己的检测代码

如果您只想检测一些CSS功能，则第三方库可能会过大。 Modernizr和类似的解决方案通过创建一个元素（未附加到DOM）并测试CSS属性的值来工作。 不支持的属性通常返回“ undefined”。

text-shadow是更容易检测到的属性之一-如果支持，以下代码会将“ textshadow”类附加到html元素：

// detect CSS text-shadow support in JavaScript
if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}

具有供应商前缀的属性有些棘手。 例如，可能不直接支持boxShadow，但是以下属性之一可能是：WebkitBoxShadow，MozBoxShadow，OBoxShadow，msBoxShadow，KhtmlBoxShadow。 因此，有必要遍历选项，例如

// detect CSS box-shadow support in JavaScript
var d = document.createElement("detect"),
	CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
	All = ("boxShadow " + CSSprefix.join("BoxShadow,") + "BoxShadow").split(",");
	
for (var n = 0, np = All.length; n < np; n++) {
	if (d.style[All[n]] === "") {
		document.getElementsByTagName("html")[0].className += " boxshadow";
		break;
	}
}

这有点冗长，您不想为每个属性编写类似的代码。 因此，我们会将功能包装在一个模块中，该模块可检测CSS文本阴影，文本笔划，框阴影，border-radius，border-image和不透明度支持：

// CSS support detection
var Detect = (function() {

	var 
		props = "textShadow,textStroke,boxShadow,borderRadius,borderImage,opacity".split(","),
		CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
		d = document.createElement("detect"),
		test = [],
		p, pty;
	
	// test prefixed code
	function TestPrefixes(prop) {
		var
			Uprop = prop.charAt(0).toUpperCase() + prop.substr(1),
			All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' ');

		for (var n = 0, np = All.length; n < np; n++) {
			if (d.style[All[n]] === "") return true;
		}
			
        return false;
	}

	for (p in props) {
		pty = props[p];
		test[pty] = TestPrefixes(pty);
	}

	return test;

}());

如果受支持，则Detect.textShadow，Detect.textStroke，Detect.boxShadow，Detect.borderRadius，Detect.borderImage和Detect.opacity的值将返回true。 如果需要，我们可以将关联的类名称附加到html元素：

// append to HTML node
var html = document.getElementsByTagName("html")[0];
for (t in Detect) {
	if (Detect[t]) html.className += " " + t.toLowerCase();
}

或显示受支持的属性的列表：

for (t in Detect) {
	document.write(
		"CSS " + t + " support? " + 
		(Detect[t] ? "YES" : "NO") +
		"<br>"
	);
}

演示页面显示了该代码的运行情况。 您可以将其用作自己的检测库的基础-也许包括Modernizr并轻松完成它！

From: https://www.sitepoint.com/detect-css3-property-browser-support/