Media Queries

Media query adalah alat utama responsive design: sebuah aturan CSS yang menanyakan kondisi lingkungan perangkat — lebar viewport, orientasi, hingga preferensi pengguna — lalu menerapkan aturan di dalamnya hanya bila kondisi tersebut terpenuhi. Browser mengevaluasi media query setiap kali kondisi berubah, sehingga halaman merespons ketika jendela diubah ukurannya atau ponsel diputar. Pada Chapter ini kita membedah anatomi @media, cara menggabungkan beberapa kondisi, dan media features di luar lebar layar yang juga layak dikuasai.

Anatomi Sebuah Media Query #

Sintaks lengkapnya terdiri dari tiga bagian — kata kunci @media, media type opsional, dan media feature yang diapit kurung:

/* bentuk dasar: hanya feature */
@media (min-width: 1024px) {
  .panel { background: rgb(14, 165, 233); }
}

/* dengan media type */
@media screen and (min-width: 1024px) {
  .panel { background: rgb(14, 165, 233); }
}

Mari kita telaah potongan di atas:

1. @media: pembuka aturan bersyarat; semua selektor di dalam kurung kurawal hanya berlaku bila kondisinya terpenuhi.
2. Media type: all, screen, print, atau speech. Nilai ini opsional — tanpa media type, browser menganggap all. Kini yang paling sering dipakai adalah screen dan print.
3. Media feature: kondisi yang diuji, selalu ditulis dalam kurung. min-width: 1024px berarti “viewport minimal 1024px”; max-width: 767px berarti “viewport maksimal 767px”.

Ketika kondisi terpenuhi, aturan di dalam blok diterapkan seolah-olah ditulis di tempat itu juga — aturan berikutnya dalam urutan source dapat menimpanya sesuai aturan cascade yang telah kita pelajari.

Halaman nyata biasanya memuat banyak media query, dan semuanya tidak saling menunggu: setiap blok dievaluasi terhadap viewport yang sama. Dua blok yang kondisinya aktif bersamaan berlaku keduanya, dan urutan penulisan menentukan pemenang bila keduanya mengatur properti yang sama. Karena itu media query paling aman diletakkan tepat setelah gaya dasar komponennya — bukan dikumpulkan jauh di akhir file — agar pembaca kode melihat pasangan dasar dan penyesuaiannya berdampingan.

Menggabungkan Kondisi: and, not, dan Koma #

Lebih dari satu kondisi dapat digabungkan dengan tiga operator:

/* rentang: hanya tablet kecil hingga 900px */
@media (min-width: 600px) and (max-width: 900px) {
  .rentang { color: rgb(217, 119, 6); }
}

/* OR: ponsel sempit ATAU desktop lebar */
@media (max-width: 500px), (min-width: 1200px) {
  .atau { color: rgb(124, 58, 237); }
}

Dua catatan tentang operator: pertama, koma berperilaku seperti OR — masing-masing kondisi dievaluasi sendiri-sendiri dan hasilnya dijumlahkan. Kedua, not menegasikan media query secara keseluruhan, sehingga harus diikuti media type (not all and ... adalah bentuk yang lazim); bila syarat aslinya terpenuhi, blok not menjadi tidak aktif.

Media Features di Luar Lebar Layar #

min-width dan max-width hanyalah dua dari puluhan media features . Dua yang paling sering dipakai untuk kualitas:

/* hormati preferensi pengguna yang mengurangi gerakan */
@media (prefers-reduced-motion: reduce) {
  .animasi { animation: none; }
}

/* teaser dark mode */
@media (prefers-color-scheme: dark) {
  .kartu { background: rgb(15, 23, 42); color: rgb(226, 232, 240); }
}

prefers-reduced-motion membaca setelan sistem pengguna dan menjadi cara baku untuk mematikan animasi bila diminta — kebiasaan ini wajib menyertai setiap animasi yang kita buat. Sementara itu, prefers-color-scheme membuka jalan menuju dark mode yang kita singgung lebih dalam pada section tema; untuk hari ini cukup dikenali bahwa media query mampu membaca preferensi, bukan hanya ukuran.

Hasil di Browser:

Viewport harness 1280x720:
- baris min-width: 1024px  -> aktif, warna teks rgb(2, 132, 199)
- baris max-width: 767px   -> tidak aktif, warna tetap rgb(13, 148, 136)
- baris rentang 600-900px  -> tidak aktif, warna tetap rgb(71, 85, 105)
- baris koma (OR)          -> aktif lewat syarat min-width: 1200px, warna rgb(124, 58, 237)
- baris not ...            -> tidak aktif, warna tetap rgb(71, 85, 105)

Dengan sintaks @media di tangan, pertanyaan berikutnya adalah nilai berapa yang dipakai sebagai titik perubahan. Pertanyaan pemilihan itulah topik Chapter Breakpoints.