1

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

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

但是在线性渐变的情况下我该怎么办？声明如下：

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

PS我不想使用Modernizr。我想学习如何做到这一点。

4

2 回答 2

2

我为您查找了 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 而不是自己复制和/或重写它。有时人们从第三方借东西，如果许可证允许，那很好，只需尝试将其与您的代码分开，包括许可证和版权信息。

于 2013-09-27T18:01:11.410 回答
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  
}
于 2016-01-30T07:49:30.723 回答