Apa itu CSS Prefix -moz- , -webkit- .. ? – Pernahkah kalian mencoba melihat kode HTML-CSS pada berbagai browser dan Anda menemukan bahwa pratinjau tidak sama?
Kenapa itu bisa terjadi?
Nah, HTML – CSS kalian tidak akan ditafsirkan oleh Google Chrome dengan cara yang sama seperti Opera, Mozilla Firefox, Internet Explorer atau browser lainnya. Dan di sinilah masalah kompatibilitas muncul. Dengan kata sederhana, yang kami maksud dengan kompatibilitas adalah bahwa kode yang kalian tulis harus dapat dimengerti oleh semua browser atau minimal oleh browser utama (Google Chrome, IE, Mozilla Firefox, Opera, Ms Edge ..) sehingga dapat dipratinjau sama cara. Di sini di mana datang keajaiban awalan. Terutama, properti css yang harus diawali adalah CSS3 properti baru seperti border-radius, animation, flex-box … (Nanti akan saya beri tahu kalian di mana menemukan seluruh daftar properti css yang harus menggunakan previx).
Apa itu CSS Prefix?
CSS Prefix adalah cara bagi pembuat browser untuk menambahkan dukungan untuk fitur CSS baru sebelum fitur-fitur tersebut didukung sepenuhnya di semua browser.
- -webkit- (Chrome, Safari, versi terbaru dari Opera.)
- -moz- (Firefox)
- -o- (Old versions dari Opera)
- -ms- (Internet Explorer)
Sekarang, mari kita ambil contoh untuk melihat cara kerja semuanya, bagaimana dengan memilih hmm .. properti transformasi? Mungkin ini contoh yang bagus. Untuk melihat apakah properti CSS3 ini harus menggunakan prefix atau tidak, kita harus membuka situs shouldiprefix.com dan ketik transform, apa yang harus kita lakukan adalah ini:
.example {
-webkit-transform: rotate(30deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: rotate(30deg); /* IE 9 */
transform: rotate(30deg); /* IE 10, Fx 16+, Op 12.1+ */
}
Jadi, situs web yang sangat bermanfaat ini memberi tahu kita bahwa kita harus memberi prefix transform properti dengan -webkit- untuk Chrome dengan versi kurang dari 36 dan iOS <9.2 .. dan -ms- untuk IE9. Apa yang kita pelajari dari sini adalah bahwa kita tidak perlu menambahkan semua 4 prefix, di sini kita hanya menambahkan dua. Properti filter hanya memerlukan satu prefix yang -webkit- seperti gambar di bawah ini menunjukkan:
.example {
-webkit-filter: grayscale(50%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(50%); /* FF 35+ */
}
Kalian dapat mengunjungi shouldiprefix.com dan melihat properti lain apa yang harus diberi prefix dan properti apa yang tidak perlu diberi prefix lagi karena masalah kompatibilitas telah diselesaikan. Sumber lainnya untuk topik ini adalah caniuse.com yang “menyediakan tabel dukungan browser terbaru untuk mendukung teknologi web front-end pada browser web desktop dan seluler.”.
Baca juga: Filter Gambar Menggunakan CSS.
Saya sarankan kalian harus mengurus masalah kompatibilitas sebelum mengirimkan pekerjaan kalian ke klien atau sebelum meluncurkan situs web kalian. Mengapa? Karena kalian tidak tahu browser apa yang digunakan orang lain. Dan ya, masih ada orang yang menggunakan Internet Explorer dan kalian tentu tidak ingin situs web kalian terlihat berantakan. Kalian juga bisa menggunakan plugin autoprefixer untuk memecahkan masalah ini secara dinamis:
https://github.com/postcss/autoprefixer
Sekian artikel singkat mengenai CSS Prefix, jika ada yang kurang dimengerti, silahkan bertanya melalui kolom komentar. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.
/*Artikel berman faat*/