Sintaksis baru untuk kueri media rentang

Ketahui bagaimana 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 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 bagaimana Gemini dapat menyederhanakan kueri Anda.

Pengujian kueri media umum 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.
}

Fungsi 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 dua nilai.

Selain membuat kueri media lebih sederhana, sintaksis baru memiliki keuntungan akurasi. Kueri min- dan max- mencakup nilai yang ditentukan, misalnya pengujian min-width: 400px untuk lebar 400 piksel atau lebih besar. Sintaks baru memungkinkan Anda untuk lebih eksplisit tentang apa yang Anda maksud dan menghindari potensi bentrokan kueri.

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