Ie10-11 hide grid & other content & show warning

I found this when looking for no js solutions to the fact the ie11 does not support “@supports”. My goal is to show Internet explorer only content and hide unsupported css-grid stuff.

https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

This approach seems work. Interested in feedback and downsides? The custom code is the page settings.

https://preview.webflow.com/preview/ie-only-media-query?utm_source=ie-only-media-query&preview=3268a3e7a559669755f4bcfb9ff37cfa

Yes that is how to target IE10 and IE11. You still need to target IE12-15 with a @ supports though also as they do understand @supports but do not support the newer grid spec. What I did is make a container and then inside IE10 IE11 css rule selector you mentioned I set the container to display: none. I repeat that for @supports not grid:auto and set the container to display: none also…

Next I check with jquery to see if that container is display:none and then if true I either redirect to a simple landing page or use jquery load to replace the html. If not the code is skipped and the page is processed normally for the new grid spec.

Cool, thanks for the extra tips. Instead of the jquery, can’t we just set a whole alternate content wrap div to display if the browser passes the queries / supports? Sorry I might not be following

I guess your method keeps pages streamlined, no chance of duplicate content etc

If the customer is wanting fallback now and willing to pay for the additional work needed then in order to keep current with his interpeted browser support down the road, I think it would be easiest to load replacement html and then at some point remove the rule as browser support falls under a certain percentage. Otherwise the code is complex and some effort to clean it up would make more dollars flow out of customers pocket. For some things your method will be fine I think.