Langsung ke konten utama
LibraTool logoLibraTool

Beautifier CSS gratis

Rapikan CSS yang diminify dengan indentasi konsisten, atau minify CSS. Opsi pengurutan properti secara alfabetis untuk perbandingan perubahan yang lebih mudah diprediksi.

Berfungsi offline setelah dimuat

Letakkan file di sini, atau klik untuk memilih

CSS · diproses di perangkat Anda

atau tekan Ctrl+V untuk menempel dari papan klip

Jelajahi file
CSS yang diformat
Output akan muncul di sini…

Penggunaan umum

  • Debug CSS ProduksiLihat CSS yang diperkecil dari situs produksi dalam format yang dapat dibaca untuk menemukan dan merekayasa balik styling.
  • Enforce Gaya CSS TimJalankan CSS yang dikirimkan tim melalui beautifier yang konsisten sehingga diff adalah tentang konten, bukan pemformatan.
  • Format CSS dengan Awalan VendorCSS dengan awalan vendor (keluaran autoprefixer) sering memiliki banyak varian -webkit-, -moz-, -ms-. Format untuk diperiksa.
  • Belajar dari Pro CSSPelajari CSS dari sistem desain terkenal dengan memformat output yang dikompilasi.
  • Format CSS untuk Laporan BugSaat mengajukan bug CSS, CSS berformat jauh lebih mudah bagi pengulas untuk dibaca dan dipahami.

Cara kerja

Alat ini memformat CSS menggunakan parser rekursif tulisan tangan yang dibangun langsung ke dalam halaman — tanpa library pihak ketiga, tanpa panggilan server. Parser menelusuri CSS Anda karakter demi karakter, menangani dengan benar string berkutip, nilai url(), at-rule bersarang, dan komentar yang akan membingungkan pendekatan berbasis regex yang lebih sederhana.

  1. 1
    Tokenisasi tingkat karakter
    Fungsi walkCss memindai masukan mentah satu karakter pada satu waktu, melacak state kutip dan kedalaman tanda kurung sehingga titik koma atau kurung kurawal di dalam url(), nilai string, atau komentar tidak pernah salah dianggap sebagai pembatas struktural.
  2. 2
    Pemisahan blok dan deklarasi
    Saat pemindai menemukan kurung kurawal pembuka tingkat atas, ini mengekstrak prelude (pemilih atau kata kunci at-rule) dan memproses secara rekursif isi blok — yang sendiri bisa berisi aturan bersarang (@media, @supports, nesting CSS native) ditangani pada kedalaman rekursi yang lebih dalam.
  3. 3
    Pengurutan properti dan indentasi
    Deklarasi dalam setiap blok dikumpulkan menjadi satu rangkaian, lalu opsional diurutkan alfabetis berdasarkan nama properti sebelum ditulis dengan lebar indentasi yang dipilih (2 atau 4 spasi). Mode minify melewati spasi sepenuhnya dan menghapus komentar.
  4. 4
    Keluaran instan di browser
    Hasil muncul saat Anda mengetik via hook useMemo — tidak ada yang dikirim ke mana pun. CSS yang diformat atau di-minify dapat disalin ke clipboard atau diunduh sebagai file .css, dan panel menampilkan selisih ukuran dibandingkan dengan aslinya.

Alat terkait

🌐

Beautifier & Minifier HTML

Pretty-print atau minifikasi HTML dengan indentasi nesting yang tepat. Mempertahankan konten di dalam blok <pre>, <script>, <style>.

Coba
🗄️

Formatter & Beautifier SQL

Pretty-print query SQL dengan indentasi yang tepat, kapitalisasi kata kunci yang dapat dikonfigurasi, dan jeda baris pada klausa utama. Berfungsi dengan dialek SQL apa pun.

Coba
🗜️

Minifier & Beautifier CSS

Minifikasi CSS untuk mengurangi ukuran file atau rapikan CSS yang sudah diminifikasi agar mudah dibaca. Instan, di browser Anda.

Coba

Pertanyaan yang sering diajukan