Why do mozilla and webkit prepend -moz- and -webkit- to CSS3 rules?

Question

CSS3 rules bring lots of interesting features.

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

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

I should get a 5px border radius.

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).

In order to satisfy as many browsers as possible, you end up with this:

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

I can see two obvious disadvantages:

• 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 don't see any obvious advantages.

I believe that the people behind mozilla and webkit are more intelligent than myself. There must be some good reasons to have things structured this way. It's just that I can't see them.

So, I must ask you people: why is this?

Answer 1

They do this because its not fully supported. It much like having that code in beta. Eventually they will add support for border-radius.

It more obvious when you look at the 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));

Notice they don't use the same syntax. When they finally agree on a standard then both with add support for linear-gradient and use the correct syntax.

Answer 2

The -moz-border-radius describes Mozilla's semantics. If CSS3 gets published with different semantics, then Mozilla can always implement border-radius using those semantics and they won't break anyone's website.

Meanwhile, if they just used border-radius directly, then if CSS3 gets published with different semantics, Mozilla has to choose between breaking people's sites, or forever supporting nonstandard CSS.

Answer 3

Simple. The proprietary variants -moz and -webkit were there before the border-radius became written into the CSS3 recommendation. They had their own implementations but didn't know whether these would match W3C's final recommendation. Thus, they didn't use the now-official name at that point, either, so as not to break things later on.

Answer 4

I have a style for my site that makes use of this moz and webkit styles but does not work. Am I required to download anything for my browser to work as expected

Answer 5

Note that as of 2010-09-14, the -moz prefix has been removed from border-radius. This means that Firefox 4 will support border-radius with no prefix.