检查CSS线性渐变支持

Question

Support for CSS properties(border-radius here) can be checked by this code:

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

but what do I do in case of linear gradients? The declaration being like:

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

PS I don't want to use Modernizr. I want to learn how-to do this.

Answer 1

I looked up Modernizr's source code for you. It does a string search on backgroundImage after trying to set a gradient. Here it is:

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;

You should probably just use Modernizr than copy and or rewrite this yourself. Sometimes people borrow things from third parties, and that's fine if the license allows it, just try to keep it separated from your code, include the license and copyright information.

Answer 2

You can definitely roll your own poor man's Modernizr. However, if you do go this route I recommend encapsulating all the checks in a browser validation object for ease-of-use. Here's what I do:

// 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;
}

Now you can check whether the browser supports CSS3 gradients with this:

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

Similarly, to check whether the browser supports SVG:

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