Question

此代码可以检查对CSS属性的支持（此处为border-radius）：

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

但在线性渐变的情况下我该怎么办？宣言如下：

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

P.S。我不想使用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而不是复制或自行重写。有时候人们从第三方那里借东西，如果许可证允许，那就没关系，只是试着把它与你的代码分开，包括许可证和版权信息。

Answer 2

你绝对可以推出自己的穷人的Modernizr。但是，如果你这样做，我建议将所有检查封装在浏览器验证对象中，以便于使用。这是我的所作所为：

// Check browser capabilities
var browser = {
    '3d': testCss('perspective', 'Perspective'),
    'addEventListener': !!window.addEventListener,
    'animations': testCss('animationName', 'AnimationName'),
    'canvas': !!window.CanvasRenderingContext2D,
    'gradients': testCss('backgroundImage', '', 'background-image:linear-gradient(black,white),radial-gradient(black,white)'),
    'svg': !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect),
    'touch': !!('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch) || navigator.msMaxTouchPoints),
    'transitions': testCss('transitionProperty', 'Transition'),
    'vw': testCss('width', '', 'width:100vw')
  };

function testCss(sPropStandard, sPropPrefixed, sCss) {
  var isSupported = false;
  if (sCss===undefined) {
    // Check property support
    var aProps = [
        sPropStandard,
        'Webkit' + sPropPrefixed,
        'Moz' + sPropPrefixed,
        'ms' + sPropPrefixed,
        'O' + sPropPrefixed
      ];
    for (var i=0; i<aProps.length; ++i) {
      if (aProps[i] in document.documentElement.style) {
        isSupported = true;
        break;
      }
    }
  } else {
    // Check value support
    var el = document.createElement('temp');
    el.style.cssText = sCss;
    isSupported = el.style[sPropStandard]!=='';
    delete el;
  }
  return isSupported;
}

现在您可以检查浏览器是否支持CSS3渐变：

if (browser.gradients) {
  // Do something with gradients here  
}

同样，要检查浏览器是否支持SVG：

if (browser.svg) {
  // Do something with SVGs here  
}

检查CSS线性渐变支持

2 个答案: