8

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
totymedli
  • 29,531
  • 22
  • 131
  • 165
  • A good example of "why not just follow the standard" is the Flexbox module. The specification has been in works since for years, and the first draft that was implemented in any browser was from 2009. Since then, the draft has been completely rewritten. Property names have changed as well as the values some properties take. It wasn't until Sept 2012 that the specification became a *candidate recommendation*. – cimmanon Feb 11 '13 at 13:21

3 Answers3

7

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    In addition, vendors are *supposed* to drop the prefix when the standard has stabilized (Candidate Recommendation). Webkit based browsers are the only ones stubbornly refusing to drop prefixes on many newer properties (see: http://caniuse.com/#search=gradient). – cimmanon Feb 11 '13 at 13:25
  • @cimmanon: Quit giving me more reasons to hate WebKit! – BoltClock Feb 11 '13 at 19:55
  • 1
    What's that? You want *more* reasons? Ok, here you go! http://css-tricks.com/tldr-on-vendor-prefix-drama/ – cimmanon Feb 11 '13 at 20:15
  • @cimmanon: I've heard of that. Did Mozilla and Opera ever get around to it? – BoltClock Feb 11 '13 at 20:22
  • Not sure on Mozilla, but Opera has. I first noticed them on older flexbox demos that *shouldn't* work because Opera waited to implement it until after it left the draft stage. – cimmanon Feb 11 '13 at 21:06
  • @cimmanon: Well... looks like Opera's completely ditching Presto and switching to WebKit. http://www.opera.com/press/releases/2013/02/13 – BoltClock Feb 13 '13 at 12:06
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.

Salvatorelab
  • 11,614
  • 6
  • 53
  • 80
1

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

Deep
  • 17
  • 3