Apa Itu Vendor CSS atau Awalan Browser?

Awalan vendor CSS, juga terkadang dikenal sebagai or CSS awalan browser, adalah cara bagi pembuat browser untuk menambahkan dukungan untuk fitur CSS baru sebelum fitur tersebut didukung penuh di semua browser. Ini dapat dilakukan selama semacam periode pengujian dan eksperimen di mana produsen browser menentukan dengan tepat bagaimana fitur CSS baru ini akan diterapkan. Awalan ini menjadi sangat populer dengan munculnya CSS3 beberapa tahun yang lalu.

Asal-usul Awalan Vendor

Ketika CCS3 pertama kali diperkenalkan, sejumlah properti yang menarik mulai masuk ke browser yang berbeda pada waktu yang berbeda. Misalnya, browser yang didukung Webkit (Safari dan Chrome) adalah yang pertama memperkenalkan beberapa properti gaya animasi seperti transformasi dan transisi. Dengan menggunakan awalan vendor properti, desainer web dapat menggunakan fitur-fitur baru tersebut dalam pekerjaan mereka dan menampilkannya di browser yang langsung mendukung mereka, daripada harus menunggu setiap produsen browser lain untuk menangkap naik!

Awalan Umum

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 bisa sangat membantu ketika produsen browser yang berbeda mengimplementasikan 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-

• Krom:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -MS-

• iOS:

  -webkit-

• Opera:

  -Hai-

• Safari:

  -webkit-

Menambahkan Awalan

Dalam kebanyakan kasus, untuk menggunakan properti gaya CSS baru, Anda mengambil properti CSS standar dan menambahkan awalan untuk setiap browser. Versi awalan akan selalu didahulukan (dalam urutan apa pun yang Anda inginkan) sedangkan properti CSS normal akan menjadi yang 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-transisi: semua 4s mudah;
-o-transisi: semua 4s mudah;
transisi: semua 4s mudah; 

Ingat, beberapa browser memiliki sintaks yang berbeda untuk properti tertentu daripada yang lain, jadi jangan berasumsi bahwa versi properti yang diawali browser 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 itu dengan awalan yang sesuai, sedangkan versi awal Chrome dan Safari menggunakan properti awalan -webkit-gradient.

Juga, Firefox menggunakan nilai yang berbeda dari yang standar.

Alasan mengapa Anda selalu mengakhiri deklarasi Anda dengan versi normal, non-prefixed dari properti CSS adalah agar ketika browser mendukung aturan tersebut, browser akan menggunakan aturan tersebut. Ingat bagaimana CSS dibaca. Aturan selanjutnya didahulukan dari yang sebelumnya jika spesifisitasnya sama, sehingga browser akan membaca versi vendor dari a aturan dan gunakan itu jika tidak mendukung yang normal, tetapi setelah itu, itu akan menimpa versi vendor dengan CSS yang sebenarnya aturan.

Awalan Vendor Bukan Peretasan

Ketika awalan vendor pertama kali diperkenalkan, banyak profesional web bertanya-tanya apakah itu peretasan atau beralih kembali ke hari-hari gelap forking kode situs web untuk mendukung browser yang berbeda (ingat bahwa "Situs ini paling baik dilihat di IE"pesan). Namun, awalan vendor CSS bukanlah peretasan, dan Anda tidak perlu ragu untuk menggunakannya dalam pekerjaan Anda.

Peretasan CSS mengeksploitasi kelemahan dalam implementasi elemen atau properti lain agar properti lain berfungsi dengan benar. Misalnya, peretasan model kotak mengeksploitasi kelemahan dalam penguraian keluarga suara atau dalam cara peramban mengurai garis miring terbalik \. Tetapi 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 usang ini adalah yang tidak perlu kita khawatirkan saat ini.

Awalan vendor bukanlah peretasan 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 merusak segalanya 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 tanpa awalan. Dengan begitu Anda dapat menghapus versi awalan setelah dukungan browser penuh tercapai.

Awalan Vendor Mengganggu tetapi Sementara

Ya, mungkin terasa menjengkelkan dan berulang-ulang harus menulis properti 2-5 kali agar berfungsi di semua browser, tetapi ini adalah situasi sementara. Misalnya, hanya beberapa tahun yang lalu, untuk membuat sudut membulat pada sebuah kotak, Anda harus menulis:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
batas-radius: 10px 5px; 

Tetapi sekarang browser telah sepenuhnya mendukung fitur ini, Anda benar-benar hanya memerlukan versi standar:

batas-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 di 4.0, dan Android di 2.1. Bahkan Internet Explorer 9 mendukungnya tanpa awalan (dan IE 8 dan yang lebih rendah tidak mendukungnya dengan atau tanpa awalan).

Ingatlah bahwa browser akan selalu berubah dan pendekatan kreatif untuk mendukung browser lama akan diperlukan kecuali jika Anda berencana membangun halaman web yang bertahun-tahun di belakang metode paling modern. Pada akhirnya, menulis awalan browser jauh lebih mudah daripada menemukan dan mengeksploitasi kesalahan yang kemungkinan besar akan diperbaiki di versi mendatang, mengharuskan Anda menemukan kesalahan lain untuk dieksploitasi dan seterusnya.