Hacker News new | ask | show | jobs
by modernerd 2948 days ago
Use a simple mobile-first layout, then add "@supports (display: grid)" to enhance the layout for browsers that support grid.

Mobile OS browsers and IE 10 will get a usable experience that way without having to write flexbox fallbacks.

“Internet Explorer + CSS Grid????”

https://www.youtube.com/watch?v=7msERxu7ivg

MDN: Using feature queries

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

3 comments

> “Internet Explorer + CSS Grid????”

well the original css grid spec actually did came from microsoft (https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/)

That's why it's only partial supported, they never updated it to the current version.

I think the point is, you have to write the fallback anyway. There really is no "enhanced", as they are two different ways to reach the same solution. The user won't notice a difference, and no sane person wants to do the same thing twice just because one method is slightly cleaner.

This is why CSS grids have been a nonstarter for most of us.

It depends if your use case accepts that a site can look different in older browsers. You don't have to write a fallback if people are okay with that.

If your project's stakeholders are prepared to accept that IE 10/11 users won't see the same as Chrome users (I use, “in the same way that those on mobile won't see the same as those on desktop, older browsers such as IE 10 will also see a simpler layout”), then progressively enhancing a mobile layout with CSS Grid is a fine approach.

I accept that this can't always be the case, though. But I don't consider CSS Grid a non-starter for most sites. Browser support is now good enough that I look to use it wherever possible, and try to educate people still stuck in pixel-perfect across all devices -land.

Isn’t ie11 incompatible with the official grid spec?
Yes — I should have written IE10/11. Neither supports @supports, though, so that's still a good way to progressively enhance for grid.
Unfortunately we’ll need to build our new site to look nice for IE11, too, as the stakeholders are locked on windows7.
That's unfortunate and likely will require a flexbox/float-based fallback.
Suzy Grids 2 is float based, a pleasure to work with and covers the old browsers. I'd love to switch to CSS grids but will have to wait another 5 years it seems.