快速测试CSS后备

方便的CSS测试技巧！

浏览器兼容性并不总是保证。假设您需要缺乏CSS网格支持的浏览器的后备（现在不常见，但对插图有用）。

您可以使用@supports块：

 @supports（Display：Grid）{
  .blocks {
    显示：网格；
    网格板柱：重复（自动填充，minmax（最小（100px，100％），1FR））;
    差距：1REM；
  }
}

要快速测试后备，请临时修改@supports (display: grid)为无效的事物，例如@supports (display: gridx) 。这提供了一个简单的开/关开关进行测试。

上面的示例缺乏强大的后备。更好的方法可能涉及Flexbox（对于支持Flexbox但不网格的浏览器）。另外，基于列的较简单的后备可以确保合理的演示。

如果您有信心浏览器支持@supports查询（我知道有点讽刺！），则可以使用以下方式：

 @supports（Display：Grid）{
  / *网格样式 */
}

@supports not（Display：Grid）{
  / *基本的后备间距 */
  .block {Margin：10px}
}

随着较旧的浏览器被逐步淘汰，此假设变得越来越有效（尤其是如果您放弃了IE支持）。

这突出了@when语法时的可取性：

 @when支持（显示：网格）{
  / *网格样式 */
} @别的 {
  / *后备样式 */
}

这种清洁的语法将大大提高可读性和可维护性。

以上是快速测试CSS后备的详细内容。更多信息请关注PHP中文网其他相关文章！