Writing Vendor Prefix Free CSS Code

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.

Using -prefix-free JavaScript Library

-prefix-free JavaScript library automatically adds vendor prefixes to your CSS. You just have to add the -prefix-free JavaScript file before the end of the body tag.

This solution works until users have JavaScript enabled. But its a horror if JavaScript is disabled.

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.

Final Thoughts

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.