Browser Compatibility

Sebelum memakai fitur CSS baru di proyek, kita perlu satu jawaban singkat: apakah fitur ini sudah berjalan di semua browser utama yang menjadi target pengguna. Menjawabnya dengan cara menebak atau menguji manual di tiap perangkat tidak efisien; ada sumber data yang diperbarui berkala untuk itu. Chapter ini mengkurasi empat sumber tersebut, menjelaskan cara membaca tabel kompatibilitas, dan menetapkan kebiasaan pemeriksaan yang murah tetapi menyelamatkan banyak jam penelusuran.

Empat Sumber Data Dukungan #

Sumber	Tautan	Yang paling membantu
caniuse	https://caniuse.com/	Tabel dukungan per fitur, per versi browser, dengan catatan
MDN Browser compatibility	Bagian “Browser compatibility” di tiap halaman MDN	Dukungan per sub-fitur dari data terbuka
Baseline	https://web.dev/baseline	Label tahun kesiapan: “Baseline 2023” berarti aman dipakai
web-features	https://web-platform-dx.github.io/web-features/	Katalog fitur web dengan status Baseline terkini

Cara paling cepat membaca caniuse : ketik nama fitur pada kolom pencarian, lalu lihat tabel di bagian bawah. Sel berwarna penuh berarti didukung, sel bergaris berarti didukung sebagian (baca catatan kaki), dan sel kosong berarti belum didukung. Dukungan sebagian perlu dibaca teliti: fitur bisa saja aktif hanya setelah pengguna mengubah pengaturan, atau berperilaku berbeda dari spesifikasinya. Di MDN, tabel yang sama berada di bawah setiap halaman properti; tabel itu dibangun dari data kompatibilitas terbuka sehingga selalu relevan dengan halaman yang sedang kita baca.

web-features adalah katalog lintas fitur dari proyek web-platform-dx yang menjadi sumber label Baseline . Karena Course ini sudah membahas Baseline dan pola @supports pada Chapter CSS Specifications dan Browser Support , di sini kita cukup mengingat polanya:

css
.kartu-judul {
  text-align: center; /* fallback: berlaku di semua browser */
}
@supports (text-wrap: balance) {
  .kartu-judul {
    text-wrap: balance; /* peningkatan untuk browser yang mendukung */
  }
}

Hasil di Browser:

text
Pada demo, kartu fallback berlatar abu-abu muda rgb(226, 232, 240),
sedangkan kartu yang dibungkus @supports berlatar biru
rgb(14, 165, 233) karena browser uji mendukung text-wrap: balance.

Kapan Harus Memeriksa Dukungan #

Situasi	Sumber yang dibuka	Tindak lanjut
Ingin memakai properti baru pertama kali	Baseline atau caniuse	Baseline 2023 ke bawah: pakai langsung
Tabel menunjukkan dukungan sebagian	Catatan caniuse + MDN	Tulis fallback, bungkus dengan `@supports`
Fitur masih eksperimental	MDN compat table	Jangan dipakai di produksi
Butuh daftar semua fitur satu area	web-features	Telusuri modul terkait

Bila fitur ternyata tidak didukung di salah satu browser target, strategi penangannya dibahas tuntas pada Chapter Cross Browser Testing . Demo chapter ini menampilkan tabel compat mini beserta probe @supports yang membuktikan pemeriksaan dukungan bisa dilakukan langsung dari CSS.

Hasil di Browser:

text
Tabel compat mini menampilkan empat kolom browser dengan badge
status; badge "Baseline 2023" berlatar teal rgb(13, 148, 136) dan
teks putih pada kedua kartu probe berukuran 160px.