CODEWITHSUNDEEP
csscss-transitionsvendor-prefix
RubenGeert
RubenGeert

Reputation: 2952

Is there any point in using vendor specific prefixes other than "-webkit-" for "transition"?

In the course I'm taking, I found the following (excerpt):

p.box{
-webkit-transition: border-radius 1s;
-moz-transition: border-radius 1s;
-o-transition: border-radius 1s;
-ms-transition: border-radius 1s;
transition: border-radius 1s;
}

p.rounded{
border-radius:50px;
}

However, according to this table, there seems to be no point in using other browser specific prefixes than -webkit-. The newer versions of IE, FireFox and Opera always support this property and the older versions never do. So it seems to me that the lines starting with -moz-, -o- and -ms- will in no case whatsoever affect page display. Can I -from now on- always leave these out in the case of transition? Or am I misunderstanding something? Or is the table incorrect?

Upvotes: 3

Views: 570

Answers (1)

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

Firefox until v15 requires the -moz prefix and Opera the -o until v12 (the -ms prefix is, in this instance, pointless)*. So, you're correct in saying that you could remove those prefixes and not see any difference in the latest versions of all browsers. However, you might find that those slightly older versions still make up a significant number of visitors to any particular site.

I'd recommend including the prefixes until the versions of browsers that require them are well and truly in the past. That way, you know that they will only account for a tiny minority of your visitors. As an example, it's no longer worth including the prefixes for border-radius: Firefox supports the non-prefixed version all the way back to v3.6, and Chrome from v4.

You could use something like Compass or Prefix free (if either fits into your workflow) to take care of this for you.

Edit - I don't personally make use of Prefix-free, as I share the OP's hesitance at creating styling with JavaScript where it's not strictly necessary. If SASS/Compass isn't an option, I recommend the Prefixr plugin for Sublime Text. That way, you only have to worry about writing the non-prefixed version by hand, but you're still sending a fully prefixed-up version in your stylesheet.

* These stats come from CanIUse..., you just need to click the link at the top left of the compatibility table that says 'Show all versions' to see information about all browsers.

Upvotes: 2

Related Questions