gradientSyntax

by desandro

HTML

<h1>gradient syntax</h1>
<h2 id="syntax-output"></h2>

CSS

body { font-family: sans-serif; }
#syntax-output { border: 1px solid blue; padding: 0.5em; }

JavaScript

gradientSyntax = (function() {
  var div = document.createElement('div');
  var prefixes = [ '', '-webkit-', '-moz-', '-o-' ];
  var syntax;
  for ( var i=0, len = prefixes.length; i < len; i++ ) {
    var prefix = prefixes[i];
    syntax = prefix + 'linear-gradient';
    div.style.cssText = 'background-image: ' + syntax + '(left top,#9f9, white);';
    if ( div.style.backgroundImage ) {
      return syntax;
    }
  }
  // test legacy WebKit syntax 
  syntax = '-webkit-gradient';
  div.style.cssText = 'background-image: ' + syntax + '(linear,left top,right bottom,from(#9f9),to(white));';
  if ( div.style.backgroundImage ) {
    return syntax;
  }
})();

window.onload = function() {
  document.getElementById('syntax-output').textContent = gradientSyntax;
};