CODEWITHSUNDEEP
csswebpackinternet-explorer-11css-gridpostcss
Marcus Petty-Saphon
Marcus Petty-Saphon

Reputation: 41

CSS grid support for autoprefixer on webpack

I am using autoprefixer with postcss and webpack for a project. I am also using CSS grid. However, I've noticed when I build my code the ms prefixes for css grid does not work.

Here is my postcss.config.js which is working for things such as flexbox.

How do I enable CSS grid support?

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Upvotes: 4

Views: 2877

Answers (1)

Danield
Danield

Reputation: 125521

By default, autoprefixer doesn't prefix grid properties.

See the autoprefixer documentation:

Autoprefixer has 4 features, which can be enabled or disabled by options:

...

grid: true will enable Grid Layout prefixes for IE.

The syntax for setting options would look something like:

const autoprefixer = require('autoprefixer');
const plugin = autoprefixer({ grid: true });
module.exports = { plugins: [ plugin ] }

That being said, MDN has this to say about autoprefixer for grid properties:

The popular tool autoprefixer has been updated to support the -ms- grid version when you use the new grid properties. Unless your layout is very simple line-based placement, this is likely to cause you more problems that it solves. I would not suggest letting autoprefixer run on grid properties, and instead write a version using the IE version of Grid Layout, if it makes sense for you.

Additionally, Rachel Andrew wrote a thorough post on this topic

In that post she notes the following:

...even where similar properties exist in the two versions of the specification, the capabilities of the older spec and implementation are very different to the new one. This means you can’t simply run Autoprefixer and consider the job done.

Upvotes: 3

Related Questions