範囲メディアクエリの新しい構文

この新しい構文を使ってメディアクエリを効率化する方法をご覧ください。

Rachel Andrew

メディアクエリはレスポンシブデザインに対応しており、ビューポートの最小サイズと最大サイズをテストできる範囲機能は、メディアクエリを使用するサイトの約 80% で使用されています。メディアクエリレベル 4 の仕様では、これらの範囲クエリの構文が改善されています。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

次の例は、クエリを合理化する方法を示しています。

最小のビューポートの幅をテストする一般的なメディアクエリは次のようになります。

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

新しい構文では、比較演算子を使用できます。

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

最大幅のテスト:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

レベル 4 の構文を使用したバージョンは次のようになります。

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

この構文は、特に 2 つの幅をテストする場合に、クエリを合理化できる可能性があります。次の例では、メディアクエリで最小幅が 400 ピクセル、最大幅が 600 ピクセルのビューポートをテストします。

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

これは新しい構文で次のように書き換えることができます。

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

テストする特徴（この場合は width）は、2 つの値の中間になります。

新しい構文には、メディアクエリが冗長になるだけでなく、精度が高いという利点があります。min- クエリと max- クエリには、指定された値が含まれます。たとえば、min-width: 400px は 400 ピクセル以上の幅をテストします。新しい構文を使用すると、意味をより明確にし、クエリが競合する可能性を回避できます。

まだ実装していないブラウザを考慮しながら新しい範囲構文を使用するために、PostCSS プラグインを使用すると、スタイルシートで新しい構文を古い構文に書き換えることができます。