CSS Specifications dan Browser Support

CSS bukan bahasa yang selesai dibangun pada satu hari; setiap tahun muncul properti dan selector baru yang masuk ke browser. Pertanyaannya, siapa yang memutuskan fitur apa yang masuk, dan bagaimana kita — sebagai penulis CSS — mengetahui bahwa sebuah fitur aman dipakai di semua browser? Dua jawaban itu menjadi isi Chapter ini: cara kerja spesifikasi CSS dan cara membaca dukungan browser. Setelahnya, kita mempraktikkan pola yang menjaga halaman tetap berfungsi di browser lama maupun baru.

Siapa yang Merancang CSS: CSS Working Group #

Perkembangan CSS dirancang oleh CSS Working Group (CSSWG), tim yang terdiri dari perwakilan W3C, vendor browser, dan ahli yang diundang. Hasil rancangan mereka ditulis sebagai spesifikasi: dokumen teknis yang mendefinisikan perilaku setiap fitur sedetail mungkin, mulai dari cara diurai hingga hasil yang harus ditampilkan. Draf kerja spesifikasi terbuka untuk dibaca publik di drafts.csswg.org — membacanya sesekali membantu kita memahami niat desain di balik sebuah properti.

Sebuah spesifikasi menempuh beberapa status sebelum dinyatakan matang:

Membaca Dukungan Browser: Baseline dan caniuse #

Sumber data dukungan yang paling praktis adalah dua tempat ini. Pertama, Baseline dari web.dev yang memberi label jelas: fitur berlabel Baseline 2023 berarti telah tersedia di seluruh browser utama sejak tahun tersebut dan aman dipakai. Sebagai contoh nyata, :has() merupakan Baseline sejak 2023 dan dapat dipakai di seluruh browser utama; container queries berukuran (@container dengan inline-size) juga Baseline 2023; sementara text-wrap: balance merupakan Baseline 2024.

Kedua, caniuse.com yang menampilkan tabel dukungan per fitur lengkap dengan catatan kaki per browser, serta tabel compatibility pada setiap halaman MDN yang disusun dari data kompatibilitas terbuka. Kebiasaan yang sehat: sebelum memakai fitur baru di proyek, cek statusnya di salah satu sumber tersebut. Bila fitur belum merata dukungannya, kita tidak membuangnya — kita membungkusnya dengan pola berikut.

Pola @supports untuk Progressive Enhancement #

At-rule @supports menjalankan blok aturan hanya bila browser mendukung kondisi yang diuji. Pola penulisannya selalu berpasangan: sediakan gaya fallback di luar @supports, lalu tulis versi yang lebih modern di dalamnya.

.kotak-demo {
  /* fallback: berlaku di semua browser */
  background-color: rgb(241, 245, 249);
  border: 2px solid rgb(148, 163, 184);
  padding: 16px;
  border-radius: 12px;
}
@supports (container-type: inline-size) {
  .kotak-demo {
    container-type: inline-size;              /* membuka container queries */
    background-color: rgb(220, 252, 231);     /* versi modern */
    border-color: rgb(22, 163, 74);
  }
}

Mari kita telaah pola di atas:

1. Baris 1–7 (.kotak-demo): gaya dasar yang berlaku di semua browser, termasuk browser tanpa dukungan container queries. Halaman tetap rapi dengan latar abu-abu terang dan border abu.
2. Baris 8 (@supports (container-type: inline-size)): browser memeriksa apakah ia mengenal properti container-type dengan nilai tersebut. Properti ini Baseline 2023 sehingga browser modern lolos, sedangkan browser lama melewati seluruh blok tanpa pesan kesalahan.
3. Baris 9–12: hanya dijalankan bila kondisi terpenuhi. Elemen memperoleh container context, latar berubah hijau muda, dan border berubah hijau sebagai penanda bahwa jalur modern aktif.

Hasil di Browser:

Pada browser modern, blok @supports berlaku: kotak demo berlatar hijau
muda rgb(220, 252, 231) dengan border rgb(22, 163, 74) serta membawa
container-type inline-size; label status di dalamnya berwarna
rgb(22, 163, 74) dengan font-weight 700. Padding 16px, sudut membulat
12px, dan nilai fallback tetap menjadi dasar karena ditulis di luar
@supports.