The W3C standardizes web technologies through a consensus-based process. To allow for innovation before standards are finalized, each browser implements experimental CSS properties with a unique prefix like "-moz-" or "-webkit-". For example, gradients were initially specified differently across browsers until the W3C standardized the "linear-gradient" syntax. Vendor prefixes allow browsers to experiment while the W3C works to define final standards agreed upon by all parties.
1. Controversial : CSS Vendor Prefix
The World Wide Web Consortium (W3C) was formed to synthesize and standardize web
technologies for various series of specifications that were widely supported by the web
development industry.
W3C is an independent standards body, which evaluate different proposals, create forums for
discussions between industries, Professionals, developers; negotiate and settle disagreements; and
find out final specifications that everyone can agree to follow.
The CSSWG extended CSS to provide greater control over more aspects of web page content. At the
same time, browser developers continued to innovate new technology.
This led to a problem: developers wanted their browsers to support these cool technologies today,
without having to wait for W3C recommendation, and final approval.
To allow CSS3 innovation by browser developers, the web development community agreed that
each browser would have its own unique prefix for proposed or experimental CSS properties.
Prefix Browser
-moz- Firefox
-o- Opera
-webkit- Safari/Chrome/Konqueror
-ms- Internet Explorer 9+
Every browser intended to support an experimental CSS property can do so by placing its own
vendor prefix in front of it. Note that these properties are nonstandard until they achieve final
approval by the W3C. Until that time, they are open to modification and interpretation both by
vendors and the W3C itself. Both the property name and the way its value is specified may change
rapidly, even in the same browser, as different approaches are considered and standards worked
out.
For example, up until the release of Safari 5.1/iOS 5.0, the Webkit development team proposed the
following as the way to do linear gradients in CSS:
body {
background-image: -o-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -moz-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -webkit-linear-gradient(bottom, rgb(167,9,246) 11%,
rgb(194,242,242) 56%);
background-image: -ms-linear-gradient(bottom, rgb(167,9,246) 11%, rgb(194,242,242) 56
%);
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0.11, rgb(167,9,246)),
color-stop(0.56, rgb(194,242,242)) );
background-image: linear-gradient(to top, rgb(167,9,246) 11%, rgb(194,242,242)
56%);
}
2. These two approaches produced the same result in each browser; under contention was which was
the
better way to code. In the case of gradients, the W3C took a third way, more closely related to the
Firefox method:
Table 1-1. Unique Browser Prefixes
Safari/Chrome/Konqueror
Internet Explorer 9+