Mengenal vendor (browser) prefixes di CSS

Pernahkan Anda melihat beberapa kode CSS yang diawali dengan -ms-, -moz-, -o- dan -webkit-? Di CSS, -ms-, -moz-, -o- dan -webkit- disebut juga dengan vendor prefixes atau browser prefixes. Bila dilihat, vendor prefixes hanya digunakan di beberapa fitur baru CSS dan tidak di semua fitur. Anda mungkin pernah menjumpai beberapa fitur CSS3 yang menggunakan verdor prefixes ini, misalnya ketika menggunakan fungsi linear-gradient() untuk membuat gradasi warna.

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 telah didukung semua browser jadi tidak perlu menggunakan vendor prefixes lagi ketika digunakan.

Artikel menarik lainnya:

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 tersebut 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.

Macam-macam vendor prefixes.

Ada beberapa macam vendor prefixes yang bisa 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.

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:

Menggunakan vendor (browser) prefixes di CSS

SUKAI DAN BAGIKAN ARTIKEL INI:
Pin It

MASUKKAN EMAIL ANDA UNTUK BERLANGGANAN ARTIKEL GRATIS:

Delivered by FeedBurner