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.

adalah awalan sebagai sintak khusus/spesifik yang harus ditambahkan di awal sintak property CSS3 yang tidak kompatible pada setiap browser

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 pada atas memiliki fungsi yang berbeda buat setiap browser. Agar lebih jelas, silakan lihat penerangan dibawah ini:

? -webkit- : vendor-prefixes yang dipakai buat google chrome, safari, & opera versi terbaru.

? -moz- : vendor-prefixes yg dipakai buat mozila firefox.

? -ms- : vendor-prefixes yang digunakan untuk internet explorer.

? -o- : vendor-prefixes yg digunakan buat 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 sanggup memahami, property-property pada CSS3 sanggup jalan pada seluruh browser atau browser eksklusif saja. Karena itu kita perlu tahu property-property CSS3 apa saja yg membutuhkan vendor prefixes. Berikut beberapa surat keterangan website yg sanggup membantu kita menentukan suatu property CSS3 perlu vendor prefixes atau nir :

https://shouldiprefix.com

pada website ini kita sanggup mengetahui property CSS3 apa saja yg 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 nir memerlukan vendor prefixes. Sedangkan bila berwarna biru, maka property CSS3 tadi memerlukan vendor prefixes. Kemudian kita tinggal buka saja property tadi dan copy paste sintak tadi kedalam code editor kita.

menggunakan vendor prefixes pada website shouldiprefix

https://caniuse.com

Pada laman website ini kita bisa mendapatkan fakta yg lebih lengkap, browser apa saja yg support suatu property CSS3. Kita tinggal masukkan nama property CSS3 yang ingin kita pakai pada kotak pencarian. Kemudian kita akan pribadi diberikan hasilnya. Seperti contoh gambar dibawah ini. Kita sanggup memahami apakah browser IE, Edge, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, dan Chrome For Android, apakah support property CSS3 tadi atau tidak, dengan melihat rona kotaknya. Berikut liputan rona kotaknya:

? Kotak Warna Merah ialah property CSS3 tersebut nir disupport sang browser tadi.

? Kotak Warna Hijau Lumut merupakan property CSS3 tersebut nir disupport secara penuh ( partial support ) oleh browser tadi.

? Kotak Warna Hijau merupakan property CSS3 tadi disupport penuh sang browser tersebut.

? Kotak Warna Hijau dengan kotak kuning kecil pada bagian ujung kanan atas merupakan property CSS3 tersebut disupport oleh browser tersebut, namun sintaknya wajib memakai vendor prefix.

? Angka-angka yg terdapat pada setiap kotak adalah versi dari sebuah browser.

menggunakan vendor prefixes di website caniuse

https://pleeease.io/play/

Pada website ini akan sangat lebih memudahkan kita, karena kita tidak perlu menghafal property CSS3 mana saja yg membutuhkan vendor prefixes atau tidak. Kita tinggal menuliskan sintak CSS kita pada bagian kotak sebelah kiri, kemudian website ini akan otomatis menerjemahkan dan hasilnya terdapat pribadi dalam kotak sebelah kiri seperti dalam contoh pada bawah ini :

cara menggunakan vendor prefixes dengan menggunakan website pleeease

? Pakai plugin emmet

Menginstall plugin emmet akan sangat memudahkan kita buat menaruh vendor prefixes pada suatu property CSS3 secara otomatis. Setelah plugin emmet terinstall pada perangkat komputer. Kita bisa eksklusif menggunakannya dengan mengetikkan nama property CSS3 yg ingin kita gunakan, selanjutnya sebelum tanda titik dua ( : ), tekan satu kali tab, lalu secara otomatis sintak vendor prefixes sudah terdapat pada awal property CSS3 & sehabis itu kita tinggal mengisi nilai property CSS3 tadi.

cara menggunakan vendor prefixes dengan menggunakan plugin emmet

			<!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 tentang Vendor Prefixes ini sekian dulu, semoga ini bisa membantu buat penggunaan property CSS3 dalam taraf lebih lanjut. Lantaran penggunaan property CSS3 ini akan sangat membantu supaya website kita menjadi lebih interaktif dan menarik. Sayang jika kita telah menciptakan website sangat rupawan, akan tetapi hasilnya tidak kompatible dalam seluruh web browser.

Happy blogging guys ?????? ...

Belum ada Komentar untuk "Vendor Prefixes Pada CSS3"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel