Vendor Prefixes Pada CSS3
Vendor Prefixes Pada CSS3 – Karena property CSS3 sifatnya masih experimental seperti yang saya pernah catat dan singgung, ketika saya mulai mencatat pengenalan CSS3. Sehingga tidak semua sintak property CSS3 bisa bekerja atau compatible pada setiap browser. Hal tersebut terjadi karena setiap browser memiliki karakteristik yang berbeda. Perlu diketahui bahwa setiap browser yang ada memiliki cara yang berbeda dalam menangani setiap sintak CSS. Agar semua sintak CSS bisa kompatible atau bisa bekerja di setiap browser, kita membutuhkan suatu teknik khusus untuk mengakali kendala-kendala tersebut dengan menggunakan suatu teknik yang disebut Vendor Prefixes. Teknik Vendor Prefixes diimplementasikan dengan menggunakan sintak khusus/spesifik yang harus ditambahkan di setiap awal beberapa property CSS3 yang blm kompatible atau belum bisa bekerja di semua browser. Sintak khusus/spesifik yang digunakan sebagai vendor prefixes pada tiap browser akan berbeda berbeda. Vendor diartikan sebagai browser, seperti Google Chrome, Safari, Opera, Mozilla, Internet Explorer. Sedangkan Prefixes adalah awalan sebagai sintak khusus/spesifik yang harus ditambahkan di awal sintak property CSS3 yang tidak kompatible pada setiap browser. Berikut sintak spesifik/khusus yang disebut sebagai Vendor Prefixes.
Alasan kenapa kita membutuhkan Vendor Prefixes, karena tidak semua browser support semua property CSS3. Namun seiring dengan berjalannya waktu, setiap browser akan selalu memperbaiki dan meng-update browsernya. Sehingga kedepannya untuk beberapa property CSS3 sudah tidak membutuhkan vendor prefixes lagi. Sebagai contoh, dahulu ketika kita ingin menggunakan border radius, text shadow, box shadow maka kita harus menambahkan vendor prefixes di awal property CSS3 tersebut. Namun sekarang ketika kita ingin menggunakan property CSS3 tersebut, kita tidak lagi membutuhkan vendor prefixes karena setiap browser sudah support property CSS3 tersebut. Karena hal tersebut, ada baiknya kita selalu mengupdate setiap browser yang ada pada perangkat kita. Bahkan akan lebih baik kalau kita memilikinya semua browser pada perangkat kita, sehingga kita tahu perbedaan dari masing-masing browser tersebut.
Untuk masing-masing vendor prefixes seperti gambar di atas memiliki fungsi yang berbeda untuk setiap browser. Agar lebih jelas, silakan lihat penjelasan dibawah ini:
● -webkit- : vendor-prefixes yang digunakan untuk google chrome, safari, dan opera versi terbaru.
● -moz- : vendor-prefixes yang digunakan untuk mozila firefox.
● -ms- : vendor-prefixes yang digunakan untuk internet explorer.
● -o- : vendor-prefixes yang digunakan untuk opera versi terdahulu.
Jadi tidak semua Vendor Prefixes harus digunakan pada satu property CSS3 yang kita pakai. Karena ada kalanya satu property CSS3 sudah jalan di browser tertentu, tapi tidak jalan di browser lain. sebagai contoh apabila ada satu property CSS3 yang jalan pada browser mozilla firefox dan google chrome, namun tidak jalan di safari, opera, internet explorer. Maka kita hanya membutuhkan vendor prefixes –webkit-, -ms-, -o-, sedangkan untuk –moz- kita tidak perlu. Perhatikan contoh penggunaan vendor prefixes untuk property CSS3 filter pada tag HTML <img> agar bisa bekerja di semua browser untuk menampilkan image dengan efek grayscale atau keabu-abuan. Contoh di bawah menunjukkan tidak semua vendor prefixes digunakan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vendor Prefixes</title>
<style>
body {
text-align: center;
}
img {
-webkit-filter: grayscale(100%) ;
-o-filter: grayscale(100%) ;
filter: grayscale(100%) ;
}
</style>
</head>
<body>
<img src="img/baby.png" alt="baby" title="baby">
</body>
</html>
Lalu bagaimana kita bisa tahu, property-property pada CSS3 bisa jalan di semua browser atau browser tertentu saja. Karena itu kita perlu tahu property-property CSS3 apa saja yang membutuhkan vendor prefixes. Berikut beberapa referensi website yang bisa membantu kita menentukan suatu property CSS3 perlu vendor prefixes atau tidak :
pada website ini kita bisa mengetahui property CSS3 apa saja yang membutuhkan vendor prefixes. Dalam website tersebut kita hanya perlu mencari dan melihat list property CSS3. Apabila satu list property CSS3 berwarna hijau, maka property tersebut tidak memerlukan vendor prefixes. Sedangkan apabila berwarna biru, maka property CSS3 tersebut memerlukan vendor prefixes. Kemudian kita tinggal buka saja property tersebut dan copy paste sintak tersebut kedalam code editor kita.
Pada halaman website ini kita bisa mendapatkan informasi yang lebih lengkap, browser apa saja yang support suatu property CSS3. Kita tinggal masukkan nama property CSS3 yang ingin kita gunakan pada kotak pencarian. Kemudian kita akan langsung diberikan hasilnya. Seperti contoh gambar dibawah ini. kita bisa tahu apakah browser IE, Edge, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, dan Chrome For Android, apakah support property CSS3 tersebut atau tidak, dengan melihat warna kotaknya. Berikut keterangan warna kotaknya:
→ Kotak Warna Merah artinya property CSS3 tersebut tidak disupport oleh browser tersebut.
→ Kotak Warna Hijau Lumut artinya property CSS3 tersebut tidak disupport secara penuh ( partial support ) oleh browser tersebut.
→ Kotak Warna Hijau artinya property CSS3 tersebut disupport penuh oleh browser tersebut.
→ Kotak Warna Hijau dengan kotak kuning kecil di bagian ujung kanan atas artinya property CSS3 tersebut disupport oleh browser tersebut, namun sintaknya harus menggunakan vendor prefix.
→ Angka-angka yang ada pada setiap kotak adalah versi dari sebuah browser.
Pada website ini akan sangat lebih memudahkan kita, karena kita tidak perlu menghafal property CSS3 mana saja yang membutuhkan vendor prefixes atau tidak. Kita tinggal menuliskan sintak CSS kita di bagian kotak sebelah kiri, kemudian website ini akan otomatis menerjemahkan dan hasilnya ada langsung pada kotak sebelah kiri seperti pada contoh di bawah ini :
● Pakai plugin emmet
Menginstall plugin emmet akan sangat memudahkan kita untuk memberikan vendor prefixes pada suatu property CSS3 secara otomatis. Setelah plugin emmet terinstall pada perangkat komputer. Kita bisa langsung menggunakannya dengan mengetikkan nama property CSS3 yang ingin kita gunakan, selanjutnya sebelum tanda titik 2 ( : ), tekan satu kali tab, lalu secara otomatis sintak vendor prefixes sudah ada pada awal property CSS3 dan setelah itu kita tinggal mengisi nilai property CSS3 tersebut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vendor Prefixes</title>
<style>
body {
text-align: center;
}
img {
-webkit-filter: grayscale(100%) ;
-o-filter: grayscale(100%) ;
filter: grayscale(100%) ;
}
</style>
</head>
<body>
<img src="img/baby.png" alt="baby" title="baby">
</body>
</html>
Catatan mengenai Vendor Prefixes ini sekian dulu, semoga ini bisa membantu untuk penggunaan property CSS3 pada tingkat lebih lanjut. Karena penggunaan property CSS3 ini akan sangat membantu agar website kita menjadi lebih interaktif dan menarik. Sayang kalau kita sudah membuat website sangat bagus, tapi hasilnya tidak kompatible pada semua web browser.
Happy blogging guys 😋😋😉 ...
Post a Comment for "Vendor Prefixes Pada CSS3"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan