Why and when browsers prefix CSS3 features
Since i’ve started with my CSS3 preview pages, i’ve had the same question at least 10 times already: why do browsers prefix CSS3 features? It seems so weird, when both WebKit and Firefox have border-radius implemented, you have to write two lines for it to work in both browsers.
The reason for this lies in the way the W3C works. A CSS feature is specified at some time in a Working Draft. For instance, border-radius is specified in the backgrounds and borders module. When it is first published, this is not immediatly an official Recommendation, but just a proposal of the author(s), which will be discussed by the W3C’s CSS workgroup, and on the www-style mailinglist.
At some point, the CSS workgroup will decide it is time for a module to leave the “draft” phase, and will place a “Last Call”. When this last call get’s no substantial comments, it becomes a so called “Candidate Recommendation” (CR). To leave the CR phase, a specification has to have been a CR for at least six months, has to have two complete implementations, and a test suite to prove it has those.
With all that said, why and when do browsers prefix features? They do that until a feature becomes a CR. If they wouldn’t do that, the CSS WG could change the specification, other browsers could adopt the new version, and people would get different rendering results from the exact same feature. So effectively, a prefix says: the behavior of this element might change at any point in time, and it’s not per se a correct representation of the latest specification.
Unless I’m mistaken, the -moz-border-radius (and perhaps -webkit-border-radius) declarations do not match the border-radius CSS3 declaration; in -moz-border-radius you choose only one value, whereas the border-radius draft allows you to choose two values to have more flexibility in the curve.
For example;
-moz-border-radius: 1em;
border-radius: 1em 2em;
A good example of why some declarations are not fully implemented yet.
The funny thing is, moz invented border-radius, and the W3C added it later. Moz prefixed it, because if they didn’t the W3C couldn’t decide how the pref should work: it would have to work exactly like mozilla, or it would break existing content.
(Thanks to Ian Hickson btw, for helping me on this small post :) )
Multi-column doesn’t work only in Firefox, but all Mozilla family including Camino
Karl: thx! i’ll update the page, any other comments? :)
I still didn’t find a real time working example of css3 from a to z :(