Uraikan minifikasi CSS online
Masukkan stylesheet yang dipadatkan agar dapat dibaca kembali dengan nyaman. Setiap selektor dan deklarasi mendapat baris tersendiri, sementara blok serta media query diindentasi seperti saat ditulis dengan tangan.
Mengapa CSS produksi hanya satu baris panjang
Stylesheet diminifikasi dengan alasan yang sama seperti skrip: CSS menghalangi rendering, sehingga setiap bita yang dihemat berdampak langsung pada kecepatan tampilan halaman. cssnano, Lightning CSS, dan pengoptimal bawaan Sass serta PostCSS membuang spasi dan komentar, memendekkan nilai warna, menggabungkan aturan duplikat, serta menghapus titik koma terakhir dari setiap blok. Framework utilitas membuat hasilnya makin padat karena stylesheet Tailwind hasil kompilasi dapat memuat ribuan aturan kecil yang nyaris tanpa pemisah.
Membaca cascade kembali
Alasan utama merapikan stylesheet adalah memahami mengapa suatu aturan berlaku atau tidak. Setelah setiap selektor memiliki baris sendiri dengan deklarasi berindentasi di bawahnya, Anda dapat mengikuti cascade dengan benar: menemukan semua aturan yang menargetkan elemen, membandingkan spesifisitas, melihat aturan yang muncul terakhir, dan menemukan important yang tanpa disadari menimpa perubahan Anda. Media query beserta isinya kembali terlihat sebagai blok, sehingga perilaku responsif lebih mudah ditelusuri dibandingkan dalam file padat.
CSS modern didukung
Pemformat memahami CSS masa kini, bukan hanya sebagian sintaks lama. Properti kustom, ekspresi calc dan clamp, bentuk singkat grid serta flexbox, container query, aturan bersarang, layer, blok supports, dan keyframe semuanya diformat dengan benar. Daftar selektor panjang dibagi ke beberapa baris agar mudah dibaca, dan komentar yang bertahan dari build tetap disimpan. Jika file mencampurkan CSS standar dan properti berawalan vendor, keduanya tetap dipertahankan dan hanya ditata lebih jelas.
Tips praktis untuk framework hasil kompilasi
Saat Anda merapikan stylesheet Tailwind atau Bootstrap hasil kompilasi, file akan cepat menjadi sangat panjang; puluhan ribu baris adalah hal wajar. Aktifkan nomor baris, lalu gunakan pencarian browser untuk menemukan nama class atau properti yang dibutuhkan, alih-alih terus menggulir. Jika tujuan Anda memperkecil file, perbaikan utama perlu dilakukan pada konfigurasi build, karena aturan yang tidak digunakan sudah dihasilkan bahkan sebelum minifikasi dimulai.
Pertanyaan yang sering diajukan
Bisakah saya menguraikan minifikasi stylesheet Tailwind hasil kompilasi?
Ya, ini salah satu penggunaan paling umum halaman ini. Hasilnya biasanya sangat panjang karena framework menghasilkan satu aturan untuk setiap class utilitas. Mengaktifkan nomor baris dan menggunakan pencarian browser adalah cara praktis untuk menelusurinya.
Apakah komentar dipulihkan?
Hanya komentar yang masih tersisa. Sebagian besar alat minifikasi menghapus semua komentar kecuali pemberitahuan hukum, dan komentar yang sudah dihapus tidak dapat dipulihkan. Pemformat mempertahankan apa yang masih ada di file dan menatanya dengan rapi.
Apakah alat ini mendukung SCSS atau Less?
Halaman ini ditujukan untuk CSS standar, yaitu format yang benar-benar diunduh browser. Sumber praprosesor dengan variabel, mixin, dan sintaks khusus SCSS atau Less bukan masukan yang dituju, meskipun CSS bersarang standar tetap didukung.