javascript - 简单的 CSS 梯度检测

Question

所以我需要检测用户的浏览器是否支持 CSS 渐变，仅此而已。我会使用 Modernizr，但即使只包括梯度检测，与我自己做相比也是浪费。

据我了解，这将是解决问题的方法；

1. 创建一个不添加到 DOM 的元素
2. 将 background-image 设置为带有所有 vendor 前缀的 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 的实现完全相同，但我只是手写了各种渐变，而不是自动完成。对于如此小的特征检测，没有必要自动完成。