Show a div to users with a browser that doesn't support grid

Community resources Webflow Tips
1

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 :slight_smile: 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 !

2 Likes
2

@pepperclip - You could always use modernizr. Webflow used to include it, but no longer do.

People with old browsers are probably not surprised much when sites “break” if they visit anything built in the last couple of years (except gov sites or public companies).

I used to have a room full of computers for testing. Now I test with VM’s and browerstack.

Web development was so much easier when I only had to target one browser; NCSA Mosaic. Of course there was other issues then. :slight_smile: