Tutorial Belajar CSS3: Pengertian CSS Vendor Prefix dan Cara Penulisannya

Posted on

Majunya 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 sebetulnya CSS Vendor Prefix? Di panduan belajar CSS3 di Source Code Program ini saya akan mencoba menjelaskan secara ringkas mengenai Pengertian CSS Vendor Prefix dan Cara Penulisannya.


Pengertian CSS Vendor Prefix

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


Kenapa mesti menggunakan CSS Vendor Prefix?

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

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

Di awalnya, property dengan vendor prefix tak diperuntukkan untuk laman live, tapi hanya untuk uji coba. Ketika spesifikasi W3C masuk ke tahap rekomendasi (yaitu ketika property tersebut telah dianggap selesai), tambahan vendor prefix pun akan dihapus.

Masalahnya, banyak web developer yang tak sabar menunggu property ini resmi dirilis dan memilih untuk seketika menggunakannya. Oleh karena itu, kalau kita ingin menggunakan property CSS3 yang masih baru mesti dibangun menggunakan vendor prefix.


Cara Penulisan Vendor Prefix

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

Berikut yaitu awalan vendor prefix di 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:

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

Di baris terakhir terdapat penulisan property ‘resmi’, yakni tanpa vendor prefix. Ini dipersiapkan agar ketika property tersebut telah dinyatakan stabil (telah didukung penuh), nilai dari property ini akan menimpa efek sebelumnya (yang menggunakan vendor prefix). Dengan demikian, hasil yang di dapat akan seragam di 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. Kalau property tersebut telah selesai, kita dapat ‘membuang’ bagian vendor prefix dan menggunakan nama property resmi.


Sumber https://www.duniailkom.com/