Checking CSS Linear gradient support

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);

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

Can't you degrade it gracefully so you don't need to check for it? — Huangism
– Huangism, Commented Sep 27, 2013 at 17:54

Bjorn · Accepted Answer · 2013-09-27 18:01:11Z

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.

the code: test=document.createElement('test'); test.style.cssText='background:-webkit-linear-gradient(to top,#123,#456);background:-moz-linear-gradient(to top,#123,#456);background:-o-linear-gradient(to top,#123,#456);background:-ms-linear-gradient(to top,#123,#456);background:linear-gradient(to top,#123,#456)'; if(!(test.style.cssText.indexOf('gradient')>-1)) //the code to change styles or whatever worked fine for me. :)

thdoan · Accepted Answer · 2016-08-11 09:45:19Z

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  
}

Collectives™ on Stack Overflow

Checking CSS Linear gradient support

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related