CSS3: remove unneeded prefixes and small fixes to gradients

[kristerkari]

Here are all changes listed:

• Removed -o-box-shadow since it has not been implemented in Opera - browser support info from caniuse.com | browser support info from MDN
• Removed -ms-linear-gradient since IE10 is using the unprefixed version - IEBlog blog post | browser support info from caniuse.com | browser support info from MDN
• Changed the unprefixed linear-gradient to the new W3C syntax by removing top (so it defaults to to bottom with the new W3C syntax) - W3C Linear Gradient Examples
• Removed % from zero values in the old -webkit-gradient syntax as it works without it (I've tested).

These changes have been tested in:

• Opera 12 Mac/Win
• Safari 4 Win, Safari 5 Win, Safari 6 Mac
• Retina iPad 5.1.1 Mobile Safari
• iPhone 3g 4.2.1 Mobile Safari (old webkit gradient syntax)
• Firefox 16 Mac (to test the unprefixed/W3C gradient syntax)

[mlettini]

If you remove the 'top' from linear-gradient, don't you need to reverse the color gradient as well? Don't have IE10 on hand to double-check.

[kristerkari]

@mlharvest Nope, you shouldn't need to reverse it if you drop top. Check the W3C example page I linked to, it has the same gradient written in different ways:

Below are various ways of specifying a basic vertical gradient:

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

[kristerkari]

Also from MDN:

/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
background: -prefix-linear-gradient(top, blue, white); 

/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
background: linear-gradient(to bottom, blue, white);

[mlettini]

Cool, +1 then. Will merge.

[kristerkari]

just FYI, I've now also tested this code with IE10 and CSS3 gradients work just fine.