Pemintas & Pemperindah CSS

Tempel stylesheet dan dapatkan kembali baik dikompres ke ukuran paling aman atau diperluas menjadi kode bersih dan terindentasi. Alat yang sama melakukan kedua arah, sehingga Anda dapat meminimalkan stylesheet untuk produksi dan membatalkan minifikasi file vendor yang perlu dibaca — tanpa meninggalkan halaman.

Cara menggunakannya

1. Tempel CSS Anda ke kotak input, atau unggah file .css.
2. Pilih Format:
   • Minimalkan — semuanya dengan byte paling sedikit.
   • Minimalkan, tapi pertahankan jeda baris — deklarasi diminimalkan, satu aturan per baris. Berguna ketika Anda masih ingin membedakan output atau membaca stack trace terhadapnya.
   • Pemperindah — indentasi ulang dan perluas stylesheet. Pilih 2 spasi, 4 spasi atau tab.
3. Salin hasilnya, atau unduh sebagai file .css.

Output diperbarui saat Anda mengetik. Tidak ada yang dikirimkan ke mana pun — lihat catatan privasi di bawah.

Apa yang sebenarnya dihapus saat minifikasi

Komentar, dan setiap run whitespace yang tata bahasa CSS tidak mungkin perlukan. Deklarasi menjadi color:red, ; terakhir sebelum } dijatuhkan, !important kehilangan spasi awalnya, dan kombinators pemilih kencang (a > b + i menjadi a>b+i).

Apa yang dengan sengaja tidak disentuhnya sama pentingnya:

• String tetap identik byte. content: "/* not a comment */" adalah string, bukan komentar, dan keluar utuh.
• Nilai url() bersifat opak — termasuk unquoted data: URI yang diisi dengan ; dan , yang pemotong regex naif akan menghancurkan.
• calc() menjaga spasisnya. calc(100% - 10px) valid; calc(100%-10px) adalah kesalahan sintaks. Spasi di sekitar + dan - di dalam nilai adalah load-bearing dan dipertahankan.
• Kombinators turunan bertahan. p :first-child (setiap anak pertama di dalam p) bukan pemilih yang sama dengan p:first-child (a p yang merupakan anak pertama). Spasi di antara mereka tetap.
• Komentar /*! … */ bang disimpan, yaitu bagaimana header lisensi secara konvensional ditandai.

Apakah itu mengganti nama kelas atau menulis ulang properti saya?

Tidak. Ini adalah pemintas whitespace-and-comment, bukan optimizer. Tidak akan menggabungkan aturan duplikat, menghapus kosong, mempersingkat #ffffff menjadi #fff, atau menyusun ulang apa pun. Output selalu stylesheet yang berperilaku persis seperti input — output yang lebih kecil tidak pernah bernilai diam-diam mengubah apa yang CSS Anda lakukan.

Berapa banyak CSS saya akan lebih kecil?

Biasanya 20–35% pada CSS yang ditulis tangan, sebagian besar dari indentasi dan komentar. CSS yang sudah diminimalkan akan hampir tidak bergerak. Melayani hasil dengan kompresi gzip atau brotli memberi Anda jauh lebih banyak daripada minifikasi, jadi lakukan keduanya.

Bisakah saya membatalkan minifikasi stylesheet?

Ya — itulah Pemperindah untuk. Tempel CSS diminimalkan, pilih indentasi Anda, dan Anda mendapatkan stylesheet yang dapat dibaca kembali. Komentar yang bertahan dari minifikasi asli dipertahankan dan dimasukkan di baris mereka sendiri.

Mengapa aturan kosong saya tetap ada?

Karena menghapus aturan adalah perubahan struktural, dan alat ini hanya melakukan whitespace dan komentar. .unused {} tidak berbahaya; jika Anda ingin hilang, hapus di sumber Anda.

Apakah CSS saya diunggah ke mana pun?

Tidak. Pemintas berjalan sepenuhnya di browser Anda — stylesheet Anda tidak pernah dikirim ke server, tidak pernah dicatat, dan tidak pernah disimpan. Mengunggah file membacanya secara lokal di halaman. Anda dapat memutuskan dari jaringan dan alat masih berfungsi.