CSSフォールバックをすばやくテストします

便利なCSSテストのトリック！

ブラウザの互換性は常に保証されているわけではありません。 CSSグリッドサポートを欠いているブラウザにはフォールバックが必要だとしましょう（現在はあまり一般的ではありませんが、図に役立ちます）。

@supportsブロックを使用できます。

 @supports（display：grid）{
  .blocks {
    ディスプレイ：グリッド;
    Grid-Template-Columns：Repeat（auto-fill、minmax（min（100px、100％）、1fr））;
    ギャップ：1rem;
  }
}

フォールバックをすばやくテストするには、 @supports (display: grid)一時的に@supports (display: gridx)のような無効なものに変更します。これにより、テスト用のシンプルなオン/オフスイッチが提供されます。

上記の例には、堅牢なフォールバックがありません。より良いアプローチには、FlexBox（GridではなくFlexBoxをサポートするブラウザ用）が含まれる場合があります。あるいは、よりシンプルな列ベースのフォールバックは、合理的なプレゼンテーションを確保することができます。

ブラウザが@supportsクエリをサポートしていると確信している場合（少し皮肉なことに、私は知っています！）、これを使用できます。

 @supports（display：grid）{
  / *グリッドスタイル */
}

@supports not（display：grid）{
  / *基本フォールバック間隔 */
  .block {マージン：10px}
}

この仮定は、古いブラウザが段階的に廃止されるにつれてますます有効になります（特にIEサポートを削除した場合）。

これは、 @when構文の望ましさを強調しています。

 @when supports（display：grid）{
  / *グリッドスタイル */
} @それ以外 {
  / *フォールバックスタイル */
}

このクリーンな構文は、読みやすさと保守性を大幅に向上させます。

以上がCSSフォールバックをすばやくテストしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。