Mengapa hanya sebagian kecil fitur CSS menggunakan vendor prefixes? Vendor prefixes adalah cara yang digunakan oleh pengembang browser untuk menambahkan dukungan pada fitur baru CSS sebelum fitur tersebut sepenuhnya didukung semua browser. Sebagian besar fitur CSS adalah fitur lama yang telah menjadi fitur CSS standar. Fitur CSS standar sudah didukung oleh semua browser jadi tidak perlu menggunakan vendor prefixes lagi ketika digunakan.
1. Mengapa memakai vendor prefixes?
Ketika CSS3 mulai diperkenalkan, banyak fitur baru yang bermunculan. Tidak semua fitur baru ini didukung oleh semua browser. Verdor prefixes kemudian dipakai oleh pengembang browser untuk membantu menggunakan fitur baru CSS agar bisa ditampilkan (rendering) dengan benar di browser. Dibutuhkan waktu yang lama agar fitur baru CSS menjadi fitur CSS standar sehingga tidak diperlukan lagi vendor prefixes.
Memang sedikit menjengkelkan bila harus menulis kode CSS beberapa kali untuk fitur yang sama agar bisa ditampilkan di semua browser. Namun yang pasti, penggunaan vendor prefixes untuk fitur baru CSS tidak akan selamanya. Ketika fitur CSS tersebut telah tersedia untuk semua browser, vendor prefixes tidak digunakan lagi. Anda dapat memeriksa apakah linear-gradient() atau fitur CSS lainnya telah didukung semua browser atau browser versi tertentu melalui website CanIUse.
2. Macam-macam vendor prefixes.
Ada beberapa macam vendor prefixes yang dapat digunakan di CSS. Setiap vendor prefix biasanya spesifik untuk satu atau lebih browser. Berikut ini adalah daftar vendor prefixes dan browser yang menggunakannya:
- -o- untuk browser lama Opera.
- -webkit- untuk browser Google Chrome, Opera versi terbaru dan hampir semua browser iOS.
- -moz- untuk browser Mozilla Firefox.
- -ms- untuk browser Microsoft Internet Explorer dan Microsoft Edge.
3. Menggunakan vendor prefixes.
Dalam penggunaanya, vendor prefixes akan ditulis yang pertama, apapun urutannya dan kemudian diikuti penulisan property CSS normal. Sebagai contoh, untuk membuat gradasi warna linier di CSS agar dapat ditampilkan (rendering) oleh semua browser dengan baik, Anda perlu menulis kode CSS yang menyertakan vendor prefixes dan kode CSS normal sebagaimana contoh berikut ini:
<!DOCTYPE html> <html> <head> <style> #gradredyellow { height: 150px; background-image: -moz-linear-gradient(red, yellow); background-image: -o-linear-gradient(red, yellow); background-image: -ms-linear-gradient(red, yellow); background-image: -webkit-linear-gradient(red, yellow); /* Penulisan CSS normal tanpa vendor prefixes */ background-image: linear-gradient(red, yellow); } </style> </head> <body> <h1>Vendor prefixes.</h1> <p>Menggunakan -moz-, -o-, -ms- dan -webkit- di CSS.</p> <div id="gradredyellow"></div> </body> </html>
Maksud dari penulisan CSS normal diletakkan di paling bawah adalah bila di kemudian hari semua browser telah mendukung fungsi linear-gradient(), maka hanya penulisan CSS normal yang berada di paling bawah yang digunakan. Berikut ini adalah hasil rendering di browser Google Chrome:
