3

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

据我了解，这将是如何去做；

  1. 创建未添加到 DOM 的元素
  2. 使用所有供应商前缀设置background-image为linear-gradient
  3. 阅读background-image并检查gradient，看看它是否仍然存在

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

4

2 回答 2

10

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

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 的实现完全相同，但我只是手动写出了各种渐变，而不是自动完成。对于这么小的特征检测，没有必要自动完成。

于 2012-06-02T00:40:47.433 回答
4

他们的测试非常基础，您可以提取它：

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

于 2012-06-01T15:57:35.707 回答