If you’ve been loving how amazing CSS Grids are, and now have just realised IE’s lack of support for it — Don’t panic. In this post I explain why you need to get -ms-grid vendor prefix to output, in order for browsers like Internet Explorer 11 to understand it.
Tech Stack
The current project takes advantage of the following packages …
- BabelJS
Next gen JS today!
https://babeljs.io/ - Laravel Mix
The elegant wrapper around Webpack.
https://laravel-mix.com - Sass
CSS preprocessor.
https://sass-lang.com/ - Browserslists
Config to share target browsers between different front-end tools.
https://github.com/browserslist/browserslist - Autoprefixer
Adds vendor prefixes to CSS rules using values from Can I Use.
https://github.com/postcss/autoprefixer
Goal 1: Ensure your build tasks have Autoprefixer enabled and configured to generate grid vendor prefixes
If you’re using Laravel Mix, you will have to ensure that you’ve correctly configured. One way to test this to ensure the correct vendor prefixes are being applied is by adding a ‘display: grid;’ rule in your CSS. If configured correctly, then you should see ‘display: -ms-grid;’ outputed as one of the vendor prefixes. If not, then there’s something wrong, i.e. then that suggests that your CSS may be being piped through the autoprefixer plugin, however the correct grid vendor prefixes aren’t being generated.
const mix = require('laravel-mix');
const autoprefixer = require('autoprefixer');
...
//Build the theme assets
mix.js(SRC.search.js, DEST.theme.js)
.js(SRC.theme.js, DEST.theme.js)
.sass(SRC.theme.scss, DEST.theme.css)
.sass(SRC.theme.editor, DEST.theme.css)
.sass(SRC.search.scss, DEST.theme.css)
.sass(SRC.print.scss, DEST.theme.css)
.options({
autoprefixer: {
options: {
grid: 'autoplace'
}
}
});Note the autoprefixer grid options, when set to ‘autoplace’, autoplacement support is added to Autoprefixers grid translations.
Goal 2: Use Grid Templates to define your rows and columns
Ensure that the way you define your CSS Grids comply with Autoprefixers required configs for it to be able to generate IE-Friendly prefixes. For this to work correctly, both grid-template-rows and grid-template-columns has been set. If grid-template or grid-template-areas has been set, Autoprefixer will use area based cell placement instead.
.grid-container {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "left-block right-block";
}
.right-block { grid-area: right-block; }
.left-block { grid-area: left-block; }References
- Laravel Mix — PostCSS Plugins
https://laravel-mix.com/docs/4.0/css-preprocessors#postcss-plugins - W3School CSS Grid Templates
https://www.w3schools.com/cssref/pr_grid-template.asp - LayoutIt CSS Grid Code Generator
https://grid.layoutit.com/ - CSS-Tricks — CSS Grids in IE
https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ - Grid Autoplacement support in IE
https://github.com/postcss/autoprefixer/blob/master/README.md#grid-autoplacement-support-in-ie
