CSS Minifier (CSS Küçültücü)
Bir stil dosyası yapıştırın; boşlukları ve yorumları temizleyin, #ff0000 → red gibi değerleri kısaltın ve CSSO'nun yapısal optimizasyonlarıyla yinelenen kuralları birleştirin.
Tarayıcınızda çalışırKayıt gerekmezHiçbir şey yüklenmez
CSS Minifier nasıl kullanılır?
- CSS'i yapıştırın veya bir
.cssdosyası açın. - Kuralları ve bildirimleri birleştirmek için Yeniden yapılandır'ı açık tutun ya da yalnızca boşlukları temizleyen güvenli bir geçiş için kapatın.
- Lisans yorumlarını koru seçeneğini açık bırakın; böylece
/*! … */bildirimleri korunur. - Orijinal, küçültülmüş ve gzip'lenmiş boyutları karşılaştırın.
- Sonucu kopyalayın veya
output.min.cssolarak indirin.
CSS küçültme nasıl çalışır?
Bu araç CSSO (CSS Optimizer) kullanır; stil dosyanızı bir sözdizimi ağacına ayrıştırır ve eşdeğer en kısa biçimde yeniden yazar. Boşlukları ve yorumları kaldırmanın ötesinde güvenli değer dönüşümleri de uygular:
#ffffff→#fff,#ff0000→red0px→0,0.90→.9margin: 8px 16px 8px 16px→margin:8px 16px- Boş kurallar ve yinelenen bildirimler kaldırılır
“Yeniden yapılandır” ne işe yarar?
Yeniden yapılandırma tüm stil dosyasına bakar: aynı bildirimlere sahip kurallar tek bir seçici listesinde birleştirilir (.a,.b{color:red}) ve tekrarlanan seçiciler bir araya getirilir. Gerçek stil dosyalarında bu genellikle %5–15 ek tasarruf sağlar. CSSO yalnızca cascade sırası değişmiyorsa birleştirme yapar; yine de alışılmadık geçersiz kılmalara güveniyorsanız tamamen sözdizimsel bir küçültme için bu seçeneği kapatabilirsiniz.
CSS neden küçültülmeli?
CSS oluşturmayı (render) engeller: tarayıcı, <head> içindeki stil dosyaları indirilip ayrıştırılmadan sayfayı çizemez. Daha küçük CSS, daha hızlı First Contentful Paint ve daha iyi Core Web Vitals demektir; bu da hem kullanıcılara hem de arama sıralamalarına yarar. En iyi sonuç için küçültmeyi sunucuda gzip veya Brotli ile birleştirin.
Sıkça sorulan sorular
CSS'i küçültmek güvenli mi?
Custom property, nesting ve @layer gibi modern CSS özelliklerini destekliyor mu?
--var), @media, @supports, @layer, @container ve grid sözdizimi korunur.