Semua sanggup mengubah tampilannya dengan CSS3.
Cepatnya perkembangan CSS3 menciptakan penyedia broser untk mendukung property CSS yang belum sepenuhnya menjadi standar W3C.
Untuk property CSS ibarat ini, broser menggunakan CSS Vendor Prefix.
Apa itu CSS Vendor Prefix? kali ini Abdi akan menjelaskan setips ringkas wacana Pengertian CSS Vendor Prefix Dan Trik Penulisannya.
Pengertian CSS Vendor Prefix
Vendor Prefix adlah sebutan untk menambahkan huruf khusus di awal penulisan property, terutama untk property CSS3 terbaru.Misalnya untk property
background:linear-gradient(top, red, blue);, bila menggunakan Vendor Prefix akan menjadi ibarat 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 broser mempunyai perbedaan dalam penulisan Vendor Prefix, nanti akan Abdi bahas di belahan berikutnya.
Apakah Harus Menggunakan CSS Vendor Prefix?
Seiring dengan cepatnya perkembangan CSS3, menciptakan penyedia broser 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 sanggup di setujui.
Property yang belum di setujui ini di terapkan oleh broser masing-masing, dengan tujuan untk di uji coba oleh WEB progmemory rammer di seluruh dunia.
Ketika property gres tersebut di setujui oleh W3C, maka penambahan Vendor Prefix akan di hapus.
Apakah Harus Menggunakan CSS Vendor Prefix?
Kalau property yang teman pakai belum di setujui oleh W3C maka teman harus menambahkan Vendor Prefix.
Jika sudah di setujui maka teman tidak lagi harus menambahkan Vendor Prefix.
Penulisan Vendor Prefix
Vendor Prefix ditambahkan di awal penulisan property dan penulisan Vendor Prefix harus sesuai dengan broser masing-masing.Berikut ini adlah awalan Vendor Prefix pada setiap broser :
-WEBkit- : Google dan Safari-moz- : Firefox.-o- : Opera.-ms- : Internet Explorer.Berikut ini pola 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 dipakai untk menciptakan gradasi warna.Tapi property tersebut belum disetujui W3C (pada ketika article ini di tulis), sehingga ketika kita buka skrip tersebut di broser, maka tidak akan sanggup menampilkan gradasi warna.
Untuk itu teman harus menambahkan Vendor Prefix di depan property
background: linear-gradient(top, red, blue);.Maka karenanya akan ibarat 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);, alasannya yaitu ketika property itu sudah di setujui dan sudah di terapkan di broser, maka property ini akan menimpa property yang sebelumnya menggunakan Vendor Prefix.Dengan demikian tampilan gradasi warna sama untk setiap broser.
Ketika skrip tersebut di jalankan di broser, karenanya akan ibarat ini :
Penambahan Vendor Prefix di awal property memang sedikit merepotkan, alasannya yaitu teman harus menuliskan 5 kali property yang sama.
Jika property tersebut sudah di setujui, teman tidak harus lagi menambahkan Vendor Prefix di awal property. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment