Minifier dan pemformat CSS: perkecil atau rapikan kode

Cara memakai

Tempel lembar gaya ke CSS. String dan url() tetap persis seperti aslinya.
Biarkan Mode pada Minifikasi untuk membuat CSS lebih kecil, atau pilih Rapikan agar mudah dibaca.
Bandingkan Byte sebelum dan Byte sesudah untuk melihat berapa yang dihemat.
Salin Hasil, atau unduh sebagai styles.css.

Apa yang dibuang minifikasi dan apa yang dibiarkan

Komentar CSS berjalan dari /* sampai */ dan dibuang, kecuali pemberitahuan yang dimulai dengan /*! , yang dibiarkan alat karena memuat lisensi atau kredit. Spesifikasi CSS Syntax mendefinisikan komentar, dan alat membaca string serta token url() dengan aturan yang sama, sehingga isinya disalin apa adanya.

Spasi dibuang di tempat tata bahasa tidak memerlukannya: di sekitar kurung kurawal, koma, titik dua dalam deklarasi, dan sebelum tanda seru. Titik koma terakhir sebuah blok dibuang, karena kurung kurawal penutup sudah mengakhiri blok. Spasi sebelum titik dua di dalam selektor tetap ada, karena selektor .card :hover berarti hal yang berbeda dari .card:hover.

a { color : red ; }  menjadi  a{color:red}

Warna, nol dan pemendekan yang tidak dilakukan

Warna heksadesimal yang pasangan digitnya berulang ditulis dengan tiga atau empat digit: #ffffff menjadi #fff dan #aabbccdd menjadi #abcd. Hurufnya ditulis dengan huruf kecil. Warna di dalam selektor tidak pernah diubah, karena selektor seperti #aabbcc menamai sebuah id.

Panjang 0px di awal sebuah nilai menjadi 0. Di dalam fungsi seperti calc(), dan di dalam properti kustom yang dimulai dengan dua tanda hubung, panjangnya dibiarkan apa adanya, karena 0 tanpa satuan tidak dibaca sebagai panjang di setiap konteks. Merapikan tidak mengubah warna maupun panjang.

Ukuran dihitung dalam byte UTF-8, yaitu cara server mengirim berkas; huruf dengan aksen memakai dua byte.
Uji halaman setelah diminifikasi, karena peretasan lama untuk peramban tertentu kadang bergantung pada spasi yang dibuang minifier.

Contoh: aturan dengan komentar, warna dan nol

Teks .card { color: #aabbcc; /* note */ margin: 0px 10px; } memiliki komentar, warna heksadesimal yang pasangan digitnya berulang, dan panjang nol di awal sebuah nilai. Minifikasinya membuang komentar dan spasi, menulis #abc untuk warna dan 0 untuk nol.

Hasilnya adalah .card{color:#abc;margin:0 10px}, dan aturannya bekerja persis seperti sebelumnya.

Pertanyaan yang sering diajukan

Apakah CSS yang diminifikasi sama dengan aslinya bagi peramban?

Ya, bagi peramban aturannya berlaku dengan cara yang sama, karena alat hanya membuang apa yang tidak diperlukan tata bahasa CSS. Meski begitu, periksa halaman setelah diminifikasi, karena peretasan yang jarang bisa bergantung pada spasi.

Mengapa alat tidak membuang setiap satuan nol?

Nol di dalam fungsi seperti calc(), dan di dalam properti kustom, tidak selalu dibaca sebagai panjang, jadi alat hanya memendekkan 0px di awal sebuah nilai. Dengan begitu hasilnya aman di setiap kasus yang ditangani.

Mengapa merapikan menaruh komentar di barisnya sendiri?

Setiap komentar ditulis di barisnya sendiri pada tingkat aturan yang dimilikinya, sehingga struktur lembar gaya tetap mudah diikuti. Pemberitahuan yang dimulai dengan /*! tetap disimpan juga.

Apakah alat ini memeriksa CSS saya dari kesalahan?

Tidak. Alat membaca strukturnya: memeriksa bahwa kurung kurawal, string dan nilai url() tanpa tanda kutip tertutup. Alat tidak memeriksa apakah nama properti atau nilai valid, jadi gunakan validator untuk itu.

Apakah CSS saya dikirim atau disimpan di suatu tempat?

Tidak. Minifikasi dan perapian berjalan di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami, jadi salin hasilnya sebelum meninggalkan halaman.

Sumber

Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.

Hasil