@supports feature queries
@supports はブラウザのCSS機能サポートをランタイムで検出するルール。プロパティと値のペアを条件として指定し、サポートされている場合のみスタイルブロックが適用される。プログレッシブ・エンハンスメントの実現に不可欠。
概要
@supports はブラウザのCSS機能サポートをランタイムで検出するルール。プロパティと値のペアを条件として指定し、サポートされている場合のみスタイルブロックが適用される。プログレッシブ・エンハンスメントの実現に不可欠。
対応ブラウザ
デスクトップ
Chrome 28+
Edge 12+
Safari 9+
Firefox 22+
モバイル
Chrome Android 28+
Safari iOS 9+
Firefox Android 22+
基本構文
CSS
/* Grid が使えるかチェック */
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
}
/* セレクターのサポートチェック */
@supports selector(:has(*)) {
.card:has(img) {
grid-row: span 2;
}
}
/* NOT 条件 */
@supports not (backdrop-filter: blur(10px)) {
.modal-backdrop {
background: rgba(0, 0, 0, 0.8);
}
}実務での使いどころ
-
プログレッシブ・エンハンスメント
新機能をサポートするブラウザだけに拡張スタイルを適用し、未対応ブラウザにはフォールバックを提供。
-
セレクターサポート検出
@supports selector() で :has() などの新しいセレクターの対応状況を検出。
注意点
- @supports 自体に対応していない古いブラウザではブロック全体が無視される。
- プロパティの存在チェックのみで、実装の正確さは保証されない。
アクセシビリティ
- フォールバック時もコンテンツへのアクセスが確保されていることを検証する。