Progressive Enhancement

Fitur-fitur pada section ini merilis di waktu yang berbeda-beda: sebagian telah Baseline sejak 2022, sebagian baru menjangkau seluruh browser utama pada akhir 2025, dan sebagian kecil masih terbatas pada browser tertentu. Halaman yang ditulis dengan asumsi “semua browser pasti mendukung” berisiko tampil rusak bagi sebagian pengunjung, sementara menahan diri dari fitur modern berarti meninggalkan kemampuan yang bermanfaat. Progressive enhancement menawarkan jalan tengah: tulis gaya dasar yang bekerja di mana saja terlebih dahulu, lalu tambahkan peningkatan di dalam blok @supports agar hanya berlaku pada browser yang sanggup. Chapter ini merangkum pola tersebut menjadi kebiasaan yang dapat kita terapkan pada setiap stylesheet.

Prinsip Berlapis #

Urutan penulisan menentukan semuanya: gaya dasar ditulis tanpa syarat, peningkatan ditulis di dalam @supports. Ketika browser membaca stylesheet, browser yang tidak mengenali kondisi akan melewati blok peningkatan dan tetap menerima gaya dasar utuh. Empat strategi berikut mencakup sebagian besar kebutuhan:

Dua kebiasaan menjaga strategi ini tetap sehat. Pertama, @supports menguji dukungan properti atau nilai, bukan nama browser — jangan pernah menyaring berdasarkan user-agent, karena daftar itu cepat usang. Kedua, gaya dasar harus benar-benar layak dipakai: pengguna browser lama tidak boleh menerima halaman “setengah jadi”, melainkan versi sederhana yang utuh.

Contoh Gabungan: Kartu Produk Berlapis #

Demo chapter ini menyatukan dua peningkatan pada satu komponen — unit dvh dan container query — di atas gaya dasar yang berdiri sendiri:

.hero {
  padding: 24px;
  background-color: rgb(15, 23, 42);
  color: rgb(226, 232, 240);
  min-height: 320px;
}

@supports (height: 100dvh) {
  .hero { min-height: 100dvh; }
}

.kartu-produk {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(203, 213, 225);
  border-radius: 12px;
  background-color: rgb(255, 255, 255);
  color: rgb(51, 65, 85);
}

@supports (container-type: inline-size) {
  .pembungkus-kartu { container-type: inline-size; }

  @container (min-width: 360px) {
    .kartu-produk { flex-direction: row; align-items: center; }
  }
}

Mari kita telaah lapisannya:

1. .hero tanpa syarat: latar gelap, teks terang, dan min-height: 320px — nilai aman yang berlaku di browser apa pun. Inilah versi utuh versi sederhana.
2. Blok @supports (height: 100dvh): pada browser yang mengenal unit dinamis, tinggi hero mengikuti viewport yang benar-benar terlihat — pola dari Chapter Viewport Units . Browser lama tetap memakai 320px.
3. .kartu-produk tanpa syarat: susunan kolom vertikal yang tetap benar di mana saja; deklarasi layout dasar tidak pernah diubah oleh peningkatan.
4. Blok @supports (container-type: inline-size): wadah kartu menjadi container, lalu container query di dalamnya menyusun ulang isi kartu menjadi baris horizontal bila wadah berukuran 360px ke atas. Perhatikan bahwa query menunjuk .kartu-produk, bukan wadahnya — aturan @container tidak dapat menata elemen container itu sendiri, hanya keturunannya (mekanisme lengkapnya ada pada Chapter Container Size Queries ). Di browser tanpa container query, kartu tetap tersusun vertikal — kontennya tetap terbaca semua.

Checklist Menulis Stylesheet Berlapis #

Sebelum menyerahkan komponen baru, jalankan urutan pemeriksaan berikut. Pertama, matikan semua blok @supports dalam pikiran: apakah halaman tetap tampil utuh dan seluruh konten terbaca? Kedua, setiap klaim fitur pada CSS — properti baru, unit baru, selector baru — apakah di dalam blok @supports atau memiliki fallback nilai pada deklarasi sebelumnya? Ketiga, pada tabel strategi di atas, apakah pola yang dipakai adalah pola yang tepat untuk jenis fiturnya? Demi pemeliharaan jangka panjang, dokumentasikan pula di komentar kapan blok peningkatan dapat dihapus — misalnya “hapus setelah baseline 2023 penuh”.

Demo: Gaya Dasar Aktif, Peningkatan Menyusul #

<section class="hero" data-expected='{"padding-top":"24px","color":"rgb(226, 232, 240)","min-height":"720px"}'>
  <h2>Sorotan Pekan Ini</h2>
</section>
<div class="pembungkus-kartu">
  <div class="kartu-produk" data-expected='{"color":"rgb(51, 65, 85)","flex-direction":"row","padding-top":"16px"}'>
    <h3>Meja Kayu Jati</h3>
    <p>Deskripsi produk yang tetap terbaca di semua susunan.</p>
  </div>
</div>

Hasil di Browser:

Hero menampilkan latar gelap dengan padding 24px — gaya dasar yang
berlaku di semua browser; pada lingkungan uji 1280x720 yang mendukung
dvh, min-height hero tercatat 720px (100dvh).
Kartu produk menampilkan teks abu-abu gelap (color: rgb(51, 65, 85))
dari gaya dasar; karena wadah kartu berukuran 400px dan browser uji
mendukung container query, flex-direction tercatat "row" — hasil
peningkatan.

Demo lengkap membawa atribut data-expected pada hero dan kartu, memverifikasi bahwa gaya dasar aktif dan peningkatan berlaku sesuai dukungan browser uji.