4 ms·

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 supp

by JepZ 9y ago

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 https://caniuse.com/#search=grid

onion2k 9y ago
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 https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
- cvsh 9y ago
  The problem is that grid is best used for overall page layout... which is part of your CSS least amenable to progressive enhancement.
  - c-smile 9y ago
    <heretic-mode> Just use <table> - the best possible Grid layout module out there. Works in all browsers, even IE6. </heretic-mode>
    - gsnedders 9y ago
      Or, if you don't want to be a heretic, use display: table.
- c-smile 9y ago
  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?
  - steinso 9y ago
    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.
  - onion2k 9y ago
    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.
raquo 9y ago
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.
- dx034 9y ago
  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.

by JepZ 9y ago

onion2k 9y ago

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 https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports

cvsh 9y ago
The problem is that grid is best used for overall page layout... which is part of your CSS least amenable to progressive enhancement.
- c-smile 9y ago
  <heretic-mode> Just use <table> - the best possible Grid layout module out there. Works in all browsers, even IE6. </heretic-mode>
  - gsnedders 9y ago
    Or, if you don't want to be a heretic, use display: table.
c-smile 9y ago
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?
- steinso 9y ago
  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.
- onion2k 9y ago
  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.

raquo 9y ago

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.

dx034 9y ago
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.