01 / Contoh
Contoh
Masukan Anda
h1 { color: #334155; margin: 0; }
p { line-height: 1.5; }Hasil
h1{color:#334155;margin:0}p{line-height:1.5}Pemformatan kode / MULTIVERTO
Minimalkan CSS
Buang ruang kosong tata letak aman dari lembar gaya CSS.
Konverter interaktifMasukan Anda tetap di peramban ini. Teks tidak diunggah untuk dikonversi.
Berkas tetap berada di peramban Anda.
Rangkai alat
Terapkan setiap alat teks pada hasil sebelumnya. Alur kerja teks ↗
Hanya nama rangkaian dan urutan alat yang disimpan di peramban ini. Masukan dan hasil Anda tidak pernah disimpan.
02 / Panduan
Minimalkan CSS — Cara kerja
Apa yang berubah dalam alat ini
Buang ruang kosong tata letak aman dari lembar gaya CSS. Menghilangkan ruang kosong tata letak yang dipilih; periksa hasil dimana ruang kosong memiliki arti. Hasil CSS yang kompak menghilangkan komentar biasa dan beberapa ruang kosong di sekitar kurung, tanda kurung dan titik titik. Ruangan yang memisahkan komponen selektor tetap penting. Bandingkan halaman yang dirender sebelum mengganti stylesheet, terutama di mana properti atau nilai fungsi tergantung.
Tahu formatnya
Versi kompak menghilangkan komentar biasa dan ruang tata letak yang dipilih di sekitar tanda baca. Ini secara sengaja kurang agresif daripada produksi CSS minifier. Periksa halaman yang menggunakan stylesheet setelah menyalin hasil.
Alur kerja yang andal
Pemadatan berguna ketika mesin mengkonsumsi hasil dan indentasi yang berhadapan dengan manusia tidak diperlukan. Pertama verifikasi bahwa sumber yang tidak dimodifikasi bekerja, kemudian periksa apa yang operasi menghapus. Alat ini tidak mengklaim penurunan ukuran yang sama sebagai minifier produksi: alat seperti itu dapat menganalisis tata bahasa penuh, menulis ulang identifikator, fold konstanta atau menerapkan kompresi setelah serialisasi. Di sini kebijakan adalah konservatif sehingga konstruksi yang tidak pasti harus tetap utuh atau menyebabkan kesalahan. Dalam contoh hidup, "h1 { color: #334155; margin: 0; } p { line-height: 1.5; }" menjadi "h1{color:#334155;margin:0}p{line-height:1.5}". Baca tanda baca serta kata-kata yang terlihat: sampel kecil itu adalah hasil yang dapat diamati dari operasi tertentu ini. Ubah satu fitur yang Anda pedulikan di sumber dan bandingkan tempat yang sama di hasil. Sebuah lembar gaya kompak masih dapat berisi URL dan nilai data yang dikutip. Coba URL latar belakang dengan tanda baca dan ekspresi calc yang memerlukan ruang di sekitar operator. Jika langkah build tujuan memiliki minifier sendiri, bandingkan hasilnya secara terpisah daripada mengasumsikan dua compactor menerapkan aturan yang sama.
Periksa hasil
Gunakan ini untuk sebuah lembar gaya kecil sebelum menempelkannya ke dalam sistem yang menerima CSS biasa. Periksa halaman yang dirender, bukan hanya jumlah byte: sebuah ruang di selektor descendant, sebuah string di dalam konten, dan ruang di calc() dapat membawa makna. Sebuah pipa produksi dapat melakukan lebih dari kompresor konservatif ini, termasuk prefixing dan bundle. Simpan asli di samping keluaran dan uji contoh kecil yang diketahui sebelum mengendalikan dokumen besar. Bandingkan konten yang berarti, bukan hanya ukuran file atau jumlah baris. Periksa nama, string kutipan, karakter non-ASCII, akhir baris dan semua bidang berulang setelah transformasi.
CSS — Input
Baca dan transformasi struktur
CSS — Hasil
Jelajahi panduan