javascript - 检查 CSS 线性渐变支持

Question

可以通过以下代码检查对 CSS 属性(此处为 border-radius)的支持:

if(document.createElement('test').style.borderRadius===''){
//some code
}

但是如果是线性渐变，我该怎么办？ 声明如下:

background:linear-gradient(top,bottom,#123,#456);

附言我不想使用 Modernizr。我想了解如何做到这一点。

Answer 1

我为您查找了 Modernizr 的源代码。它在尝试设置渐变后对 backgroundImage 进行字符串搜索。在这里:

https://github.com/Modernizr/Modernizr/blob/dfb4cff564dabcdb65b5957b235c3fa3e5b164eb/feature-detects/css/gradients.js

    var str1 = 'background-image:';
    var str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));';
    var str3 = 'linear-gradient(left top,#9f9, white);';

    var css =
      // 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);

    var elem = createElement('div');
    var style = elem.style;
    style.cssText = css;

    // IE6 returns undefined so cast to string
    return ('' + style.backgroundImage).indexOf('gradient') > -1;

您可能应该只使用 Modernizr，而不是自己复制或重写它。有时人们会从第三方借用东西，如果许可证允许的话那也没关系，只是尽量将其与您的代码分开，包括许可证和版权信息。