3 ms·
If you've been following CSS grid at all, or if you look up anything related to it, you'll probably encounter something written by Rachel Andrew. She's been doi
by TheAceOfHearts 9y ago
If you've been following CSS grid at all, or if you look up anything related to it, you'll probably encounter something written by Rachel Andrew. She's been doing an incredible job at documenting and promoting CSS grid.
In the past she wrote a CSS grid polyfill [0], but sadly it never got updated to the latest version of the spec. It'd be an easier sell if you could polyfill it reasonably on some older browsers, even if performance suffered a bit.
Right now the last holdout is Edge [1], which is funny because they were the first to ship the older spec, going back as far as IE10 or IE11. Luckily, the next version will be shipping the latest spec.
I've noticed autoprefixer [2] supports a grid option. I'd love a guide that explained any incompatibilities between the two versions. Getting a mostly working grid on IE11 and Edge would probably make it an easier sell for many.
When flexbox started growing popular there were guides showing you could support most features on IE10 and beyond with little effort if you used autoprefixer. Since there are equivalent versions of most attributes on older browsers, you just had to be aware of bugs and gotchas. For example, the default value for flex-grow, flex-shrink, and flex-basis (and their older equivalents) changed between versions, so if you always had to set them. In addition to any incompatibilities between versions, all implementations were buggy, so you had to be aware of bugs and their workarounds. Luckily, they're all well documented on the flexbugs [3] repo.
Considering grid is more complicated than flexbox, I wouldn't be surprised to find it has a few bugs. Does anyone know if there's a gridbugs repo that developers can track?
EDIT: After a quick search, I found a blog post [4] talking about supporting the older version.
[0] https://github.com/FremyCompany/css-grid-polyfill/ https://github.com/FremyCompany/css-grid-polyfill/
[1] http://caniuse.com/#feat=css-grid http://caniuse.com/#feat=css-grid
[2] https://github.com/postcss/autoprefixer https://github.com/postcss/autoprefixer
[3] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
[4] https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/ https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...
- detaro 9y agoRegarding autoprefixer, at least this article recommends against using it, since the MS implementation has more differences than just the prefix: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... I've also bookmarked this article about CSS Grid in production, but haven't read it completely yet: https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/ https://www.smashingmagazine.com/2017/06/building-production...
- rachelandrew 9y agoThe latest version of autoprefixer has the old grid support off by default, I'm not sure of a scenario in which it would be useful to be honest. The spec in IE10,11 and Edge is solid, it just is more limited than the updated spec.