Hacker News Reader

Comment by JepZ | Hacker News Reader

I agree that flexbox and grids complement each other, but I doubt that grids are ready for product. I mean it is nice that all major browsers have a decent support in the newest versions, but production ready includes for me that older browsers (without support or major bugs) are not common anymore (~ <5%).

As far as I can see it it is currently scored at ~75%: https://caniuse.com/#search=grid

View on HN

Re: CSS Grid, caniuse.com seems to be out of date here.

MS Edge 16 was released two weeks ago, and already supports the latest CSS Grid spec (allegedly, I haven't tried it myself).

---

As for the remaining 21%, depending on your target audience you might not care enough about UC Browser for Android, Samsung Internet, Opera Mini, Android Browser, and even IE11, which btw is no longer the default browser for Windows (Edge is).

Especially if you're building a new product, by the time it becomes big enough that browser compatibility starts to matter, it will probably be a non-issue for CSS grid.

Many companies use IE11 as default since Edge breaks some pages used internally. So if enterprise customers are important I would pay attention to IE11 compatability.

You don't have to make pages that look identical in every browser. Make something that works for everyone and then use newer browser features to make it as good an experience as possible depending what features are available. CSS even has the "@supports" feature for doing it - https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports

The problem is that grid is best used for overall page layout... which is part of your CSS least amenable to progressive enhancement.

<heretic-mode> Just use <table> - the best possible Grid layout module out there. Works in all browsers, even IE6. </heretic-mode>

Or, if you don't want to be a heretic, use display: table.

If to speak about layout methods @supports will not help you but will force you to do the job twice.

If you can do your layout without flex boxes why do you need to create second version with them at all?

Depends how you do the job, if you initially design for mobile you can use the mobile layout for everyone that does not support grids, and add grids for the traditional desktop layout. Since grid layouts are created as a list of elements, this workflow is actually pretty efficient.

will force you to do the job twice

That's one way of looking at it. I prefer to see it as writing features that only certain users will benefit from. In the case of layout, I tend to give users with older browsers a much more basic, linear flow (just making the semantic HTML work really), and then add in more complex layout using what tech is available. That's not really doing the same work twice in my opinion.

Reply on news.ycombinator.com