2

How can I reliable create a fallback for CSS grid styling for browsers that don't support the current spec, with a feature query or media query?

According to articles like this one, browsers ignore CSS that they can't parse. Therefore, I expected negative feature queries to work even on browsers that don't support it. E.g. IE11 does not support feature queries, so I expected it to ignore this line and apply the styles inside the query: @supports not (display: grid){}. However, as you can see in this test, IE11 ignores all the styles inside that query.

I found a media query for IE10+, but that one excludes other browsers that don't support grid. Of course I could first declare the fallback styles and override them with a @supports (grid-area: area) query, but I prefer a solution that does not require overrides.

kslstn
  • 1,407
  • 1
  • 14
  • 34

1 Answers1

6

According to articles like this one, browsers ignore CSS that they can't parse [...] However, as you can see in this test, IE11 ignores all the styles inside that query.

Well, yeah. Since Internet Explorer doesn't understand feature queries themselves, it's going to ignore @supports not (display: grid) and everything inside it, because it doesn't understand what that means. Just like the article says.

Overriding, i.e. making use of the cascade, is your only option. There is no clean way of doing this. The reality is that @supports was introduced too late to be useful for distinguishing browsers that don't support features that precede it, such as grid layout.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks for pointing that out. I think I will look into feature detection with JS in order to avoid the cascading overrides. – kslstn Feb 28 '18 at 14:32