Formatter & Minifier CSS

Tempel untuk merapikan, kompres untuk melihat apa saja yang berkurang dan seberapa banyak

Formatter & Minifier CSS mengubah stylesheet yang sama ke dua arah. Merapikan (format, beautify) memecah kode yang menumpuk dalam satu baris seperti .card{margin:0;padding:16px} menjadi satu deklarasi per baris dengan indentasi yang seragam, sehingga mudah dibaca manusia. Mengompres (minify) bekerja sebaliknya: karakter yang tidak dibaca browser, seperti komentar, spasi, dan baris baru, dihapus agar file untuk produksi menjadi lebih kecil. Kedua hasil harus menghasilkan tampilan yang sama dengan kode aslinya, dan alat ini dibuat untuk menjaga syarat tersebut.

Cara yang menghapus spasi dengan ekspresi reguler sekaligus mudah merusak calc(100% - 2rem), karena spasi di kedua sisi tanda kurang ikut hilang dan nilainya menjadi tidak valid. Alat ini membaca kode per komentar, string, tanda kurung, dan deklarasi sesuai spesifikasi CSS sebelum menulisnya ulang, sehingga dapat membedakan spasi yang aman dihapus dari spasi yang bila dihapus mengubah makna. Peta ukuran di bawah hasil menggambar versi asli dan hasil sebagai pita berskala sama, menunjukkan berapa byte yang dipakai aturan biasa, @media, dan komentar, serta berapa yang berkurang. Bagian “Temuan” menunjuk, lengkap dengan nomor baris, kasus seperti satu } berlebih yang membuat sebuah aturan hilang seluruhnya.

Kapan perlu merapikan dan mengompres

Bentuk stylesheet yang disukai penulisnya berbeda dengan yang disukai browser. Saat mengedit, kode yang terbentang lebih nyaman; saat dikirim, kode yang pendek lebih menguntungkan. Alat ini berguna pada situasi seperti berikut.

• Saat harus membaca file .min.css milik sebuah library: jika Anda hanya punya versi terkompres dan ingin tahu di mana warna tombol ditentukan, file itu perlu dibentangkan dulu. Tempel ke mode rapikan, lalu cari di kolom hasil.
• Saat merapikan gaya yang disalin dari developer tools atau situs lain: kode hasil salinan sering memiliki indentasi campur aduk atau tersambung dalam satu baris. Setelah dirapikan sekali, batas antara selektor dan deklarasi langsung terlihat.
• Saat memasukkan CSS ke kolom “CSS tambahan” di editor blog atau toko online: jika ada batas jumlah karakter atau kolomnya sempit, versi terkompres lebih praktis. Simpan versi aslinya di tempat lain dan tempel hanya versi terkompres.
• Saat gaya tidak berlaku hanya pada sebagian tampilan: penyebabnya sering berupa } berlebih pada aturan sebelumnya atau tanda kurung yang tidak tertutup. “Temuan” menunjukkan baris itu beserta selektor yang dibuang.
• Saat ingin memastikan seberapa besar efek kompresi yang sebenarnya: persentase pengurangan byte berbeda dengan persentase pengurangan ketika server mengirim file dengan gzip. Pita gzip pada peta ukuran memperlihatkan kedua angka itu sekaligus.

Cara memakai

1. Tempel CSS di kolom input sebelah kiri (di atas pada layar sempit). Anda juga dapat menekan “Buka file” atau menyeret file .css ke kolom itu. File hingga 5 MB bisa dibuka.
2. Pilih Rapikan atau Kompres di bagian atas. Hasil berubah seketika selagi Anda mengetik.
3. Pada mode rapikan, Anda dapat mengatur indentasi (2 spasi, 4 spasi, atau tab), apakah komentar disimpan, dan apakah selektor dipecah per koma. Pada mode kompres, pilih penanganan komentar (hanya /*! disimpan, hapus semua, simpan semua) dan pemendekan warna HEX.
4. Klik sebuah segmen pita pada peta ukuran, maka bagian itu ditandai di kolom hasil. Menekan tombol nomor baris di “Temuan” akan memilih baris tersebut di kolom input.
5. Gunakan “Salin hasil” untuk menaruhnya di clipboard atau “Simpan sebagai file” untuk mengunduh. Hasil kompres disimpan dengan nama berakhiran .min.css.

Beginilah hasil setelah dirapikan

Merapikan tidak mengubah urutan karakter; hanya baris dan spasi yang ditata ulang. Satu deklarasi per baris, satu spasi setelah titik dua, titik koma di ujungnya, dan aturan bersarang menjorok satu tingkat lebih dalam. Antarblok diberi satu baris kosong, dan komentar yang berada di baris yang sama dengan sebuah deklarasi tetap berada di ujung deklarasi itu setelah dirapikan.

Seperti pada baris terakhir, properti kustom yang diawali -- tidak diberi spasi setelah koma. Nilai properti kustom disimpan persis seperti yang ditulis, dan getPropertyValue() di JavaScript mengembalikan teks yang sama. Jadi, satu spasi yang ditambahkan agar tampak rapi dapat mengubah nilai yang dibaca skrip. Pemecahan baris pada koma selektor bisa dimatikan; jika mati, hasilnya ditulis berurutan dalam satu baris seperti h1, h2 > a {.

Yang dihapus kompresi dan yang sengaja dipertahankan

Kompresi hanya memperpendek karakter dalam batas yang menghasilkan tampilan sama. Sebagian besar spasi boleh dihapus, tetapi ada spasi yang merupakan bagian dari tata bahasa itu sendiri; bila dihapus, kodenya menjadi lain. Enam baris terbawah pada tabel di bawah adalah tempat yang sering rusak pada cara kompresi lain, dan alat ini membiarkannya.

Karena itu, nilai properti kustom seperti --brand: #C44A00 tetap berupa HEX huruf besar setelah dikompres, sedangkan hanya color: #FFFFFF pada properti biasa yang menjadi #fff. Daftar “Yang diubah” menampilkan secara terpisah jumlah komentar dan byte yang dihapus, jumlah titik koma yang dihapus, jumlah warna yang dipersingkat, dan byte yang berkurang dari spasi.

Seberapa kecil hasilnya: rasio kompresi dan ukuran transfer gzip

Byte yang berkurang karena kompresi tidak sama dengan byte yang benar-benar lewat di jaringan. Kebanyakan server mengirim CSS setelah dikompres lagi dengan gzip atau brotli, dan kompresi semacam ini sangat efektif untuk karakter yang berulang, sehingga spasi berpola sama seperti indentasi dan baris baru sudah banyak berkurang pada tahap itu. Tabel di bawah memuat nilai dari contoh di halaman ini dan file distribusi library publik Bootstrap 5.3.8 yang dikompres dengan alat ini, dengan ukuran transfer yang diukur memakai gzip di browser (Chromium).

Pada file besar seperti Bootstrap, byte berkurang 17% setelah dikompres, tetapi ukuran transfer gzip hanya berkurang sekitar 8%. Sebabnya, spasi sudah nyaris hilang pada tahap gzip. Pada file kecil terjadi sebaliknya: efek gzip itu sendiri kecil karena header dan footer gzip menambah 18 byte tetap (RFC 1952). Meski begitu, kompresi mengurangi jumlah karakter yang harus dibaca dan ditafsirkan browser, dan di lingkungan tanpa gzip, ukurannya langsung menjadi volume transfer. Versi terkompres resmi Bootstrap melakukan transformasi tambahan, misalnya mengubah urutan selektor atau mengganti rgba(0,0,0,0) menjadi transparent, sehingga lebih kecil 648 B dalam byte, tetapi dalam ukuran transfer gzip, hasil alat ini lebih kecil 47 B. Ketika versi terkompres dari alat ini dibaca browser, 2.660 entri, termasuk aturan di dalam @media, ditafsirkan sama persis dengan aslinya, dan satu-satunya perbedaan adalah spasi di samping koma pada nilai var().

Nilai gzip pada tabel diukur dengan pengaturan bawaan browser, sehingga bisa sedikit berbeda menurut tingkat kompresi server atau penggunaan brotli. KB pada peta ukuran dihitung dengan 1 KB = 1.024 B.

Kesalahan yang membuat aturan hilang seluruhnya

CSS tidak berhenti ketika menemui kesalahan; bagian itu dibuang dan pembacaan berlanjut. Karena itu halaman tidak rusak total, tetapi browser tidak memberi tahu bagian mana yang dibuang, sehingga penyebabnya sulit dicari. Enam kasus di bawah mengikuti cara browser benar-benar membaca (CSS Syntax 3). Alat ini membaca dengan cara yang sama lalu menampilkannya di “Temuan” beserta nomor baris.

Hal yang bukan kesalahan tetapi layak diperiksa juga ditampilkan. Bila properti yang sama muncul dua kali dalam satu aturan, hanya nilai yang belakangan yang berlaku. Karena bisa saja itu cadangan untuk browser lama seperti display: -webkit-box; display: flex;, hal ini hanya ditandai sebagai “catatan”. Aturan kosong tanpa satu pun deklarasi juga diberitahukan sebagai catatan, tetapi tidak dihapus saat kompresi.

CSS bersarang dan sintaks baru tetap terbaca

CSS nesting adalah sintaks yang memungkinkan &:hover { … } atau @media ditulis langsung di dalam sebuah aturan, dan kini didukung semua browser utama. Alat ini membedakan nesting dengan cara spesifikasi: di dalam blok, bila { muncul lebih dulu daripada ; atau }, itu aturan; jika tidak, itu deklarasi. Saat merapikan, tiap tingkat dijorokkan satu langkah. Saat mengompres, tanda ; di antara deklarasi dan aturan bersarang yang mengikutinya dipertahankan.

Versi tersebut adalah versi pertama yang mendukung fitur, dicek pada data kompatibilitas browser MDN tanggal 2026-10-22. Mulai versi di atas, nesting juga mendukung aturan bersarang yang diawali nama tag seperti a { … }, sedangkan Chrome 112-119 dan Safari 16.5-17.1 sebelumnya tidak mendukung bentuk ini. @-rule lain seperti @container, @supports, @scope, dan @property dibaca dengan cara yang sama.

Kesalahan yang sering terjadi

• Mengedit versi terkompres lalu mengompresnya lagi: versi terkompres bisa dirapikan dan diedit, tetapi komentar yang sudah dihapus tidak kembali. Simpan file sumber untuk diedit di tempat terpisah dan buat versi terkompres dari sumber itu setiap kali akan dirilis.
• Mengurutkan properti menurut abjad: pada margin-top: 8px; margin: 0;, margin: 0 di belakang menang sehingga margin atas 0, tetapi pengurutan menurut abjad memindahkan margin ke depan, margin-top: 8px menang, dan margin atas berubah menjadi 8px. Itulah alasan alat ini tidak menyediakan fitur pengurutan.
• Ikut menghapus komentar lisensi /*!: banyak kode, seperti yang berlisensi MIT, mensyaratkan pemberitahuan hak cipta tetap ada pada salinannya. Saat mengompres CSS buatan orang lain, biarkan pengaturan bawaan (hanya /*! disimpan).
• Mengganti 0px menjadi 0 secara massal: ada tempat yang memerlukan satuan, seperti flex: 1 0px, 0% pada keyframes, dan calc(0px + 10%). Jangan mengubahnya sekaligus dengan cari dan ganti.
• Membiarkan komentar // milik SCSS di dalam CSS: CSS tidak memiliki komentar //. Aturan pada baris sesudah // tombol akan dibuang karena teks itu menempel pada selektornya. Jika pada hasil rapi ada // di depan selektor, inilah kasusnya.
• Menyambung file yang kehilangan } terakhir: saat beberapa file CSS digabung menjadi satu, blok yang tidak tertutup pada file sebelumnya menelan seluruh file sesudahnya. Sebelum menggabung, tempel setiap file dan pastikan “Temuan” kosong.

Batasan dan hal yang perlu diperhatikan

• CSS dibaca dengan sintaks standar. $variabel, @mixin dan @include, komentar //, serta ekspresi hitung milik SCSS dan Less tidak ditafsirkan sebagai CSS, jadi rapikan file semacam itu dengan compiler Sass atau Less, atau dengan Prettier.
• Optimasi struktural tidak dilakukan: menggabungkan selektor yang sama, menghapus deklarasi ganda, meringkas margin-top dan sejenisnya menjadi satu margin, serta merapikan prefiks vendor. Pekerjaan seperti itu ditangani alat build semacam cssnano, Lightning CSS, dan esbuild.
• Source map tidak dibuat. Karena /*# sourceMappingURL=… */ di akhir file juga komentar biasa, komentar itu dihapus pada pengaturan kompresi bawaan; bila perlu dipertahankan, ubah pengaturan komentar menjadi “Simpan semua”.
• Pemeriksaan sintaks hanya sampai tingkat kurung, tanda kutip, komentar, dan titik dua. Salah ketik nama properti seperti colr: red, kesalahan satuan nilai, dan dukungan browser tidak dinilai.
• File hingga 5 MB dapat dibuka. Jika hasilnya melebihi 300.000 karakter, pewarnaan dilewati demi kecepatan dan hanya teks yang ditampilkan.
• Ukuran gzip diukur dengan kompresi bawaan browser dan dapat berbeda dari pengaturan server.

Tanggal acuan Spesifikasi CSS W3C (Syntax 3, Values 4, Media Queries 4, Color 4, Flexbox 1, Cascade 5, Nesting 1) dan data kompatibilitas browser MDN dicek langsung pada sumber aslinya tanggal 2026-10-22. Tabel ukuran berisi nilai yang diukur pada hari yang sama dengan CompressionStream di Chromium, dan Bootstrap mengacu pada file distribusi 5.3.8.

Sumber

• 01W3C: CSS Syntax Module Level 3CRD 2026-10-01. §4.3.2 komentar, §4.3.5 string, §5.5.3 } berlebih di tingkat atas, §5.5.5 pembeda deklarasi dan aturan di dalam blok, §5.5.6 deklarasi tanpa titik dua
• 02W3C: CSS Values and Units Module Level 4WD 2024-03-12. §10.8 spasi di kedua sisi + − pada calc() wajib; * dan / boleh tanpa spasi
• 03W3C: Media Queries Level 4CRD 2026-02-19. §3 tanpa spasi antara and, not, or dan ( , terbaca sebagai token fungsi
• 04W3C: CSS Color Module Level 4CRD 2026-10-20. §5.2 notasi HEX 3, 4, 6, dan 8 digit
• 05W3C: CSS Flexible Box Layout Module Level 1CRD 2025-10-14. §7.1 angka 0 tanpa satuan pada properti singkat flex
• 06W3C: CSS Cascading and Inheritance Level 5CR 2022-01-13. §6.4.3 layer diurutkan menurut urutan deklarasi pertama
• 07W3C: CSS Nesting Module Level 1WD 2026-01-22. Aturan bersarang dan selektor &
• 08MDN: data kompatibilitas browserDilihat 2026-10-22. Nesting Chrome 120, Firefox 117, Safari 17.2; @layer 99, 97, 15.4; CompressionStream gzip 80, 113, 16.4
• 09cssnano: discardCommentsKomentar khusus berawalan ! (/*! … */) disimpan secara bawaan
• 10IETF RFC 1952: GZIP file formatHeader 10 byte + footer (CRC32 dan ISIZE) 8 byte
• 11File distribusi Bootstrap 5.35.3.8 dist/css/bootstrap.css dan bootstrap.min.css (MIT), diunduh 2026-10-22 lalu diukur ukurannya

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama