Tutorial Belajar CSS3: Pengertian CSS Vendor Prefix dan Cara Penulisannya

Pesatnya perkembangan modul-modul CSS3 memaksa perusahaan pembuat web browser untuk mendukung property CSS yang belum sepenuhnya menjadi standar W3C. Untuk property seperti ini, web browser memilih menggunakan CSS Vendor Prefix.

Apa sebenarnya CSS Vendor Prefix? Dalam tutorial belajar CSS3 di duniailkom ini saya akan mencoba menjelaskan secara ringkas tentang Pengertian CSS Vendor Prefix dan Cara Penulisannya.

Pengertian CSS Vendor Prefix

Vendor prefix adalah sebutan untuk penambahan beberapa karakter khusus di awal penulisan property, terutama untuk property CSS3 terbaru. Sebagai contoh, untuk property column-count, jika menggunakan vendor prefix ditulis menjadi: -webkit-column-count.

Kenapa harus menggunakan CSS Vendor Prefix?

Seiring dengan cepatnya perkembangan CSS3, web browser seolah-olah berlomba untuk mengimplementasikan berbagai property baru yang belum resmi disetujui badan standarisasi web: W3C. Dalam istilah W3C, property yang belum standar ini bisanya berada dalam status draft, dan bisa berubah sewaktu-waktu.

Property yang belum 'selesai' ini diimplementasikan oleh web browser menggunakan vendor prefix. Dengan tujuan, property ini bisa diuji coba oleh programmer web di seluruh dunia.

Pada awalnya, property dengan vendor prefix tidak ditujukan untuk website live, tapi hanya untuk uji coba. Ketika spesifikasi W3C masuk ke tahap rekomendasi (yaitu ketika property tersebut sudah dianggap selesai), tambahan vendor prefix juga akan dihapus.

Masalahnya, banyak web developer yang tidak sabar menunggu property ini resmi dirilis dan memilih untuk langsung menggunakannya. Oleh karena itu, jika kita ingin menggunakan property CSS3 yang masih baru harus dibuat menggunakan vendor prefix.

Cara Penulisan Vendor Prefix

Vendor prefix ditambahkan di awal penulisan property, sesuai dengan inisial web browser.

Berikut adalah awalan vendor prefix pada web browser populer:

• -webkit- (Chrome, dan versi terbaru dari Opera)
• -moz- (Firefox)
• -o- (Opera versi lama)
• -ms- (Internet Explorer)

Berikut contoh cara penulisan CSS Vendor Prefix:

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -o-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
}

Property column-count digunakan untuk membuat kolom koran (multiple column). Sayangnya property ini belum menjadi standar resmi, sehingga belum didukung penuh oleh web browser (pada saat artikel ini ditulis). Karena itu kita harus menulisnya dengan penambahan vendor prefix.

Pada baris terakhir terdapat penulisan property 'resmi', yakni tanpa vendor prefix. Ini dipersiapkan agar ketika property tersebut sudah dinyatakan stabil (sudah didukung penuh), nilai dari property ini akan menimpa efek sebelumnya (yang menggunakan vendor prefix). Dengan demikian, hasil yang di dapat akan seragam pada setiap web browser.

Penambahan property dengan vendor prefix memang sedikit merepotkan. Kode CSS kita menjadi 5 kali lebih panjang, namun ini hanya digunakan untuk property CSS3 yang relatif baru. Jika property tersebut sudah selesai, kita bisa 'membuang' bagian vendor prefix dan menggunakan nama property resmi.