Why do browsers' user agent stylesheets use -prefixed CSS properties?

Question

The other day, I was looking at how browsers (I used chrome, but I'm guessing it applies to all) format HTML elements using user agent stylesheets.

When using blockquote, I found this:

blockquote {
 -webkit-margin-before: 1em;
 -webkit-margin-after: 1em;
 -webkit-margin-start: 40px;
 -webkit-margin-end: 40px;
}

Look fine. But why couldn't they use something more like this?:

blockquote {
 margin-left:/*whatever*/;
 margin-top:/*whatever*/;
 margin-right:/*whatever*/;
 margin-bottom:/*whatever*/;
}

This just happened upon me, and I thought it was rather strange.

Answer 1

Some browsers use CSS rules like this because their specification has not yet been finalised by the W3C, and therefore if they were to leave the prefix off, they would run the risk of the eventual W3C standard format being slightly different, and creating incompatibilities between browsers or between versions of the same browser as they change the format to the standard way of doing things.

This is a particular issue for rules with multiple arguments - the main thing that can go wrong is that the standard ends up having the arguments in a different order:

border-radius: 3px 3px 6px 6px;
box-shadow: 3px 3px 6px #fff;

...etc...

Adding the prefix is their assurance that if the eventual standard turns out to be different from their implementation, nothing will break.

As for the part about margin-before instead of margin-left, that appears to be because the -webkit-margin-before rule isn't an equivalent of margin-left, but of margin:before, which is a recent proposal aimed at making things work in RTL and vertical writing modes. See this page: http://lists.w3.org/Archives/Public/www-style/2010Sep/0625.html It seems to be rather obscure though.