Minifier & Formatter CSS

Apa Itu Alat Ini?

Minifier CSS menulis ulang stylesheet agar sekecil mungkin tanpa mengubah cara tampilannya: menghapus komentar dan spasi, memperpendek nilai warna dan satuan nol jika aman, menggabungkan aturan duplikat, dan menghapus titik koma yang berlebih.

Alat ini dibangun di atas clean-css, pengoptimal CSS yang benar-benar mengurai stylesheet menjadi AST, bukan memakai regex, itulah sebabnya alat ini bisa menangani kasus khusus yang sering merusak minifier naif — custom property CSS (--main-color: ...), konten di dalam string, serta selector dan media query yang kompleks semuanya keluar dengan benar.

Mengapa Menggunakannya?

• Minifikasi berbasis AST (clean-css), bukan regex — aman untuk custom property, string, dan media query bersarang.
• Optimisasi Level 2 menggabungkan dan menyederhanakan aturan untuk penghematan ekstra di luar sekadar penghapusan spasi.
• Lihat persis berapa byte dan persentase yang kamu hemat.
• Mode Format mengubah stylesheet yang sudah diminifikasi kembali menjadi CSS yang mudah dibaca dengan indentasi konsisten.
• Pemrosesan 100% lokal — gaya milik sendiri atau yang belum dirilis tidak pernah meninggalkan browsermu.

Cara Menggunakan

1. Tempelkan CSS-mu ke kotak input, atau klik "Load Example" untuk mencoba contoh dengan custom property dan media query.
2. Klik "Minify" untuk mengompresnya, atau "Format" untuk merapikannya dengan indentasi 2 spasi.
3. Periksa pesan di bawah kotak — mode minify menampilkan pengurangan ukuran; CSS yang tidak valid menampilkan error yang jelas, bukan diam-diam menghasilkan output rusak.
4. Klik "Copy" untuk mengambil hasilnya.

Contoh

Input

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Output

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Custom property, media query, dan urutan cascade semuanya dipertahankan — hanya spasi, komentar, dan karakter berlebih yang dihapus.

Tips praktis

• Minifikasi saat build/deploy, bukan saat development — edit sumber yang mudah dibaca dan biarkan alat ini (atau pipeline build-mu) menghasilkan versi yang dirilis.
• Jika kamu sedang mencari tahu mengapa sebuah halaman terlihat berbeda di produksi, memformat CSS yang diminifikasi terlebih dahulu membuat perbandingan dengan sumber aslinya jauh lebih mudah dibaca.
• Custom property tetap utuh setelah minifikasi, jadi stylesheet berbasis design-token (menggunakan --spacing, --color-*, dll.) aman diproses lewat alat ini.
• Gabungkan dengan minifier HTML dan JS di bawah jika proyekmu menyimpan semuanya dalam file terpisah sebelum rilis.

Posisinya dalam alur kerja nyata

CSS adalah salah satu hal yang paling berpengaruh untuk diminifikasi karena stylesheet secara default bersifat render-blocking — setiap byte yang dipangkas dari stylesheet bisa mempercepat first paint sedikit, terutama pada koneksi yang lebih lambat. Ini kemenangan yang lebih kecil dibanding optimisasi gambar, tapi hampir gratis begitu sudah terpasang di langkah build.

Arah Format berguna untuk masalah sebaliknya: memeriksa stylesheet produksi kompetitor atau warisan lama yang dirilis dalam bentuk diminifikasi, untuk memahami strukturnya sebelum menulis override atau desain ulang.

→ Minifier HTML · Minifier JS

Kasus penggunaan umum

• Memperkecil stylesheet sebelum menerapkan situs statis atau landing page.
• Memformat ulang file CSS yang diminifikasi diambil dari situs langsung untuk mempelajari strukturnya.
• Membersihkan CSS yang diekspor dari alat desain, yang sering menyertakan komentar dan spasi berlebihan.
• Memeriksa dengan cepat apakah cuplikan CSS yang ditulis tangan diurai dengan benar, karena CSS yang cacat langsung muncul sebagai error yang jelas.

Pertanyaan yang Sering Diajukan