メディアクエリ:範囲構文

- CR

幅や高さなど「範囲」タイプの機能を使用するメディアクエリの構文を簡潔にするための改善。通常の数学的比較演算子(><>=<=)で使用できます。

例:@media (100px <= width <= 1900px)@media (min-width: 100px) and (max-width: 1900px) と同等です。

Chrome

  1. 4 - 103:サポートされていません
  2. 104 - 123:サポートされています
  3. 124:サポートされています
  4. 125 - 127:サポートされています

Edge

  1. 12 - 103:サポートされていません
  2. 104 - 123:サポートされています
  3. 124:サポートされています

Safari

  1. 3.1 - 16.3:サポートされていません
  2. 16.4 - 17.3:サポートされています
  3. 17.4:サポートされています
  4. 17.5 - TP:サポートされています

Firefox

  1. 2 - 62:サポートされていません
  2. 63 - 124:サポートされています
  3. 125:サポートされています
  4. 126 - 128:サポートされています

Opera

  1. 9 - 90:サポートされていません
  2. 91 - 108:サポートされています
  3. 109:サポートされています

IE

  1. 5.5 - 10:サポートされていません
  2. 11:サポートされていません

Chrome for Android

  1. 124:サポートされています

Safari on iOS

  1. 3.2 - 16.3:サポートされていません
  2. 16.4 - 17.3:サポートされています
  3. 17.4:サポートされています
  4. 17.5:サポートされています

Samsung Internet

  1. 4 - 19.0:サポートされていません
  2. 20 - 23:サポートされています
  3. 24:サポートされています

Opera Mini

  1. 全て:サポートされていません

Opera Mobile

  1. 10 - 12.1:サポートされていません
  2. 80:サポートされています

UC Browser for Android

  1. 15.5:サポートされていません

Android Browser

  1. 2.1 - 4.4.4:サポートされていません
  2. 124:サポートされています

Firefox for Android

  1. 125:サポートされています

QQ Browser

  1. 14.9:サポートされていません

Baidu Browser

  1. 13.52:サポートされていません

KaiOS Browser

  1. 2.5:サポートされていません
  2. 3:サポートされています
リソース
WebKitのバグ
Firefoxのサポートに関するバグ
Chrome 104での範囲メディアクエリの新しい構文
レベル4での構文の改善
PostCSSポリフィル
メディアクエリレベル4:メディアクエリ範囲コンテキスト(メディアクエリ範囲)