Hi,
I’ve been starting to use CSS grid in my projects and stumbled quite an important pool of users that saw some of my sites broken… Like impossible to read through (since layouts achieved with grid are just awesome some layouts where impossible without grid) We’re talking 1 in 10 users (because it’s not only IE that is concerned but also old Safari, Firefox versions for instance — with old being before 2017).
Desperate I’ve searched around the web and found the perfect thing to still use grid for normal human beings and show something else to laggards ! So I’m sharing it here :
It’s called feature queries :
— It’s super simple CSS (like media queries)
— Apparently works with every browser (except IE which should just not continue existing anyway > Can I use... Support tables for HTML5, CSS3, etc)
— Is amazingly simple to use with webflow.
You could just :
1 — wrap your grid element in a div and give it a class or ID
2 — wrap a “non-grid” version inside another div and give it a class or ID
3 — Add some CSS to say what to do in case of support / or not of grid
<style>
@supports not (display: grid) {
.grid-wrapper {
display:none;
}
.non-grid-wrapper {
display:block;
}
}
</style>
Easy right ?
If someone has a trick to do the same and make it work also with IE10+ I’d be glad to hear that !