Gak semua browser paham semua fitur CSS, apalagi fitur yang baru. @supports bertanya ke browser: "kamu paham ini?" Kalau iya, CSS di dalamnya dipakai. Kalau gak, seluruh isinya dilewati. Kayak nanya "ada microwave?" sebelum memutuskan cara memanaskan makanan.
🧪 Tebakan cepat:
@supports (dispaly: grid), dengan salah ketik di nama propertinya. Isinya dipakai atau dilewati? Tebak dulu, jawabannya ada di bagian "Yang bisa ditanyakan".
Tanya browser sebelum pakai
.kotak {
background: red;
}
@supports (display: grid) {
.kotak {
background: green;
}
}
.kotak { background: red; }ada di luar, jadi berlaku di semua browser.@supportsadalah pertanyaannya.(display: grid)adalah kondisinya: satu deklarasi lengkap, properti dan nilai, di dalam kurung. Browser mengecek apakah dia paham pasangan itu.{ ... }sesudahnya cuma dipakai kalau jawabannya iya. Isinya CSS biasa.
Hasilnya, browser yang paham grid menampilkan kotak hijau, karena aturan di dalam @supports ditulis belakangan dan menimpa yang merah. Browser yang gak paham tetap menampilkan merah.
Fallback dulu, upgrade belakangan
Pola yang paling sering dipakai: tulis versi yang jalan di semua browser dulu (fallback), lalu versi yang lebih bagus di dalam @supports.
.galeri {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.galeri {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
Semua pengunjung dapat galeri yang jalan, dan browser yang paham grid dapat versi yang lebih rapi. Urutannya penting: fallback di atas, @supports di bawah, supaya upgrade-nya yang menimpa.
Yang bisa ditanyakan
- Deklarasi:
@supports (aspect-ratio: 1). Harus lengkap dengan nilainya. Jawaban tebakan:(dispaly: grid)gak dikenal browser, jadi kondisinya salah dan isinya dilewati. - Selector:
@supports selector(:has(*))bertanya apakah browser paham selector:has(). not:@supports not (display: grid) { ... }dipakai cuma kalau browser gak paham.anddanor:@supports (display: grid) and (gap: 1rem)butuh keduanya dipahami,orcukup salah satu.
@supports atau @media?
@media bertanya soal device: lebar layar, orientasi, mode gelap. @supports bertanya soal browser: fitur CSS apa yang dia pahami. Layar lebar belum tentu browsernya paham grid, jadi dua pertanyaan ini gak bisa saling menggantikan.
⚠️ Jebakan yang sering ketemu
- Cuma menulis nama properti.
@supports (gap)selalu dianggap gak didukung, jadi isinya gak pernah dipakai. Tulis dengan nilainya:@supports (gap: 1rem). - Mencampur
anddanortanpa kurung.(a) and (b) or (c)gak valid. Kelompokkan dulu:(a) and ((b) or (c)). - Paham bukan berarti bebas bug.
@supportscuma mengecek browser bisa membaca deklarasinya, bukan bahwa hasilnya pasti sempurna. Tetap cek tampilannya di browser yang kamu targetkan.
💡 Dari JavaScript juga bisa.
CSS.supports("display", "grid")menanyakan hal yang sama dan mengembalikantrueataufalse.
TL;DR: @supports (properti: nilai) { ... } memakai isinya cuma kalau browser paham deklarasi itu. Tulis fallback dulu, lalu upgrade di dalam @supports. Bisa juga bertanya soal selector dengan selector(...), dan menggabungkan kondisi dengan and, or, not. @media bertanya soal device, @supports soal fitur browser.
