CSS Grid and IE11 approaches

So I still see 7% of traffic on clients sites coming from internet explorer. :sob:.

I created one grid layout and tested in on ie11. …toast !

What approach are you taking? I see flexbox fallback options discussed, but time is money so I guess I just stick with flexbox.

One thing I was wondering about is using js to detect ie and display “Your browser is not supported”. However old devices and browsers probably count as edge case accessibility, I don’t really want to get sued!

Duplicate the section. Grid one gets a .modern combo class, the flex one gets a .lame combo class and is hidden by default. The js would hide the grid and show the flex when IE is detected.

(yes it is mandatory to call the second one .lame ;-p )

2 Likes

Since the problem lies in that the html format for grid is so different as you can have multiple elements in one grid container you could look at testing for older browsers that do not support grid:auto with a support query and a browser hack test (since IE10 and IE11 ignore support query). Once either of these two tests prove false with the css test you would replace the html sections by id with a fallback section that uses extra containers using jquery load which is triggered by the css test logic. Interestingly enough, if one keeps the style classes and just adds the extra containers needed, the structure just grow like a flex tree keeping the base and limbs for css grid. If you need to change a style you can always add a class that only apply to the fallback. I see no other way to fallback to flex from grid because grid can get so complex. You will have to replace the html grid section with jquery test and then load new identical html replacement that has the additional structures but using the same classes for styles.

1 Like

update with a potential non script based solution Ie10-11 hide grid & other content & show warning