如何在Web浏览器中查询CSS Grid支持？

Question

所有主流浏览器都支持最近版本的CSS Grid，但如果客户端有旧版本，我需要回退到其他版本。

Answer 1

在CSS中你可以使用这个：

@supports (display: grid) {
    /* css styles for css grid */
}

@supports语法根据MDN Web Docs回溯到Chrome 28，Edge 20，Firefox 22，Opera 12，Safari 9。

未列出Internet Explorer以支持@supports语法。

Answer 2

例如，您想在不支持CSS功能时显示消息。

<div class="message">
 Your browser does not support CSS grid 
</div>

@supports (display: grid) {
 .message { display: none }
}

使用上面的功能查询@supports，我们说：如果浏览器支持该css功能，则隐藏该消息

你也可以使用@supports not(...)甚至结合超过1条规则：@supports (display: table-cell) and (display: list-item)

值得一看MDN Docs