How am I suppose to know when to use a browser prefixes?

1

It seems like developers will arbitrarily place vendor prefixes like -webkit- in some CSS styles but I’ve yet to encounter someone explain when to do it.

So, how do I know when to put one? Am I suppose to just download every type of browser and check if the code is functioning properly? or am I suppose to just look up some sort of documentation to see what CSS properties are compatible with what browsers.

2

You can go to https://caniuse.com to see if what you’re using is supported on all browsers or not.

2 Likes
3

https://caniuse.com/ is a good starting place.

https://developer.mozilla.org/en-US/ is another.

use each to type in an element or property and to see its browser support. after a while you should start to notice trends and get a better understanding of the landscape.

there are also tools like autoprefixers which do the heavy lifting for you

4

Thanks for the resources, I had no idea.

5

In real-world apps, you would usually use a module bundler with an autoprefixer plugin which takes your CSS and generates browser prefixes for you. PostCSS is one of the more popular autoprefixers around.

2 Likes
6

So that’s the more common practice in a work place environment?

7

Definitely. Any complex project will use a module bundler anyway, so the autoprefixer is something that just works as a part of it. You just write standard CSS3 (or transpile it from LESS/SASS/etc), and the autoprefixer knows which parts of CSS need prefixes for which browsers and adds them automatically.

2 Likes