Summer Night 2 is really helpful for me

Hi,

@supports not (display: grid) {
body {
// new property:values to be applied
}

I don’t understand the above code.
Would you please explain it to me?
Thanks.


Hi @alexseo,
This is a special rule in CSS like media queries. It is called a feature query. The stylesheet tests whether the browser (Edge vs Chrome vs IE, for example) that is loading the file “supports” certain features. In this case display: grid. IE never supported it, for example. So, much like a media query, the rules contained in the feature query will be applied if the query comes back as true. Looking at line 96 again, the stylesheet is checking if the browsers supports display:grid, but there is the not. This means apply the contained rules if this browser does not support grid. So, the body rule within that query is for setting each of the sections using older CSS like floats and widths.
Is this clear/helpful?
Bob