Pengembangan Web
CSS Minify / Beautify
Mengompresi CSS untuk produksi atau memformat CSS yang diminifikasi menjadi bentuk yang mudah dibaca.
Terlalu besar untuk ditampilkan
Terlalu besar untuk ditampilkan
Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.
How to use it
- Minify: paste CSS and the tool strips unnecessary whitespace, comments, and line breaks while keeping behavior identical.
- Beautify: paste minified CSS with no indentation to get a readable version back, with indentation and line breaks.
- Handy for quickly reading CSS from a third-party site that only ships a minified version.
Common uses
- Minifying CSS for production when there's no build tool (Vite, Webpack) set up, or for a quick one-off minification.
- Beautifying minified CSS from a third-party library to read or debug it.
- Estimating how much a CSS file will shrink before setting up an automated build.
Things to keep in mind
Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.
Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.
Artikel tentang alat ini: Minifikasi CSS: apa sebenarnya yang dihapus dari file, dan mengapa
Pertanyaan yang sering diajukan
Apa sebenarnya yang dihapus minifikasi dari CSS saya?
Minify menghapus spasi, jeda baris, dan komentar serta memperpendek beberapa nilai, mengurangi ukuran file tanpa mengubah perilaku CSS.
Bisakah Beautify memulihkan format asli saya dengan sempurna?
Beautify memformat ulang CSS yang diminifikasi dengan indentasi dan jeda baris untuk keterbacaan, tetapi tidak bisa memulihkan komentar atau pilihan gaya asli Anda, karena sudah dihapus selama minifikasi.
Apakah minifikasi aman untuk CSS valid apa pun?
Ya — untuk CSS yang valid secara sintaksis, minifikasi hanya menghapus karakter yang berlebihan dan tidak pernah mengubah selector atau nilai properti, dan semuanya berjalan secara lokal di browser Anda.
Apakah saya masih perlu minifikasi jika server sudah mengompresi file dengan Gzip?
Ya — minifikasi dan kompresi Gzip/Brotli saling melengkapi: minifikasi mengecilkan file sumber itu sendiri sebelum kompresi, dan Gzip/Brotli mengompresi hasilnya lebih lanjut saat transfer, sehingga keduanya digabungkan menghasilkan ukuran akhir yang lebih kecil daripada teknik mana pun sendirian.
Apa itu source map untuk CSS yang diminifikasi?
Source map adalah file terpisah yang memetakan baris CSS yang diminifikasi kembali ke kode asli yang diformat, memungkinkan alat pengembang browser menampilkan nomor baris dan nama file yang benar saat debugging, bahkan ketika yang sebenarnya dikirim ke produksi adalah versi yang diminifikasi.