Cara menggunakannya

Tampal CSS ke dalam kotak input, buka fail .css, atau cuba contoh.
Pilih Beautify untuk kod yang mudah dibaca atau Minify untuk output yang paling kecil.
Apabila mencantikkan kod, pilih 2 ruang, 4 ruang atau tab.
Salin hasil atau muat turun sebagai fail .css. Jika tanda kurung atau tanda petik tidak seimbang, ralat menunjukkan baris dan lajur.

Cara ia berfungsi

Pemformat terlebih dahulu memecahkan helaian gaya kepada token: rentetan dalam petikan tunggal atau ganda, nilai url(…), komen, tanda kurung kerinting dan koma bertitik. Oleh sebab rentetan dan url() ialah token tunggal, koma bertitik di dalam URI data atau tanda kurung kerinting di dalam content: "{ }" tidak akan mengelirukan struktur, dan kandungannya disalin dengan tepat.

Beautify meletakkan setiap pemilih daripada senarai pemilih pada baris sendiri, menambah ruang di sekeliling penggabung anak, saudara dan bersebelahan (>, ~, +), dan menulis setiap pengisytiharan sebagai “property: value;” pada baris sendiri. Blok di dalam @media, @supports, @layer, @container dan sarang CSS natif diinden satu aras bagi setiap kedalaman. Koma bertitik yang tertinggal selepas pengisytiharan terakhir sesuatu blok akan ditambah. Komen dikekalkan di tempat asalnya.

Minify membuang komen (kecuali notis lesen /*! … */), meruntuhkan ruang putih, membuang ruang di sekeliling tanda kurung kerinting, titik bertindih, koma bertitik, koma dan penggabung pemilih, serta menggugurkan koma bertitik sebelum setiap tanda kurung kerinting tutup. Ruang yang mengubah makna dikekalkan: penggabung keturunan dalam “.a .b”, ruang dalam “a :focus”, dan ruang di dalam nilai seperti calc(100% - 2px). “! important” dinormalkan kepada “!important”.

Alat ini tidak menulis semula nilai: warna, unit dan sifar dikekalkan seperti yang ditulis, dan peraturan tidak digabungkan atau disusun semula. Fail SCSS atau Less dengan sarang biasa biasanya berfungsi, tetapi sintaksnya sendiri seperti komen baris // atau mixin tidak difahami.

Contoh

Membaca fail framework yang diminimumkan

Tampal satu baris petikan bootstrap.min.css dan pilih Beautify dengan 2 ruang untuk melihat setiap peraturan, pertanyaan media dan peraturan bersarangnya pada baris berasingan yang diinden.

Menghantar helaian gaya tulisan tangan

Minimumkan helaian gaya 12 KB yang mempunyai komen dan inden sebelum menambahkannya secara sebaris ke dalam templat e-mel atau kepala halaman. Ringkasan menunjukkan kiraan aksara sebelum dan selepas.

Mencari tanda kurung yang hilang

Helaian gaya berhenti berfungsi separuh jalan ke bawah. Pemformat melaporkan “{ ini tidak pernah ditutup dengan } yang sepadan” bersama baris peraturan yang kehilangan tanda kurung penutupnya.

Soalan Lazim

Adakah CSS yang diminimumkan oleh alat ini selamat digunakan dalam persekitaran pengeluaran?

Ia hanya membuang komen dan ruang kosong yang diabaikan oleh CSS, jadi peraturan berfungsi sama. Ia tidak melakukan pengoptimuman lebih mendalam seperti alat binaan seperti menggabungkan peraturan atau memendekkan warna, jadi hasilnya mungkin lebih besar sedikit berbanding hasil alat tersebut.

Mengapa ruang dikekalkan dalam “a :focus”?

Dalam pemilih, ruang ialah kombinator keturunan. “a :focus” bermaksud elemen berfokus di dalam pautan, manakala “a:focus” bermaksud pautan berfokus. Mengalih keluar ruang itu akan mengubah elemen yang dipadankan.

Bolehkah ia memformat SCSS atau Less?

Peraturan bersarang biasa diformat dengan betul. Sintaks khusus pra-pemproses seperti komen //, mixin dengan argumen atau blok @if tidak difahami dan mungkin diformat dengan aneh, jadi semak hasilnya.

Adakah komen lesen dialih keluar semasa minify?

Komen yang bermula dengan /*! dikekalkan, iaitu konvensyen biasa untuk notis lesen dan hak cipta. Semua komen lain dialih keluar.

Privasi

CSS anda diproses hanya dalam penyemak imbas anda. Tiada apa-apa dimuat naik, disimpan atau disertakan dalam analitik.