Browsers have historically made it a pain in the ass to work with CSS, due to the many inconsistencies that occur in especially older browsers, or with brand new experimental CSS properties. To get around this problem you need to apply prefixes on certain CSS properties to make your UI look and work the same in all browsers.
A great example is the CSS flexbox property that needs a whooping 4 prefixes to work in all modern browsers as well as IE10 & IE11 (where flexbox is still only partially supported):
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;With modern tools at your disposal, you don’t have to worry about typing prefixes, in fact, you shouldn’t even waste a second trying to memorize any of them, that’s just a waste of your mental resources. Instead, use a tool like Autoprefixer with Webpack or whatever task runner/bundler you’re using.
With Autoprefixer you never have to worry about prefixing CSS properties, since it does all the work for you in post-production, before you push your latest CSS to your production server.
