Maybe it's an obvious answer, but
Why on earth would browsers decide to create their own vendor prefixes for border-radius
and the like?
I mean: Why do I have to type:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Is it because each platform thought "We're cool, we'll come up with a better way to do rounded corners?" It seems totally and inexplicably redundant to type three lines for one.
UPDATE AS OF YEAR 2016
As this post old, it's important to mention that now most vendors do understand that these prefix are just creating un-necessary duplicate code and the situation where you need to specify 3 different css rules to get one effect working in all browser is an unwanted one.
As mentioned in this glossary about Mozilla's view on
Vendor Prefix
onMay 3, 2016
,For example, just a few years ago, to set a rounded corner on a box you had to write:
But now that browsers have come to fully support this feature, you really only need the standardized version:
It's because the features were implemented by vendors before the specification reached its final release stage.
The vendor prefixes ensure that there are no clashes with changing functionality etc.
Source.