Blok yorumlarını temizler ( /* … */ ) — tek satırlık // zaten geçerli sade CSS değildir. { } : ; , ve birleştiriciler ( > ~ + ) etrafındaki boşluğu daraltır. } öncesi sondaki noktalı virgülleri düşürür. Önde gelen sıfırları ( 0.5 → .5 ) keser ve sıfırdan birimleri kaldırır ( 0px → 0 ). Hex renklerini kısaltır kesinse ( #aabbcc → #abc ).

CSS Minifier

CSS'ten yorumları, boşlukları ve gereksizliği temizle. Öncesi/sonrası boyutunu ve tasarruf yüzdesini gör.

Giriş

Çıktı

Bu ne işe yarar?

Kaynakta okunabilir olan CSS — yorumlar, indent ve anlamlı boşluklarla — kullanıcılarının indirdiği dosyayı şişirir. Yapısal bir minifier tüm kozmetik byte'ları (yorumlar, boşluk grupları, gereksiz sıfırlar, eşdeğer kısa hex kodları) kuralların anlamını değiştirmeden temizler. Bu araç bu pasajı tarayıcında çalıştırır ve öncesi/sonrası boyutunu gösterir, böylece tasarrufu görebilirsin.

Ne zaman kullanılır

Bir HTML e-postaya veya blog gönderisi şablonuna bir CSS snippet'i tek seferlik inline gönderme, byte'ları küçültmek istediğinde ama build chain yokken.
Gerçek bir optimizer'ı kurmaya değip değmeyeceğine karar vermeden önce bir stylesheet'te ne kadar "yağ" olduğunu hızlıca kontrol etme.
Üçüncü taraf widget'ında dahil etmek için ince hale getirmek üzere bir vendor'ın güzel basılı CSS'ini yapıştırma.

Ne yapar

Blok yorumlarını temizler (/* … */) — tek satırlık // zaten geçerli sade CSS değildir.
{ } : ; , ve birleştiriciler (> ~ +) etrafındaki boşluğu daraltır.
} öncesi sondaki noktalı virgülleri düşürür.
Önde gelen sıfırları (0.5 → .5) keser ve sıfırdan birimleri kaldırır (0px → 0).
Hex renklerini kısaltır kesinse (#aabbcc → #abc).

Sık yapılan hatalar

Bu yapısal bir minify, tam optimizer değil. Yinelenen selector'ları birleştirmez, kuralları yeniden sıralamaz veya kısaltmayı yeniden yazmaz. Onun için build pipeline'ında cssnano veya esbuild çalıştır.
Source map üretilmez. Production'da minified CSS'i debug ediyorsan, onları ayrıca gönder.
Commit ettiğin CSS'i minify etme. Güzel kaynak commit et; build/deploy'da minify et. İkisini karıştırmak diff incelemesini sefil yapar.
Modern sıkıştırma baskın. Wire üzerindeki Brotli/gzip minification'ın çoğunu yapar. En büyük tasarruflar kullanılmayan kuralları çıkarmaktan gelir — bir tree-shaking işidir, minification değil.