Custom media queries
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
@custom-media は CSS のアットルールで、長くて複雑なメディアクエリーの別名を定義します。同じ <media-query-list> をハードコードで複数の @media アットルールに繰り返し記述する代わりに、@custom-media アットルールで一度定義し、このスタイルシート内で必要に応じて参照できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
@custom-media 実験的 | | | 148 | | | |
| DOM API | ||||||
CSSCustomMediaRule 実験的 | | | 146 | | | |
注釈 1件
実験的機能
- ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
- ブラウザの実験的フラグを有効にする必要があります
基本構文
CSS
@custom-media --narrow-window (max-width: 30em);
@custom-media --wide-window (min-width: 60em);
@media (--narrow-window) {
.container { padding: 1rem; }
}ライブデモ
実務での使いどころ
-
レスポンシブデザインのブレイクポイント管理
プロジェクト全体のブレイクポイントを@custom-mediaで一元定義し、変更時に一箇所の修正で済むようにします。
注意点
- 現在ブラウザネイティブサポートがないため、使用する場合はPostCSSなどのビルドツールが必須です。
アクセシビリティ
- メディアクエリの命名はブレイクポイントの意図を明確に表現し、チーム内での認識統一に役立ててください。