Pengertian Vendor Prefix Dan Cara Penulisannya
October 10, 2017
Add Comment
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.
Misalnya untuk property
Terdapat penambahan
Setiap browser memiliki perbedaan dalam penulisan Vendor Prefix, nanti akan Abdi bahas di bab berikutnya.
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.
Berikut ini adalah awalan Vendor Prefix pada setiap browser :
Berikut ini contoh tanpa menggunakan Vendor Prefix :
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
Maka hasilnya akan seperti ini :
Abdi sengaja tidak menghapus property
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.
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>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.
0 Response to "Pengertian Vendor Prefix Dan Cara Penulisannya"
Post a Comment