快速測試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中文網其他相關文章！