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.
You can go to https://caniuse.com to see if what you’re using is supported on all browsers or not.
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
Thanks for the resources, I had no idea.
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.
So that’s the more common practice in a work place environment?
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.