如何查询web浏览器以获得CSS网格支持？

Question

如何查询web浏览器以获得CSS网格支持？

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

Answer 1

在CSS中，您可以使用以下内容：

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

根据MDN Web文档的说法，@supports的语法可以追溯到Chrome 28、Edge 20、Firefox 22、Opera 12、Safari 9。

未列出以支持@ support语法。

Answer 2

例如，当不支持CSS功能时，您希望显示一条消息。

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

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

使用上面的特性查询@supports，我们说:如果浏览器支持css特性，那么隐藏消息。

您还可以使用@supports not(...)，甚至可以组合多个规则：@supports (display: table-cell) and (display: list-item)

值得一看的是MDN文档