简单的CSS梯度检测

Question

所以我需要检测用户的浏览器是否支持CSS渐变,就是这样.我会使用Modernizr,但即使只包括渐变检测,与我自己做的相比也会浪费.

据我了解,这将是如何去做的;

1. 创建未添加到DOM的元素
2. 设置background-image为linear-gradient包含所有供应商前缀
3. 阅读background-image和检查gradient,看它是否还在那里

我无法弄清楚Modernizr的来源,他们在这方面做的核心是什么？所以我可以自己做.http://modernizr.com/download/#-cssgradients-prefixes

Answer 1

只是添加我使用的确切代码,以供参考.这里是:

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的实现完全相同,但我只是手工编写了各种渐变,而不是自动完成.对于如此小的特征检测,没有必要自动完成.