Apa itu dan mengapa Anda harus menggunakannya
Awalan vendor CSS, juga kadang dikenal sebagai awalan browser CSS , adalah cara bagi pembuat browser untuk menambahkan dukungan untuk fitur CSS baru sebelum fitur-fitur tersebut didukung sepenuhnya di semua browser. Ini dapat dilakukan selama sejenis pengujian dan periode eksperimen di mana pabrikan peramban menentukan dengan tepat bagaimana fitur CSS baru ini akan diterapkan. Awalan ini menjadi sangat populer dengan munculnya CSS3 beberapa tahun yang lalu.
Ketika CCS3 pertama kali diperkenalkan, sejumlah properti bersemangat mulai menabrak berbagai browser pada waktu yang berbeda. Misalnya, browser yang didukung webkit (Safari dan Chrome) adalah yang pertama memperkenalkan beberapa properti bergaya animasi seperti transformasi dan transisi. Dengan menggunakan properti prefixed vendor, desainer web dapat menggunakan fitur-fitur baru tersebut dalam pekerjaan mereka dan membuatnya terlihat di browser yang mendukungnya dengan segera, daripada harus menunggu setiap produsen browser lain untuk menyusul!
Jadi, dari perspektif pengembang web front-end, awalan browser digunakan untuk menambahkan fitur CSS baru ke situs sambil merasa nyaman mengetahui bahwa browser akan mendukung gaya tersebut. Ini dapat sangat membantu ketika produsen browser yang berbeda menerapkan properti dengan cara yang sedikit berbeda atau dengan sintaks yang berbeda.
Awalan browser CSS yang dapat Anda gunakan (masing-masing khusus untuk browser yang berbeda) adalah:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Dalam kebanyakan kasus, untuk menggunakan properti gaya CSS baru, Anda mengambil properti CSS standar dan menambahkan awalan untuk setiap browser. Versi prefix akan selalu didahulukan (dalam urutan apa pun yang Anda inginkan) sementara properti CSS normal akan datang terakhir. Misalnya, jika Anda ingin menambahkan transisi CSS3 ke dokumen Anda, Anda akan menggunakan properti transisi seperti yang ditunjukkan di bawah ini:
-webkit- transisi: semua 4s mudah;
-moz- transisi: semua 4s mudah;
-ms- transition: semua 4s memudahkan;
-o- transisi: semua 4s mudah;
transisi: semua 4s mudah;
Catatan: Ingatlah, beberapa browser memiliki sintaks yang berbeda untuk properti tertentu daripada yang lain, jadi jangan menganggap bahwa versi properti versi browser-prefix sama persis dengan properti standar. Misalnya, untuk membuat gradien CSS , Anda menggunakan properti gradien linier. Firefox, Opera, dan versi modern Chrome dan Safari menggunakan properti tersebut dengan awalan yang sesuai sementara versi awal Chrome dan Safari menggunakan properti -webkit-gradien yang diawali. Juga, Firefox menggunakan nilai yang berbeda dari yang standar.
Alasan Anda selalu mengakhiri deklarasi Anda dengan versi normal dan non-prefiks dari properti CSS adalah agar ketika browser mendukung aturan, itu akan menggunakan yang itu. Ingat bagaimana CSS dibaca. Aturan selanjutnya lebih diutamakan daripada yang sebelumnya jika spesifisitasnya sama, jadi browser akan membaca versi vendor aturan dan menggunakannya jika tidak mendukung yang normal, tetapi setelah itu, ia akan mengesampingkan versi vendor dengan aturan CSS yang sebenarnya.
Vendor Prefixes Bukan Peretasan
Ketika awalan vendor pertama kali diperkenalkan, banyak profesional web yang bertanya-tanya apakah itu merupakan peretasan atau peralihan kembali ke hari-hari gelap dari penggunaan kode situs web untuk mendukung browser yang berbeda (ingat pesan " Situs ini paling baik dilihat di IE "). Awalan vendor CSS bukanlah peretasan, dan Anda seharusnya tidak keberatan tentang menggunakannya dalam pekerjaan Anda.
Peretasan CSS mengeksploitasi kelemahan dalam penerapan elemen atau properti lain untuk membuat properti lain berfungsi dengan benar. Misalnya, model kotak peretasan mengeksploitasi kelemahan dalam penguraian properti suara-keluarga atau bagaimana peramban mengurai backslashes (\). Tapi peretasan ini digunakan untuk memperbaiki masalah perbedaan antara bagaimana Internet Explorer 5.5 menangani model kotak dan bagaimana Netscape menafsirkannya, dan tidak ada hubungannya dengan gaya keluarga suara. Untungnya kedua browser yang sudah ketinggalan zaman ini adalah yang tidak kita khawatirkan belakangan ini.
Awalan vendor bukanlah peretasan karena memungkinkan spesifikasi untuk menyiapkan aturan tentang bagaimana properti dapat diterapkan, sementara pada saat yang sama memungkinkan pembuat peramban untuk menerapkan properti dengan cara yang berbeda tanpa melanggar yang lain. Selanjutnya, awalan ini bekerja dengan properti CSS yang pada akhirnya akan menjadi bagian dari spesifikasi . Kami hanya menambahkan beberapa kode untuk mendapatkan akses ke properti lebih awal. Ini adalah alasan lain mengapa Anda mengakhiri aturan CSS dengan properti normal, non-prefixed. Dengan cara itu Anda dapat menjatuhkan versi prefixed setelah dukungan browser lengkap tercapai.
Ingin tahu apa dukungan browser untuk fitur tertentu? Situs web CanIUse.com adalah sumber yang luar biasa untuk mengumpulkan informasi ini dan memberi tahu Anda peramban mana, dan versi mana dari peramban tersebut, yang saat ini mendukung fitur.
Vendor Prefixes Mengganggu Tapi Sementara
Ya, mungkin terasa menjengkelkan dan berulang-ulang harus menulis properti 2-5 kali agar bisa berfungsi di semua browser, tetapi itu adalah situasi sementara. Misalnya, beberapa tahun yang lalu, untuk memasang sudut bulat pada kotak yang harus Anda tulis:
-moz-border-radius: 10px 5px;
-webkit-batas-kiri-kiri-radius: 10px;
-webkit-border-top-kanan-radius: 5px;
-webkit-batas-bawah-kanan-radius: 10px;
-webkit-batas-bawah-kiri-radius: 5px;
border-radius: 10px 5px;
Tetapi sekarang karena browser telah sepenuhnya mendukung fitur ini, Anda benar-benar hanya membutuhkan versi standar:
border-radius: 10px 5px;
Chrome telah mendukung properti CSS3 sejak versi 5.0, Firefox menambahkannya di versi 4.0, Safari menambahkannya di 5.0, Opera di 10.5, iOS 4.0, dan Android 2.1. Bahkan Internet Explorer 9 mendukungnya tanpa awalan (dan IE 8 dan yang lebih rendah tidak mendukungnya dengan atau tanpa awalan).
Ingat bahwa peramban selalu akan berubah dan pendekatan kreatif untuk mendukung peramban yang lebih lama akan diperlukan kecuali jika Anda berencana membuat laman web yang bertahun-tahun berada di belakang metode paling modern. Pada akhirnya, menulis awalan browser jauh lebih mudah daripada mencari dan mengeksploitasi kesalahan yang kemungkinan besar akan diperbaiki dalam versi yang akan datang, yang mengharuskan Anda menemukan kesalahan lain untuk dieksploitasi dan seterusnya.