Peminimum & Pemformat CSS

Apakah alat ini?

CSS minifier menulis semula stylesheet supaya sekecil mungkin tanpa mengubah cara ia dipaparkan: ia membuang komen dan ruang kosong, memendekkan nilai warna dan unit sifar apabila selamat, menggabungkan peraturan berulang, dan membuang semikolon berlebihan.

Alat ini dibina atas clean-css, pengoptimum CSS yang benar-benar menghurai stylesheet menjadi AST dan bukannya menggunakan regex, sebab itulah ia boleh mengendalikan kes tepi yang boleh merosakkan minifier naif dengan selamat — custom property CSS (--main-color: ...), kandungan dalam string, serta selector dan media query kompleks semuanya keluar betul.

Kenapa guna alat ini?

• Minifikasi berasaskan AST (clean-css), bukan regex — selamat dengan custom property, string dan media query bersarang.
• Pengoptimuman Level 2 menggabung dan memudahkan peraturan untuk penjimatan tambahan melebihi pembuangan ruang kosong biasa.
• Lihat tepat berapa bait dan peratusan yang anda jimatkan.
• Mod Format menukar stylesheet yang telah diminify kembali kepada CSS mudah dibaca dengan indeks konsisten.
• Pemprosesan 100% tempatan — gaya proprietari atau belum dikeluarkan tidak pernah meninggalkan pelayar anda.

Cara menggunakannya

1. Tampal CSS anda ke dalam kotak input, atau klik "Load Example" untuk cuba sampel dengan custom property dan media query.
2. Klik "Minify" untuk mampatkannya, atau "Format" untuk cantikkannya dengan indeks 2-ruang.
3. Semak mesej di bawah kotak — mod minify menunjukkan pengurangan saiz; CSS tidak sah menunjukkan ralat yang jelas dan bukannya secara senyap menghasilkan output rosak.
4. Klik "Copy" untuk ambil hasilnya.

Contoh

Input

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Hasil

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Custom property, media query dan susunan cascade semuanya dikekalkan — hanya ruang kosong, komen dan aksara berlebihan yang dibuang.

Tip praktikal

• Minify pada masa build/deploy, bukan semasa pembangunan — edit sumber yang mudah dibaca dan biarkan alat ini (atau saluran build anda) menghasilkan versi yang dilancarkan.
• Jika anda sedang menyahpepijat kenapa halaman kelihatan berbeza dalam pengeluaran, memformatkan CSS yang diminify dahulu memudahkan perbandingan dengan sumber anda.
• Custom property terus wujud selepas minifikasi, jadi stylesheet berasaskan token reka bentuk (menggunakan --spacing, --color-*, dan sebagainya) selamat dijalankan melalui alat ini.
• Gabungkan dengan minifier HTML dan JS di bawah jika projek anda menyimpan semuanya dalam fail berasingan sebelum pelancaran.

Di mana ia sesuai dalam aliran kerja sebenar

CSS adalah antara perkara yang lebih berbaloi untuk diminify kerana stylesheet secara lalai bersifat render-blocking — setiap bait yang dikurangkan daripada stylesheet boleh mengurangkan sedikit masa first paint, terutamanya pada sambungan yang lebih perlahan. Ia kemenangan yang lebih kecil berbanding pengoptimuman imej, tetapi ia hampir percuma sebaik sahaja disambungkan ke dalam langkah build.

Arah Format berguna untuk masalah sebaliknya: memeriksa stylesheet pengeluaran pesaing atau warisan yang dihantar dalam bentuk diminify, untuk memahami strukturnya sebelum menulis override atau reka bentuk semula.

→ Pemampat & Pemformat HTML · Pemin JS

Kes penggunaan biasa

• Mengecilkan stylesheet sebelum melancarkan laman statik atau halaman pendaratan.
• Memformatkan semula fail CSS yang diminify diambil daripada laman langsung untuk kaji strukturnya.
• Membersihkan CSS yang dieksport daripada alat reka bentuk, yang selalunya mengandungi komen dan ruang kosong berlebihan.
• Menyemak dengan pantas sama ada cebisan CSS ditulis tangan dihurai dengan betul, kerana CSS cacat muncul sebagai ralat jelas.

Soalan lazim