What y'all think about this "-moz-linear-gradient" biz? - html

Question

So I snatched a bit of CSS for my page style, does it's thing and gives me a nice old rainbow gradient background.
background-color:#ff0000;
background-image: -moz-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: -webkit-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: -o-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: -ms-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%)
What I'm struggling with though is how is this -moz and -webkit etc that prefix the linear gradient field. Must it be this way? Is there no thing where you can set it so it speaks to every browser? Ya feel me?

Answer 1

You could use a CSS preprocessor to cut down your workload such as:
http://compass-style.org/examples/compass/css3/gradient/
#include background-image(linear-gradient(red, blue));
The W3C recommends vendor prefixes until a feature has been implemented to a recommend spec.
http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
Other than that, no there is no way to avoid vendor prefixes.
Some interesting reading: CSS vendor prefixes considered harmful
Originally, the point of vendor prefixes was to allow browser makers
to start supporting experimental CSS declarations.
Let’s say a W3C working group is discussing a grid declaration (which,
incidentally, wouldn’t be such a bad idea). Let’s furthermore say that
some people create a draft specification, but others disagree with
some of the details. As we know, this process may take ages.
Let’s furthermore say that Microsoft as an experiment decides to
implement the proposed grid. At this point in time, Microsoft cannot
be certain that the specification will not change. Therefore, instead
of adding grid to its CSS, it adds -ms-grid.
The vendor prefix kind of says “this is the Microsoft interpretation
of an ongoing proposal.” Thus, if the final definition of grid is
different, Microsoft can add a new CSS property grid without breaking
pages that depend on -ms-grid

Answer 2

The browser prefixes are required until they become part of the spec. For example, we used to have to do webkit-border-radius and now simply border-radius works. They will be phased out as support increases, but they're good to use to make your users happy.