Why there is -moz-XXX and -webkit-XXX in the CSS3?

The thing I hate most in CSS3 is that there i开发者_C百科s always two properties you should put to do one effect. I think this is not professional, and increase the CSS size. For example, why don't they unite -webkit-border-radius and -moz-border-radius in border-radius

Imagine if we have 10 browsers, will we write 10 lines to do a rounded corner effect? Anyone can explain?

It's because they're vendor-specific. -webkit- and -moz- -prefixed properties are not standard properties. That "namespacing" allows vendors to test new cool features, and if they're great, they can be incorporated into the standards. This is what is happening with CSS3: Mozilla and the Webkit team tried cool things, and now they're going to become standard. It's just not done yet. Eventually it'll become a consistent border-radius property.

It's a clear way to indicate that something is not expected to work on all browsers. For instance, -webkit-transition-property only works on Webkit-based browsers.

Anyways, -webkit-border-radius and -moz-border-radius don't exactly work the same. It's because each vendor, even though they're doing similar things, are allowed to implement features the way they want. The standard will establish a standard way, but everyone is free to do whatever they want within their own namespace.

-webkit-border-radius and -moz-border-radius were created before the CSS3 borders standard was a complete (it is still not an approved standard - it is currently a Candidate Recommendation).

The standard calls for a border-radius only, as you can see from the specification.

They are specific to mozilla and webkit - once the standard is approved this should change to be border-radius on all supporting browsers.