@media bertanya tentang device (lebar layar, preferensi user). @supports bertanya tentang browser — fitur CSS apa yang didukung. Pola penting untuk progressive enhancement: fallback dulu, baru upgrade kalau memungkinkan.

/* Fallback — selalu dipakai */
.galeri {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Upgrade kalau browser mendukung grid */
@supports (display: grid) {
  .galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

Cek feature apa saja:

@supports (aspect-ratio: 1) { ... }
@supports (color: oklch(70% 0.15 200)) { ... }
@supports selector(:has(*)) { ... }

Operator logika:

/* Dua-duanya didukung */
@supports (display: grid) and (gap: 1rem) { ... }

/* Salah satu didukung */
@supports (display: grid) or (display: -ms-grid) { ... }

/* Tidak didukung */
@supports not (display: grid) {
  .fallback-khusus { ... }
}

Beda vs vendor prefix / can-I-use:

• Vendor prefix (-webkit-) = tebakan statik, sering usang.
• caniuse.com = referensi saat coding, tidak berjalan di browser.
• @supports = cek real-time di browser yang sedang menjalankan, sehingga selalu akurat untuk user tersebut.

🎭 Analogi sehari-hari

Pernah masak di rumah temen yang dapurnya seadanya? Kamu otomatis nanya dulu: "ada microwave gak? Kalo ada, panasin di situ; kalo gak ada, pake kompor aja." Resep tetep jadi, cuma metode adapt ke alat yang tersedia. @supports itu cara CSS nanya hal sama ke browser: "kamu support grid gak? Kalo iya pake grid yang rapi; kalo enggak pake flexbox yang udah pasti jalan." User jadi dapet versi terbaik yang browser-nya sanggup, tapi yang pake browser jadul tetep bisa pake aplikasinya — ini namanya progressive enhancement.

⚠️ Jebakan yang sering ditemui

• @supports (property: value) sintaks — ingat butuh nilai konkret, bukan cuma property name.
• @supports not (...) untuk fallback IE/legacy — jadi @supports not (display: grid).
• @supports selector(:has(*)) untuk cek selector support (newer).
• Browser di-rely pada @supports = bug-free vs vendor prefix = lebih reliable.
• Combine: @supports (display: grid) and (gap: 1rem).
• JavaScript CSS.supports("display", "grid") untuk JS feature detection.

TL;DR: @supports = cek fitur CSS browser di runtime — pondasi progressive enhancement. Beda dari @media yang cek device. Sintaks: @supports (property: value) { ... }. Operator: and, or, not. @supports selector(:has(*)) cek selector. Lebih reliable dari vendor prefix atau caniuse statik. Pattern: tulis fallback dulu (flexbox), @supports upgrade ke fitur modern (grid). JS equivalent: CSS.supports("display", "grid").