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?

Only

Answer 1

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.

Redolent

hmm. I'm not sure I follow the reasoning here. Let's assume that border-radius standard changes. And firefox creates it with the extension. Wouldn't that break the sites that have both the border-radius and the -moz-border-radius anyway? Or will they make the -moz-border-radius with the old implementation "override" the standard? – Only

Typically the ‘old’, prefixed version is kept as an alias for a while. eg. if you set -moz-opacity it will set the opacity style, and vice-versa. Where there are syntax differences it'll convert between the formats. The syntax of -moz-border-radius is currently quite different from the syntax of -webkit-border-radius as they both implemented the feature separately; only the simple case is the same on both. This would have caused incompability problems if they had not used prefixed property names. – Aphesis

Answer 2

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.

Guaranty

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.

Benzyl

Answer 4

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.

Lyris