Search code examples
webkitcssmozillaw3cw3c-validation

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

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?

Solution

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