Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
メディアクエリ Limited support

Custom media queries

複雑なメディアクエリに名前を付けて変数のように管理できる機能です。同じブレイクポイントを複数箇所で使用する際に一元管理が可能になり、保守性が大幅に向上します。現在はどのブラウザでもサポートされていませんが、PostCSSプラグインで先行利用できます。

メディアクエリ再利用性

概要

複雑なメディアクエリに名前を付けて変数のように管理できる機能です。同じブレイクポイントを複数箇所で使用する際に一元管理が可能になり、保守性が大幅に向上します。現在はどのブラウザでもサポートされていませんが、PostCSSプラグインで先行利用できます。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応

基本構文

CSS 
@custom-media --narrow-window (max-width: 30em);
@custom-media --wide-window (min-width: 60em);

@media (--narrow-window) {
  .container { padding: 1rem; }
}

実務での使いどころ

  • レスポンシブデザインのブレイクポイント管理

    プロジェクト全体のブレイクポイントを@custom-mediaで一元定義し、変更時に一箇所の修正で済むようにします。

注意点

  • 現在ブラウザネイティブサポートがないため、使用する場合はPostCSSなどのビルドツールが必須です。

アクセシビリティ

  • メディアクエリの命名はブレイクポイントの意図を明確に表現し、チーム内での認識統一に役立ててください。

参考リンク