QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Writing Vendor Prefix Free CSS Code

Writing Vendor Prefix Free CSS Code

vendor-prefix-free

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.

<!doctype html>
<html>
    <head>
        <title>I am Free of Vendor Prefixes</title>
    </head>
    <body>

        <script type="text/javascript" src="https://cdn.rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.dynamic-dom.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/LeaVerou/prefixfree/gh-pages/plugins/prefixfree.jquery.js"></script>
    </body>
</html>

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.

Nov 6, 2014Narayan Prusty
URL Tracking Parameters and Its Negative ImpactIntel XDK App using WordPress Backend

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Generating Vendor Prefixed Code
  • Using -prefix-free JavaScript Library
  • Using Prefixmycss Online Tool
  • Using grunt-autoprefixer Grunt Plugin
  • Final Thoughts
Related Articles
  • Color Selection Techniques For Websites
  • Hittail Alternative
  • Secret Blogging Tools And Methods That Will Help You To Succeed
  • Facebook Style Face Detection and Tagging with JavaScript
  • Typing Effect using JavaScript
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license