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

Question

The thing I hate most in CSS3 is that there is 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?

Answer 1

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.