Sintaksis baru untuk kueri media rentang

bookmark_border Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Cari tahu cara sintaksis baru ini dapat menyederhanakan kueri media.

Rachel Andrew

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

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 berpotensi menyederhanakan kueri, terutama saat menguji 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 tersebut.

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.