Asked  7 Months ago    Answers:  5   Viewed   25 times

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.

 Answers

92

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.

Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations.

Let’s say a W3C working group is discussing a grid declaration (which, incidentally, wouldn’t be such a bad idea). Let’s furthermore say that some people create a draft specification, but others disagree with some of the details. As we know, this process may take ages.

Let’s furthermore say that Microsoft as an experiment decides to implement the proposed grid. At this point in time, Microsoft cannot be certain that the specification will not change. Therefore, instead of adding grid to its CSS, it adds -ms-grid.

The vendor prefix kind of says “this is the Microsoft interpretation of an ongoing proposal.” Thus, if the final definition of grid is different, Microsoft can add a new CSS property grid without breaking pages that depend on -ms-grid

Source.

Tuesday, June 1, 2021
 
RahulG
answered 7 Months ago
50

Safari has some trouble sometimes with all-property transitions.

Try this:

#logo {
    -webkit-transition: color .4s;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

Edit: After playing around with it some more, it's actually the combination of your usage of -webkit-transition: all and -webkit-calc() that's causing the problem. This is a bug in Safari, and in order to overcome it, you may need to use javascript to calculate your top margin instead of CSS.

Hope this helps!

Wednesday, August 4, 2021
 
Uours
answered 4 Months ago
11

CSS3 has not been formally adopted as a complete standard yet—it is still a draft proposal.

Vendor specific tags allow the vendors to begin to implement CSS3 draft standards or proposed ideas for CSS3 now using experimental implementations, while ensuring that their current rendering with these proprietary tags can be distinguished in the future from their rendering of the actual CSS3 tag as per the final spec, even if that is different.

Monday, August 23, 2021
 
hakre
answered 4 Months ago
10

As of IE8, IE doesn't support the CSS3 border-radius property. Not sure what you saw that said it did. You can use images, javascript, or many other tricks to round corners in IE.

Monday, August 23, 2021
 
altexpape
answered 4 Months ago
62

You can build a filtered list on this web page and show all of the required prefixes.

http://caniuse.com/#comparison

Wednesday, October 13, 2021
 
Rudie
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share