Sintaksis baru untuk kueri media rentang

Cari tahu cara sintaksis baru ini dapat menyederhanakan kueri media.

Rachel Andrew

Kueri Media mengaktifkan desain responsif, dan fitur rentang yang memungkinkan pengujian ukuran minimum dan maksimum area tampilan digunakan oleh sekitar 80% situs yang menggunakan kueri media. Spesifikasi Kueri Media Level 4 menyertakan sintaksis yang ditingkatkan untuk kueri rentang ini.

Dukungan Browser

Sumber

Contoh berikut menunjukkan cara menyederhanakan kueri Anda.

Pengujian kueri media standar untuk lebar area pandang minimum akan ditulis sebagai berikut:

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

Sintaksis baru memungkinkan penggunaan operator perbandingan:

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

Menguji lebar maksimum:

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

Dan, versi yang menggunakan sintaksis level 4:

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

Sintaksis ini memiliki potensi untuk menyederhanakan kueri, khususnya saat menguji di antara dua lebar. Pada contoh berikut, kueri media menguji area pandang dengan lebar minimum 400 piksel, dan lebar maksimum 600 piksel.

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

Ini dapat ditulis ulang dalam sintaksis baru sebagai:

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

Fitur yang Anda uji, dalam hal ini width, berada di antara kedua nilai.

Selain membuat kueri media lebih ringkas, sintaksis baru ini memiliki keunggulan akurasi. Kueri min- dan max- mencakup nilai yang ditentukan, misalnya pengujian min-width: 400px untuk lebar 400 piksel atau lebih. Sintaksis baru memungkinkan Anda lebih eksplisit tentang maksud Anda dan menghindari potensi kueri yang bentrok.

Untuk menggunakan sintaksis rentang baru sekaligus memperhitungkan browser yang belum menerapkannya, ada plugin PostCSS yang akan menulis ulang sintaksis baru ke sintaksis lama di stylesheet Anda.