CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
Cara menggunakan Generator Prefiks Vendor CSS
- 1
Tempel CSS Anda
Masukkan aturan CSS Anda, seperti deklarasi flex atau transition, ke dalam kotak input kode.
- 2
Pilih prefix
Pilih prefix vendor mana yang akan ditambahkan, termasuk -webkit-, -moz-, -ms-, dan -o-, berdasarkan browser yang perlu Anda dukung.
- 3
Buat CSS berprefix
Klik Generate Prefixes untuk menghasilkan versi kode Anda dengan properti berprefix yang sesuai ditambahkan.
- 4
Salin hasilnya
Salin CSS berprefix dari output dan tempel kembali ke stylesheet Anda.
Prefiks Vendor CSS Dijelaskan
Apa sebenarnya prefiks vendor itu
Prefiks vendor adalah untaian pendek yang ditaruh oleh pembuat browser di depan sebuah nama properti atau nilai untuk merilis sebuah fitur sebelum fitur itu difinalkan. Empat yang akan Anda temui adalah -webkit- untuk mesin di balik Chrome, Safari, dan Edge modern, -moz- untuk Firefox, -ms- untuk Internet Explorer lama dan Edge orisinal, serta -o- untuk Opera lama berbasis Presto. Jadi selama tahun-tahun transisi, Anda mungkin menulis baik transition-property maupun -webkit-transition-property, yang berprefiks untuk browser yang merilisnya lebih awal dan yang polos untuk browser yang mengikuti standar final.
Secara mekanis, sebuah browser mengabaikan properti apa pun yang tidak dikenalinya, dan itulah yang membuat prefiks aman untuk ditumpuk. Anda dapat mendaftarkan varian berprefiks terlebih dahulu dan properti standar di akhir, dan setiap mesin cukup mengambil baris yang dipahaminya serta melewati sisanya.
Mengapa prefiks ada sejak awal
Prefiks adalah jawaban pragmatis untuk masalah yang sulit. Ketika fitur baru seperti gradien, transform, atau flexbox masih dirancang, vendor browser ingin membiarkan pengembang bereksperimen tanpa mengunci sintaks yang mungkin diubah oleh spesifikasi. Merilis fitur di balik sebuah prefiks adalah cara mengatakan bahwa ini bersifat eksperimental dan dapat berubah. Jika standar finalnya berbeda, properti tanpa prefiks dapat mengadopsi perilaku yang dikoreksi sementara yang berprefiks mempertahankan perilaku lama, sehingga halaman yang sudah ada tidak diam-diam rusak.
Dalam praktiknya, sistem ini menjadi bumerang. Situs-situs menjadi begitu bergantung pada fitur -webkit- sehingga mesin lain pada akhirnya harus mengimplementasikan sendiri sebagian properti berprefiks -webkit- hanya agar dapat merender web dengan benar. Hasil itulah persisnya mengapa seluruh pendekatan ini sebagian besar ditinggalkan demi feature flag untuk pekerjaan eksperimental.
Cara menulis yang berprefiks dan yang standar bersamaan
Aturannya sederhana dan urutan itu penting: tulis setiap versi berprefiks yang Anda perlukan, lalu tulis properti standar tanpa prefiks di akhir. Karena deklarasi yang lebih belakang menang ketika semuanya dipahami, menaruh baris standar di paling bawah berarti browser yang sepenuhnya modern menggunakan perilaku final yang benar, sementara yang lebih lama mundur ke baris berprefiks yang dipahaminya. Alat ini mengikuti konvensi tersebut, mengeluarkan varian berprefiks yang Anda pilih bersama deklarasi standar yang asli sehingga cascade terselesaikan sesuai harapan Anda.
Gagasan yang sama terkadang berlaku untuk nilai, bukan hanya nama properti, karena beberapa fitur juga diberi prefiks di sisi nilainya. Kebiasaan yang aman adalah identik: sediakan bentuk berprefiks yang lebih lama, lalu biarkan bentuk standar menimpanya untuk browser yang telah menyusul.
Sebagian besar CSS modern tidak lagi memerlukan prefiks
Inilah bagian yang patut dihayati: mayoritas besar properti yang dulu memerlukan prefiks kini tidak lagi. Transition, transform, animasi, box-shadow, border-radius, gradien, dan sintaks flexbox modern semuanya didukung tanpa prefiks di seluruh browser saat ini. Menambahkan -webkit-, -moz-, -ms-, dan -o- ke semua itu sekarang menghasilkan kode mati yang membengkakkan stylesheet Anda, dapat membingungkan pembaca di masa depan, dan dalam kasus langka bahkan mengaktifkan perilaku lama yang bermasalah. Jika proyek Anda hanya menargetkan browser saat ini, kemungkinan besar Anda tidak memerlukan prefiks sama sekali.
Itulah sebabnya alur kerja yang cermat tidak memberi prefiks pada segalanya secara refleks. Ia hanya memberi prefiks pada apa yang benar-benar dibutuhkan oleh target browser, yang menjaga keluaran tetap ramping dan jujur alih-alih dipenuhi baris yang tidak akan pernah dijalankan siapa pun.
Di mana prefiks masih benar-benar penting
Segelintir fitur tetap hanya-berprefiks atau berprefiks-dahulu di browser yang dirilis, dan di sinilah sebuah prefiks bukan sampah warisan melainkan persyaratan saat ini. Prefiks -webkit- khususnya masih muncul untuk hal-hal seperti teknik line-clamp yang digunakan untuk memotong teks pada jumlah baris yang tetap, perilaku backdrop dan appearance tertentu, serta beberapa penyetelan scrollbar dan tap-highlight pada Safari seluler. Untuk ini, menghilangkan prefiks berarti fiturnya sekadar tidak berfungsi, jadi inilah persisnya saat menggunakan sebuah prefiks adalah benar.
Jika Anda mendukung versi browser yang lebih lama tetapi masih nyata untuk audiens tertentu, prefiks juga kembali masuk hitungan untuk properti yang baru saja distandarisasi. Pertanyaan penentunya tidak pernah soal bagaimana propertinya terasa melainkan apa yang sebenarnya termuat dalam matriks dukungan Anda.
Autoprefixer dan pendekatan build modern
Praktik terbaik saat ini adalah berhenti menulis prefiks dengan tangan dan membiarkan sebuah alat menambahkannya dari data nyata. Autoprefixer, yang dijalankan sebagai bagian dari langkah build, membaca daftar dukungan browser yang dideklarasikan proyek Anda dan menyisipkan persis prefiks yang dibutuhkan browser-browser itu, tidak lebih dan tidak kurang, menggunakan data kompatibilitas terkini. Anda menulis CSS standar yang bersih, dan prefiks yang benar dihasilkan secara otomatis pada waktu build, lalu dibuang lagi begitu daftar dukungan Anda tidak lagi membutuhkannya.
Konverter ini adalah pasangan manual dari alur kerja itu, ideal saat Anda tidak menjalankan pipeline build, saat Anda ingin menambahkan prefiks tertentu ke sebuah cuplikan dengan cepat, atau saat Anda sedang belajar bagaimana bentuk berprefiks dan standar saling berkaitan. Untuk basis kode yang besar, menyiapkan Autoprefixer berarti Anda tidak perlu lagi memikirkan hal ini.
Periksa dukungan sebelum memberi prefiks
Sebelum menambahkan prefiks apa pun, pastikan apakah itu benar-benar dibutuhkan dengan memeriksa referensi kompatibilitas terkini seperti caniuse, yang menampilkan, properti demi properti, versi browser mana yang mendukung bentuk standar dan mana yang masih menuntut sebuah prefiks. Memadukan pencarian itu dengan daftar eksplisit browser yang didukung proyek Anda mengubah pemberian prefiks dari tebak-tebakan menjadi keputusan yang dapat Anda pertahankan. Biaya pemeliharaan prefiks usang itu nyata, jadi menghapus yang tidak lagi Anda butuhkan sama berharganya dengan menambahkan yang memang Anda butuhkan.
Pertanyaan yang sering diajukan
Untuk apa prefix vendor CSS?
Prefix apa saja yang bisa ditambahkan alat ini?
Apakah alat ini memberi prefix pada setiap properti yang saya tempel?
Apakah saya masih memerlukan prefix vendor saat ini?
Apakah CSS saya dikirim ke mana pun?
Alat terkait
Lanjutkan dengan alat praktis ini