Writing proper vendor prefix CSS code is a coding horror for web designers. In this article I will provide three ways to write CSS code without worrying about vendor prefixes.
Generating Vendor Prefixed Code
You can use CSS preprocessors like LESS or SASS. CSS code generated using this preprocessors are automatically vendor prefixed. If you are a core web designer then this solution is perfect for you, but if you are not a web designer than it might not suit you as you have to learn this extensions.
<title>I am Free of Vendor Prefixes</title>
Using Prefixmycss Online Tool
You can use Prefixmycss online tool to vendor prefix your CSS code. The only problem with this solution is you need to copy code from CSS files and paste into this tool and vice-versa. Doing this task for every small change is annoying.
Using grunt-autoprefixer Grunt Plugin
grunt-autoprefixer is a Grunt plugin which can automatically vedor prefix all CSS files in your web project. This is the best solution for vendor prefixing CSS. To use this tool you first need to learn Grunt.
If you are using very new CSS properties or properties which are still under development then this tools might fail to vendor prefix your CSS, in that case you need to write some vendor prefix CSS. You should regularly update these tools to make sure they support more CSS properties. Even if you are using this solutions you need to test your website in different browsers to make sure everything is working.