过去功能检测非常容易。
在网络早期,浏览器嗅探是一种合理的解决方案。 开发人员将检查用户代理并运行针对应用程序的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/