Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
While it's true that a not-insignificant portion of users (~7-10%, it seems) still don't support CSS Grid, it's also very doable to write fallback CSS targeting those older browsers. This doesn't mean porting your CSS Grid design exactly back to older standards; instead, it means giving users in older browsers a clean, readable, functional layout that will get the job done without getting in their way, but that's about it.
In fact, I can't recall who, but I heard a talk or a podcast episode where someone recommended falling back to the mobile layout. You're probably writing one anyway, and it's often much simpler than the large-screen layout while still maintaining full functionality (or it should be, and if it's not, fix that first), so why not use it here?
One very handy tool for allowing Grid and fallback CSS to peacefully coexist is to wrap all CSS Grid code in @supports (display: grid) { ... }. This rule will only be recognized and run by browsers with Grid support, and this lets you write whatever non-grid-specific CSS you need in support of the Grid layout (margins and padding and whatever else) without worrying that you'll break the fallback layout.
I haven't use "support" but I may start looking at it, since I'd rather just work on the lesser common denominator I'll be targeting so I just work once.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
There is a growing mantra in the CSS world: Websites don't need to look the same in every browser! (e.g.: dowebsitesneedtolookexactlythesame...)
While it's true that a not-insignificant portion of users (~7-10%, it seems) still don't support CSS Grid, it's also very doable to write fallback CSS targeting those older browsers. This doesn't mean porting your CSS Grid design exactly back to older standards; instead, it means giving users in older browsers a clean, readable, functional layout that will get the job done without getting in their way, but that's about it.
In fact, I can't recall who, but I heard a talk or a podcast episode where someone recommended falling back to the mobile layout. You're probably writing one anyway, and it's often much simpler than the large-screen layout while still maintaining full functionality (or it should be, and if it's not, fix that first), so why not use it here?
One very handy tool for allowing Grid and fallback CSS to peacefully coexist is to wrap all CSS Grid code in
@supports (display: grid) { ... }. This rule will only be recognized and run by browsers with Grid support, and this lets you write whatever non-grid-specific CSS you need in support of the Grid layout (margins and padding and whatever else) without worrying that you'll break the fallback layout.I haven't use "support" but I may start looking at it, since I'd rather just work on the lesser common denominator I'll be targeting so I just work once.