What is the purpose of CSS prefixes?

Question

I know that if we want to make sure some CSS3 features work everywhere we need to use the prefixed versions of the W3C recommended one like:

transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;

I know that the prefixes are used for experimental features, but why are they necessary? Why don't they test them on the original W3C one? Does every CSS3 feature has or had a prefix for every browser or they just create a prefixed version if they think they should?

Answer 1

People who use experimental functions already know that a standard, cross browser behaviour should not be expected at all.

In my opinion there is no need to prefix new features. It makes it harder to use them as you have to write the standard property, chrome's prefixed property, firefox, opera... it also makes stylesheets bigger (who is going to delete all those prefixed properties in the future, when they are not needed anymore?).

I don't see any advantages, but it is just my opinion.

Answer 2

The original purpose of vendor prefixes was to give vendors the ability to add their own non-standard features for use in their CSS implementations. However, most of them are used for experimental versions of things that eventually become standards.

If an experimental property is unprefixed, it implies that it's the correct, standard version of a property. If every browser renders it differently, then there isn't much of a standard. Instead, a browser avoids implementing an unprefixed property until it's sure that it's done so according to the standard, then it starts supporting the unprefixed property as a way of saying it supports this particular standard correctly.

Not every feature has a prefix; indeed, a vendor creates a prefix only if it deems it necessary.

Answer 3

Ya.. may be in future we will not have to use these prefixes for different browser but now every browser have there different css libraries so as a front end developer We have to use these prefixes in our css other wise some browsers will not render our css. This is how they work and we have follow them.

Here is the liks of Webkit and Firefox prefix libraries

http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions