modernizr
在本教程中，我将介绍两种方法来检测浏览器是否支持某些CSS功能。 第一个利用了流行JavaScript库Modernizr的优势，第二个利用了有前途CSS解决方案的功能查询 。
所以，让我们开始吧！
使用Modernizr检测特征
如上所述，Modernizr是一个轻量级JavaScript库，可检测浏览器中HTML5和CSS3功能。 只要页面加载，它就会在后台运行并执行功能测试。 然后，它将结果存储为JavaScript对象的属性和html元素的类。 以后再说。
要安装和使用Modernizr，您可以访问其网站并下载首选版本。
注意 ：在撰写本文时，Modernizr的当前版本为2.8.3，尽管版本3已准备就绪。 实际上，图书馆背后的团队希望在未来几周内将其推出。 可以在这里找到此新版本的简要概述。 此外，您可以通过访问此链接来获取beta版本。
下载后，将JavaScript文件放在您的项目中，并将其包含在html页面的<head>中。 最后但并非最不重要的一点是，为了启用Modernizr的功能，您应该将no-js类添加到html元素中。
在接下来的两节中，我将介绍Modernizr的基础知识。 有关更高级的概念，请确保阅读文档 。
CSS检测
如上所述，Modernizr向html元素添加了许多类。 类名称取决于浏览器支持。 如果浏览器无法识别某些功能测试，则Modernizr会在其内置类名称之前添加no-前缀。 例如，假设我们正在测试反射效果，则Chrome 40上的html元素如下所示：
在Firefox 35上：
还要注意js类。 当Modernizr运行时，假设在我们的浏览器中启用了JavaScript，它将用新的no-js类替换旧的no-js类。
根据从Modernizr的测试中获得的结果，我们可以自定义样式表。
例子
首先，这是本教程其余部分将使用的基本HTML代码：
<h2 id="reflection">CSS Reflections</h2> 使用Modernizr给我们的类，我们修改h2元素的样式，如下所示：
h2 {
color: #c0ccdb;
font-size: 3em;
}
.cssreflections h2 {
-webkit-box-reflect: below -.45em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(255, 255, 255, 0.75)));
}
.no-cssreflections h2 {
text-shadow: 0 1px 0 #136ed1,
0 2px 0 #126ac9,
0 3px 0 #1160b6,
0 4px 0 #105cad,
0 5px 0 #0f56a2,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
} 支持反射的基于Webkit的浏览器将显示h2元素，如下所示：
根据Mark Otto的3D文字效果，其余的（至少那些支持text-shadow属性的元素）将应用不同的效果：
这是Codepen上的示例：
JavaScript检测
检查由Modernizr的测试得出的结果的第二种方法是通过JavaScript。 如前所述，Modernizr使用配置为测试的功能的属性名称创建一个对象。 大多数情况下，它们的值返回true或false 。
下面的屏幕截图显示了Firefox 35如何显示Modernizr对象（“控制台”选项卡）：
如我们所见， Modernzir.cssreflections属性返回false值。 发生这种情况是因为Chrome，Safari和Opera是仅有的支持反射（在撰写本文时）的浏览器。
通过手动将reflection和no-reflection类添加到我们的<h2 id="reflection"> ，这是我们如何使用JavaScript复制前一个示例的方法：
var element = document.getElementById('reflection');
if (Modernizr.cssreflections) {
element.className = 'reflection';
} else {
element.className = 'no-reflection';
}然后使用相关CSS样式：
.reflection {
/* apply reflection property */
}
.no-reflection {
/* apply text-shadow property */
}以及Codepen上的新演示：
使用特征查询检测特征
毫无疑问，Modernizr是每个前端开发人员手中的宝贵工具。 但是，如果我们可以用纯CSS复制Modernizr的测试会更好吗？ 幸运的是，我们可以使用功能查询来做到这一点。 这些是条件规则，可让我们根据浏览器的支持来应用不同的样式。 它们的工作就像媒体查询一样。 是的，除了CSS版本外，它们还加入了JavaScript。
准备看一下吗？
CSS检测
要在CSS中定义功能查询，我们必须使用@supports和@supports not规则。 它们的语法如下：
@supports(test condition) {
/* apply rules */
}
@supports not(test condition) {
/* apply rules */
} 条件包括属性：我们要测试的要素的值对。 支持这些功能的浏览器将应用目标规则，这些目标规则是我们在@supports规则中指定的。 否则，将执行@supports not规则中的样式。
使用AND和/或OR逻辑运算符，我们可以创建复杂的测试。 但是，请记住，这些运算符应该用括号分隔。
让我们看两个例子。 众所周知，HTML非常简单！ 这只是一个h2元素。
在第一个示例中，我们使用background-color属性指定body元素的背景颜色。 为了使事情变得更有趣，我们还创建了一个CSS变量 。 浏览器支持分为以下几类：
- 支持功能查询和CSS变量的浏览器（当前仅Firefox 31+）。
- 支持功能查询，但不支持CSS变量的浏览器。
- 不支持功能查询或CSS变量的浏览器。
根据这些情况， body元素将显示不同的background-color 。
这是基于上述假设CSS代码：
body {
--bg-color: #98FB98;
background-color: khaki;
}
@supports (background-color: var(--bg-color)) {
body {
background-color: var(--bg-color);
}
}
@supports not(background-color: var(--bg-color)) {
body {
background-color: tomato;
}
} 例如，在属于第三类的Safari上，我们的元素如下所示：
然后，可以解释功能查询但不支持CSS变量的Chrome属于第二类：
最后是Firefox，它属于第一类：
以及Codepen上的嵌入式示例：
另一个例子
在这种情况下，我们将扩展测试条件以包含第二条规则。 更具体地说，现在我们的目标是不仅支持反射而且还支持笔触效果的浏览器。
这是该行为的代码：
@supports ((/* reflections condition */) and (-webkit-text-stroke: 1px tomato)) {
h2 {
/* apply reflection property */
-webkit-text-stroke: 1px tomato;
}
}
@supports not ((/* reflections condition */) and (/*stroke condition*/))
{
h2 {
/* apply text-shadow property */
}
} 例如，支持功能查询，反射和笔触效果的浏览器（在撰写本文时仅适用于Chrome 28+）将显示h2元素，如下所示：
以下是Codepen上的嵌入式示例：
JavaScript检测
功能查询也可以通过JavaScript定义。 为此，我们必须使用CSS.supports方法。 以下是其可能的参数：
CSS.supports(propertyName, propertyValue)
CSS.supports(test condition) 此方法的结果是一个Boolean值，指示浏览器是否支持这些功能。 最后，我们应该将参数用单引号或双引号引起来。
使用JavaScript版本的功能查询，我们的最后一个示例可以复制如下：
var result = CSS.supports('(/*reflections condition*/) and (/*stroke condition*/)');
var element = document.getElementById('reflection');
if(result) {
element.className = 'reflection';
} else {
element.className = 'no-reflection';
}相应的演示：
浏览器支持
一般而言，浏览器对功能查询的支持很好。 撰写本文时，Firefox（22 +），Chrome（28+）和Opera（12.1+）均支持此CSS功能。 希望即将发布的IE版本也能理解条件规则（ 他们正在努力！ ）。
填充胶
如果您想在项目中使用功能查询，但对了解功能查询的浏览器有些怀疑，您会在下面找到一些有用的polyfill：
结论
在本教程中，我介绍了两种有用的方法，可用来提供可靠的跨浏览器体验。 利用Modernizr和/或功能查询将帮助您了解针对功能而非浏览器进行设计的好处。 Modernizr是当前稳定的解决方案，但功能查询即将到来，因此选择权在您手中！
modernizr