Why are mozilla and webkit preend -moz- and -webkit- CSS3 rules?

Question

CSS3 rules contain many interesting features.

Take border-radius , for example. The standard says that if you write this rule:

div.rounded-corners { border-radius: 5px; } 

I have to get a border radius of 5px.

But neither mozilla nor webkit implement this. However, they implement the same thing, with the same parameters, with a different name ( -moz-border-radius and -webkit-border-radius , respectively).

To satisfy as many browsers as possible, you will get the following:

 div.rounded-corners { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } 

I see two obvious flaws:

• Copy-paste code. This has obvious risks that I will not discuss here.
• The W3C CSS validator will not validate these rules.

At the same time, I do not see any obvious advantages.

I believe that the people behind mozilla and webkit are smarter than me. There must be some good reason for things to be structured this way. I just do not see them.

So, I have to ask you: why is this?

Answer 1

-moz-border-radius describes the semantics of Mozilla. If CSS3 is published with different semantics, then Mozilla can always use border-radius using this semantics, and they won't break any website.

Meanwhile, if they just used border-radius directly, then if CSS3 is published with different semantics, Mozilla must choose between breaking user sites or permanently supporting non-standard CSS.

Answer 2

They do this because they are not fully supported. This is very similar to having this code in beta. In the end, they will add border radius support.

This is more obvious when you look at linear gradients.

 background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 

Note that they do not use the same syntax. When they finally agree to the standard, then with support for linear gradient support, and using the correct syntax.

Answer 3

Simple The patented variants -moz and -webkit were there before border-radius was written into the CSS3 recommendation. They had their own implementations, but they did not know whether they would comply with the final recommendation of the W3C. Thus, they did not use the official name now at this moment, so as not to interrupt things later.

Answer 4

Note that from 2010-09-14 , the -moz prefix has been removed from the boundary radius. This means that Firefox 4 will support the border radius without a prefix.