所以我需要检测用户的浏览器是否支持CSS渐变,就是这样。我会使用 Modernizr,但即使只包括梯度检测,与自己做相比,这也是浪费。
据我了解,这将是如何去做的;
- 创建未添加到 DOM 中的元素
- 将
background-image
设置为linear-gradient
所有供应商前缀 - 阅读
background-image
并检查gradient
,看看它是否仍然存在
不过,我无法弄清楚Modernizr的来源,他们在这方面所做的事情的核心是什么?所以我可以自己做。http://modernizr.com/download/#-cssgradients-prefixes
只是为了添加我使用的确切代码,以供参考。在这里:
var mElem = document.createElement('modern'),
mStyle = mElem.style;
mStyle.backgroundImage = "linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-o-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-moz-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-webkit-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-ms-linear-gradient(left top, #9f9, white)";
mStyle.backgroundImage = "-webkit-gradient(linear, left top, right bottom, from(#9f9), to(white))";
if (mStyle.backgroundImage.indexOf("gradient") == -1) alert("Gradients are not available. Get a better browser and try again.");
它的工作方式与 Modernizr 的实现完全相同,但我只是手动编写了各种渐变,而不是自动完成。对于这么小的特征检测,没有必要自动完成它。
他们的测试非常基本,您可以提取它:
function supports_gradients() {
/**
* For CSS Gradients syntax, please see:
* webkit.org/blog/175/introducing-css-gradients/
* developer.mozilla.org/en/CSS/-moz-linear-gradient
* developer.mozilla.org/en/CSS/-moz-radial-gradient
* dev.w3.org/csswg/css3-images/#gradients-
*/
var str1 = 'background-image:',
str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));',
str3 = 'linear-gradient(left top,#9f9, white);';
setCss(
// legacy webkit syntax (FIXME: remove when syntax not in use anymore)
(str1 + '-webkit- '.split(' ').join(str2 + str1)
// standard syntax // trailing 'background-image:'
+ prefixes.join(str3 + str1)).slice(0, -str1.length)
);
return contains(mStyle.backgroundImage, 'gradient');
};
为此,您还必须提取contains()
并setCss()
除非您拥有这些方法的自己的版本(例如,来自jQuery)。