CSS Future Proof Linear Gradient

Question

I've got the following piece of code online:

  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

Which works fine.

Now I'm no CSS-expert but I notice that all of those are prefixed. Is it wise to add a prefix-less version as well? What would it be?

Answer 1

Is it wise to add a prefix-less version as well?

Yes, you should always provide the un-prefixed version of any prefixed CSS code you use.

What would it be?

In the case of gradients, the version you have is the same as the standard; just drop the prefix.

But note that there was also an earlier variant of the webkit syntax for gradients, which you may also want to specify if you want to support older webkit browsers.

You should also include a plain colour background as a fallback for unsupported browsers.

If you're in any doubt about these things, consult sites like CanIUse or MDN.

If you want to get really cross-browser compatible, you may also note the IE9 and earlier do not support CSS gradients at all (with or without prefix). The plain colour fallback will work, but if you want a gradient there are alternative solutions (my preferred option is generally CSS3Pie, but there are pure CSS options if you prefer; they're not nice though).