CODEWITHSUNDEEP
css
Buksy
Buksy

Reputation: 12228

Why does css commands differ in browsers

I have been checking css3 commands recently. Why are some of them different in every browser?

For example, take a look at this 2D transform example

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

Why do they make them different if all of them are accepting same arguments? Are they in some kind of beta stage? Will they ever be same (after beta stage)?

It is pretty unpractical if you consider this animation example

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

Upvotes: 1

Views: 99

Answers (2)

andyb
andyb

Reputation: 43823

To answer the question - yes they are usually denoting a beta implementation. Once a specific property has been standardised and the browser vendor adds ant unprefixed version they usually keep the prefixed version as an alias and deprecate it at a later date. Also, yes, once standardised, the behaviour should be the same (unless there's an unexpected bug!)

CSS vendor-specific extensions are part of the specification. Browser vendors use them to add non-ratified or non-standardised CSS features to their browsers. The understanding is that the functionality may well be different in each browser and that it might not be the final functionality when the unprefixed rule is standardised.

CSS vendor prefixes are not well liked although there are some useful approaches to handling them in a cleaner way, avoiding the issue you highlighted.

Upvotes: 1

Sirko
Sirko

Reputation: 74046

As a matter of fact, they do not always accept the same parameters or behave in the same way.

That is, why they are prefixed until there is some kind of standard or common understanding how this property should behave and how its syntax should look like.

Some of those properties are just plain out experimental. A browser vendor has a cool new idea and adds it to its browser. After a while other browser vendors might pick it up and still some time later, there will be a standard for this feature.

Most of time after some browser versions these prefixes get dropped, so you can use the standard ones. See for example border-radius: At the start there was a prefix -moz- and -webkit-, but after the property definition stabilized, the prefixes got dropped and now you can just use the unprefixed version.

Upvotes: 1

Related Questions