Javascript 简单CSS梯度检测

所以我需要检测用户的浏览器是否支持CSS渐变，就是这样。我会使用Modernizer，但即使只包含梯度检测，也比我自己做要浪费

据我所知，这将是如何进行的

创建未添加到DOM的元素

将

背景图像

设置为带有所有供应商前缀的

线性渐变

读取

背景图像

并检查

梯度

，查看它是否仍然存在

---

但我不知道Modernizer的来源，他们在这方面做的核心是什么？所以我可以自己做

他们的测试非常基本，您可以将其提取出来：

    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）。

只需添加我使用的确切代码，以供参考。这是：

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.");

---

它的工作原理与Modernizer的实现完全相同，但我只是手工写出了各种渐变，而不是自动完成。对于如此小的功能检测，不需要自动完成。

谢谢！尽管如此，我仍然不明白setCss函数中发生了什么。为什么在

-webkit-

上使用

.split（“”）

？构建以下

背景图像是一种奇怪的方式：-webkit渐变（线性，左上，右下，从（#9f9）到（白色））；背景图片：

+前缀.连接（str3+str1））.slice（0，-str1.length）+1。。。编写重复代码的一种更优雅的方式：

[“”、“-o-”、“-moz-”、“-webkit-”、“-ms-”].forEach（function（el，i）{mStyle.backgroundImage=el+“线性渐变（top，#9f9，white）”}）mStyle.backgroundImage=“-webkit渐变（linear，top，bottom，from（#9f9），to（white））