17

I have a question regarding the CSS vendor prefixes for transition.

This source states that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)".

That page only shows the -webkit- and -moz- prefixes and claims that IE 10+, FF 16+ and Opera 12.1+ can read the prefix free version.

In the code of Twitter Bootstrap, there is always exists a -webkit-, -moz- and -o- prefixed version in addition to the un-prefixed version.

What prefixes should I use?

Sven
  • 12,997
  • 27
  • 90
  • 148

6 Answers6

30

http://caniuse.com/#search=transition says that you need -webkit- and plain property for modern browsers.

-webkit-transition: all .5s ease;
transition: all .5s ease;

But it will be no problem if you add all of them, just be sure that property without prefix is the last one.

Edit: as said in comment below, if you click on "All versions" you can see when each browser dropped prefix. For now it is better to use -moz- and -o- also.

Edit May 2015: I highly recommend use Autoprefixer as step on your build process (like Gulp/Grunt task) or as plugin to your code editor. It provides automatic prefixing on caniuse.com browser support stats.

Edit 2019: No need in prefixes and less and less need in Autoprefixer, future is nice :)

antejan
  • 2,594
  • 12
  • 15
  • 6
    +1 for the caniuse reference. However, if you click "Show All Versions" to see all versions, you'll see that just a few versions ago, Firefox and Opera were prefixed. Sine these aren't that old, you should include `-moz-` and `-o-` as well. Since IE never supported a prefixed version, you don't need `-ms-`. – OverZealous Jan 15 '13 at 00:18
  • Got my vote after the "Show all versions" edit. I'm going with that for my projects as well. – Marcelo De Polli Jan 15 '13 at 00:23
19

Edit: You shouldn't need any prefixes anymore.

Just use transition.

As of now, all vendor prefixes should be used for CSS3 transitions. For example,

-webkit-transition: all 500ms;
   -moz-transition: all 500ms;
     -o-transition: all 500ms;
        transition: all 500ms;
Community
  • 1
  • 1
Mooseman
  • 18,763
  • 14
  • 70
  • 93
  • @ClaudiuCreanga At the time of writing there was a beta version of IE to which this applied. No mainstream release of IE relies on the `ms` prefix though. Removed. – Mooseman Jun 15 '17 at 18:01
1

It depends on which CSS property you want to use. Mozilla is doing a good job at getting rid of prefixes for many properties. But you can not tell all properties are now prefix free. I hear news from Chrome team that they want to make gradients prefix-free. I don't know about Opera but Internet Explorer 10 requires -ms prefix for many CSS3 properties.

I would say for today you should just add prefixes. But future will not be like this!

Mohsen
  • 64,437
  • 34
  • 159
  • 186
0

Do yourself a favor and download Prefix Free. It's a minuscule JavaScript which lets you user pretty much any prefix-requiring property, without a prefix (including transitions, animations, and media queries).

EDIT: The only exception to all of this is media queries for Opera, where the pixel ratio (and nothing else) has to be expressed as a fraction rather than decimal.

Jules
  • 14,200
  • 13
  • 56
  • 101
0

-webkit- only, along with unprefixed version, of course.

All other browsers either moved with prefix-free properties (like Firefox or Opera), or never used them (like IE)

I recommend checking CanIUse.com regularly for the most up-to-date information.

http://caniuse.com/#feat=css-transitions

Evgeny
  • 6,261
  • 8
  • 35
  • 43
0

I'll go against the grain here and suggest a different approach: if you've got a website set up with analytics, check the browser stats and versions and see what your users are actually using.

Sure, you can drop the majority of prefixes, but if your users are on outdated browsers (for whatever reason), they won't get the features.

No arbitrary website can tell you the exact prefixes you need, only you can figure out that information from your own data.

If you don't have the data, add all the prefixes to support as many people as possible. Then check the data in a few months and refactor if you need to.

Christian
  • 19,605
  • 3
  • 54
  • 70
  • Stats can lie. You might just have a chicken vs egg scenario: Browser X doesn't use my site, so I won't bother supporting it in the redesign. The reason people who use Browser X don't use the site is because the current design doesn't support Browser X. – cimmanon Jan 15 '13 at 00:47
  • @cimmanon Perhaps I didn't make my last statement clear enough; I mentioned supporting *everyone* to start off with, then monitoring browser stats and dropping unnecessary prefixes after. Also, I doubt anyone would stop using a site because you stopped supporting *transitions*, we're talking about pure cosmetic features that don't affect accessibility. – Christian Jan 15 '13 at 16:38
  • 1
    My comment is more of a warning than anything. The whole "just use your statistics as a guide" recommendation has been thrown around for years, particularly back when it was common practice to actively block out browsers or write downright broken JavaScript that made the site unusable. You may have intended the comment to only apply to purely cosmetic aspects of the site, but people have been known to twist perfectly good advice for a narrow situation and think they can apply it to everything, including real functionality. – cimmanon Jan 15 '13 at 16:49