CSS useless vendor prefixes

Question

I have a stylesheet that I made 2 or 3 years ago, when CSS was full of these horrible vendor prefixes for flexbox. I used flexboxes as needed, with the -webkit- prefix for Chrome & Safari.

I just saw on caniuse that flexboxes are now working without prefix on every browsers. Do you know an up-to-date list of CSS properties that still need prefixes?

At that time, vendor prefixes were needed for things like gradients or animations. I wonder if I can remove everything safely, or if some of them are still used.

@dingo_d Not really, I don't want a list of prefixes, but a list of CSS properties for which prefixes are still needed — FLX, Dec 07 '15 at 15:47
you may remove them to keep a clean and easy to maintain style sheet and add a javascript like autoprefixer or else that will generate the prefix where and when needed only — G-Cyrillus, Dec 07 '15 at 15:52
You can always just test your css in various browsers without using the annoying vendor prefixes. — brewpixels, Jan 01 '18 at 20:49

score 4 · Accepted Answer · answered Dec 07 '15 at 15:54

4

I was looking for the same a while ago, and ran into this useful website: Should I prefix?. It lists the CSS properties and whether a prefix is still necessary or not.

Next to that, you can always check Can I Use for more info and detail.

answered Dec 07 '15 at 15:54

Sidney Gijzen

1,551
3
21
25

Thanks, this is exactly what was looking for : A quick overview – FLX Dec 07 '15 at 16:00
It is an overview, but it's not really updated. Check out the flexbox section. And then it just provides a link to caniuse.com. – Michael Benjamin Dec 07 '15 at 16:02
I gets updated every now and then, see the Github commit log. E.g. [the flexbox property was updated last January](https://github.com/davidhund/shouldiprefix/commit/0a2ceda6f6cc28fd7f8ee22c1cc1bffd867660bb). – Sidney Gijzen Dec 07 '15 at 22:37

score 1 · Answer 2 · answered Dec 07 '15 at 15:55

+1 to caniuse.com as the best place to see browser prefix info. But your flexbox use case is unique.

Flexbox's implementation has changed a lot of the years, far more than almost any other CSS standard I am aware of. The best way to check which version you are using is to check the display value in your stylesheet.

display: box is the oldest implementation, you probably didn't use this one.
display: flexbox was the transitional state between the old and new flexbox standard. If you are 2-3 years out, you might have used this and will have to change your code to match the new implementation.
display: flex is the modern implementation that has good cross browser support. If you used the prefix version of this, you should be able to safely drop prefixes and get the same results.

CSS Tricks has one of the best shorthands for the modern approach to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS useless vendor prefixes

2 Answers2