SEBERAPA SIAP BROWSER ANDA? KOMPATIBILITAS CSS 3

Salah satu pertanyaan yang paling sering saya dapat adalah “seberapa kompatibel browser sekarang dengan CSS 3?”

Jawabannya: Cukup kompatibel untuk anda pakai dengan sesuka hati, selama fungsionalitas keseluruhan anda nggak tergantung sama fitur CSS 3 tersebut.

Pertama, untuk anda yang senang dengan detail lengkap, anda bisa menemukan daftar kompatibilitas CSS 3 dengan browser dengan detail di quirksmode dan kompatibilitas RGBA di CSS Tricks.

EFEK CSS 3

border-radius didukung oleh hampir semua browser utama kecuali Internet Explorer (siap-siap untuk banyak mendengar kalimat seperti di atas, IE memang paling lamban di antara mereka semua).

• Firefox membutuhkan awalan: -moz-border-radius


• Webkit (Safari) membutuhkan awalan: -webkit-border-radius


• Opera, Chrome, dan, semoga, IE 9, tidak membutuhkan awalan: border-radius


• box-shadow hampir sama seperti border-radius: didukung browser utama kecuali Internet Explorer versi 8 ke bawah.


• Firefox membutuhkan awalan: -moz-box-shadow


• Webkit (Safari) dan Chrome membutuhkan awalan: -webkit-box-shadow (ya, chrome numpang di sini)


• Opera dan, semoga, IE 9, tidak membutuhkan awalan: box-shadow


• text-shadow, yang paling beruntung, diterima oleh semua browser utama — kecuali, ya, Internet Explorer (bahkan 9 sekalipun) — dalam bentuk mentahnya, text-shadow.

FITUR WARNA RGBA

Sistem RGBA juga telah didukung oleh mayoritas browser saat ini (credit kepada CSS Tricks):

• Firefox 3 ke atas


• Google Chrome


• Safari 3 ke atas


• Safari untuk mobile


• Opera 10 ke atas


• Internet Explorer 9 (masih beta)

Untuk sisa browsernya (versi lama dari Firefox, Opera, Safari dan IE), pernyataan rgba() diterima, tapi fungsi alpha (transparan, angka keempat) tidak diterima dengan benar. Hasilnya, warna tidak dapat menjadi transparan. Hanya IE 5.5 ke bawah (astaga) yang sama sekali menolak rgba().

Kesimpulannya, anda bebas memakai RGBA sesuka hati, asal nggak membuat website anda tergantung sama fitur itu. Dalam kebanyakan kondisi, kehilangan transparansi masih bisa ditoleransi, jadi pastikan website anda mendukung itu.