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.

Enter Your CSS

CSS Properties

Enter one CSS property per line or separate with semicolons

Browser Support

WebKit

(Safari, Chrome)

Mozilla

(Firefox)

Microsoft

(IE, Edge)

Opera

Generated CSS with Vendor Prefixes

  display: flex;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 1s ease-in-out;
  -moz-animation: fade 1s ease-in-out;
  -ms-animation: fade 1s ease-in-out;
  -o-animation: fade 1s ease-in-out;
  animation: fade 1s ease-in-out;

Tips

• 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.

Pertanyaan yang sering diajukan

Untuk apa prefix vendor CSS?

Prefix vendor seperti -webkit-, -moz-, -ms-, dan -o- memungkinkan Anda menggunakan properti yang diimplementasikan oleh mesin browser sebelum distandarisasi. Menambahkannya meningkatkan kompatibilitas lintas browser untuk versi browser lama.

Prefix apa saja yang bisa ditambahkan alat ini?

Alat ini dapat menghasilkan empat prefix umum, -webkit- (Chrome, Safari, Edge), -moz- (Firefox), -ms- (Internet Explorer dan Edge lama), dan -o- (Opera lama), dan Anda memilih mana yang akan disertakan.

Apakah alat ini memberi prefix pada setiap properti yang saya tempel?

Alat ini menambahkan varian berprefix untuk properti yang secara historis membutuhkannya dan membiarkan properti standar yang sudah didukung penuh tidak berubah, sehingga output Anda tetap bersih alih-alih dipenuhi baris yang tidak perlu.

Apakah saya masih memerlukan prefix vendor saat ini?

Banyak properti modern tidak lagi memerlukannya, tetapi prefix tetap berguna saat mendukung browser lawas atau fitur tertentu. Alat ini memudahkan untuk menambahkannya ketika target browser proyek Anda memerlukannya.

Apakah CSS saya dikirim ke mana pun?

Tidak. Pemberian prefix berjalan sepenuhnya di browser Anda, sehingga CSS Anda tidak pernah diunggah ke server. Alat ini gratis digunakan tanpa pendaftaran.

Alat terkait

Lanjutkan dengan alat praktis ini

Konverter Unit CSS

Generator Meta Tag

Generator Robots.txt

Open Graph Previewer

Pengenkode/Pendekode Entitas HTML

Penampil Header HTTP