Pengertian Vendor Prefix Dan Cara Penulisannya

Pembuatan HTML saat ini sangat beragam, mulai dari mengubah tampilan warna teks, memakai gradasi warna dan lain-lainnya.

Semua bisa mengubah tampilannya dengan CSS3.

Cepatnya perkembangan CSS3 membuat penyedia browser untuk mendukung property CSS yang belum sepenuhnya menjadi standar W3C.

Untuk property CSS seperti ini, browser menggunakan CSS Vendor Prefix.

Apa itu CSS Vendor Prefix? kali ini Abdi akan menjelaskan secara ringkas tentang Pengertian CSS Vendor Prefix Dan Cara Penulisannya.

Pengertian CSS Vendor Prefix

Vendor Prefix adalah sebutan untuk menambahkan karakter khusus di awal penulisan property, terutama untuk property CSS3 terbaru.

Misalnya untuk property background:linear-gradient(top, red, blue);, jika menggunakan Vendor Prefix akan menjadi seperti ini -webkit-background: linear-gradient(top, red, blue);.

Terdapat penambahan -webkit- di depan background: linear-gradient(top, red, blue);.

-webkit- inilah yang di sebut dengan Vendor Prefix.

Setiap browser memiliki perbedaan dalam penulisan Vendor Prefix, nanti akan Abdi bahas di bab berikutnya.

Apakah Harus Menggunakan CSS Vendor Prefix?

Seiring dengan cepatnya perkembangan CSS3, membuat penyedia browser berlomba-lomba menerapkan property CSS terbaru yang belum disetujui oleh W3C.

Dalam istilah W3C, property yang belum disetujui ini masuk dalam status Draft yang artinya sewaktu-waktu bisa di setujui.

Property yang belum di setujui ini di terapkan oleh browser masing-masing, dengan tujuan untuk di uji coba oleh web programmer di seluruh dunia.

Ketika property baru tersebut di setujui oleh W3C, maka penambahan Vendor Prefix akan di hapus.

Apakah Harus Menggunakan CSS Vendor Prefix?

Kalau property yang sobat pakai belum di setujui oleh W3C maka sobat harus menambahkan Vendor Prefix.

Jika sudah di setujui maka sobat tidak lagi harus menambahkan Vendor Prefix.

Penulisan Vendor Prefix

Vendor Prefix ditambahkan di awal penulisan property dan penulisan Vendor Prefix harus sesuai dengan browser masing-masing.

Berikut ini adalah awalan Vendor Prefix pada setiap browser :

-webkit- : Chrome dan Safari
-moz- : Firefox.
-o- : Opera.
-ms- : Internet Explorer.

Berikut ini contoh tanpa menggunakan Vendor Prefix :

<!DOCTYPE html>
<html>
<head>
    <title> Demo </title>
<style>
.myBox{
      width: 100px;
      height: 100px;
      padding: 30px;
      background: linear-gradient(top, red, blue);
   }
</style>
</head>
<body>
    <div class="myBox"></div>
</body>
</html>
Property linear-gradient digunakan untuk membuat gradasi warna.

Tapi property tersebut belum disetujui W3C (pada saat artikel ini di tulis), sehingga ketika kita buka skrip tersebut di browser, maka tidak akan bisa menampilkan gradasi warna.

Untuk itu sobat harus menambahkan Vendor Prefix di depan property background: linear-gradient(top, red, blue);.

Maka hasilnya akan seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title> Demo </title>
<style>
.myBox{
      width: 100px;
      height: 100px;
      padding: 30px;
      background: linear-gradient(top, red, blue);
      background: -webkit-linear-gradient(top, red, blue);
      background: -moz-linear-gradient(top, red, blue);
      background: -o-linear-gradient(top, red, blue);
      background: -ms-linear-gradient(top, red, blue);
   }
</style>
</head>
<body>
    <div class="myBox"></div>
</body>
</html>

Abdi sengaja tidak menghapus property linear-gradient(top, red, blue);, karena saat property itu sudah di setujui dan sudah di terapkan di browser, maka property ini akan menimpa property yang sebelumnya menggunakan Vendor Prefix.

Dengan demikian tampilan gradasi warna sama untuk setiap browser.

Ketika skrip tersebut di jalankan di browser, hasilnya akan seperti ini :


Penambahan Vendor Prefix di awal property memang sedikit merepotkan, karena sobat harus menuliskan 5 kali property yang sama.

Jika property tersebut sudah di setujui, sobat tidak harus lagi menambahkan Vendor Prefix di awal property.

Comments

Popular posts from this blog

20 Template Blogger SEO Friendly dan Responsive Gratis

Cara Menginstall Phoenix OS Pada Windows 10

Cara Menghapus Antivirus Avast Dengan Benar

Cara Mengatur Posisi dan Tampilan Gambar di HTML

Cara Membuat Bootable USB Flashdisk Windows 10 Menggunakan Rufus

Cara Memblokir Akses Internet Aplikasi Windows 10 Tanpa Aplikasi Pihak Ketiga

4 Template Blogger Buatan Mas Sugeng Yang Dibagikan Secara Gratis

7 Aplikasi Pemutar Video Terbaik Untuk PC/Laptop

41 Latar Belakang Abu-abu Yang Cocok Untuk di Desain

Kumpulan Pantun Jenaka