

This means that you may also need to update your version of PostCSS to at least version 6. Some features used in the latest version of Autoprefixer are not supported in PostCSS version 5. If you are already using Autoprefixer in your projects, make sure to update it to the latest version using this command: npm i -D (I recommend the Gulp setup over Grunt if you aren’t sure which to go with.) The bit in the guide specifically about Autoprefixer is found here.
CODEKIT AUTOPREFIXER HOW TO
If you have never used Autoprefixer (or any build tool) before, then first install Node on your computer then follow this guide on how to get a basic workflow up and running. (We have a great overview by the creator of Autoprefixer here on CSS Tricks.) Autoprefixer is a tool used for automatically adding browser-specific CSS prefixes to your CSS so that you don’t have to. Setting up Autoprefixerīefore you do anything else, you will want to get Autoprefixer up and running. Once you understand the basics of how to use CSS grid in modern browsers, come back here and learn how to use it in a way that produces identical results in IE10 and 11.

After that, go play some levels of the browser game Grid Garden to get some hands-on CSS grid experience. If you aren’t sure about how to use CSS grid yet, go watch Rachel Andrew’s excellent CSS grid video tutorial series. I’ll be assuming that you already have a good understanding of how to use CSS grid in modern browsers for this article. This article is for those that understand CSS grid, but are either too afraid or not allowed to use it, thanks to IE. Don’t let this get you down though, you would be amazed by how much IE11 can handle, especially if it has some help from Autoprefixer.īefore I get too far into this, you need to know that this isn’t a general “how to use CSS grid” article. If you want IE compatibility, first you need to resign to the fact that you can’t use all of the fancy bells and whistles that can be found in the modern CSS grid spec. It is especially tough if this is for an intranet where 90% of the users are using IE. Giving IE a crappy fallback layout is a bit of a tough sell to clients. Faking an auto-placement grid with gaps.Debunking common IE Grid misconceptionsĬSS Grid and the new Autoprefixer (This Post).
