Apa itu Vendor CSS atau Prefiks Browser?

Awalan vendor CSS, juga terkadang 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:
-Nona-
iOS:
-webkit-
Opera:
-Hai-
Safari:
-webkit-

Dalam kebanyakan kasus, untuk menggunakan properti gaya CSS baru, Anda mengambil properti CSS standar dan menambahkan awalan untuk setiap browser. Versi awalan akan selalu datang pertama (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

transisi

properti seperti yang ditunjukkan di bawah ini:

-webkit- transisi: semua 4s mudah; -moz- transisi: semua 4s mudah; -Nona- transisi: semua 4s mudah; -Hai- transisi: semua 4s mudah;transisi: semua 4s mudah;

catatan: Ingat, beberapa browser memiliki sintaks yang berbeda untuk properti tertentu daripada yang lain, jadi jangan menganggap bahwa versi properti yang dipatenkan browser sama persis dengan properti standar. Misalnya, untuk membuat gradien CSS, Anda menggunakan

gradien linier
milik. Firefox, Opera, dan versi modern Chrome dan Safari menggunakan properti itu dengan awalan yang sesuai sementara versi awal Chrome dan Safari menggunakan properti prefiks

-webkit-gradien
. 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 mereka merupakan peretasan atau peralihan kembali ke hari-hari gelap dari penggunaan kode situs web untuk mendukung browser yang berbeda (ingat itu " Situs ini paling baik dilihat di IE "Pesan." Awalan vendor CSS bukan peretasan, dan Anda seharusnya tidak keberatan tentang cara menggunakannya dalam pekerjaan Anda.

Peretasan CSS mengeksploitasi kelemahan dalam penerapan elemen atau properti lain untuk membuat properti lain berfungsi dengan benar. Sebagai contoh, model kotak hack mengeksploitasi kelemahan dalam penguraian

keluarga-suara
atau bagaimana browser 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 tidak dapat diretas karena memungkinkan spesifikasi untuk menyiapkan aturan tentang bagaimana properti dapat diterapkan, sementara pada saat yang sama memungkinkan pembuat browser untuk mengimplementasikan properti dengan cara yang berbeda tanpa melanggar yang lain. Selanjutnya, prefiks ini bekerja dengan properti CSS itu 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 untuk menulis properti 2-5 kali agar dapat berfungsi di semua browser, tetapi itu hanya 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 lama akan diperlukan kecuali Anda berencana membuat laman web yang bertahun-tahun 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.