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

Küçültülmüş çıktı

CSS Minifier nasıl kullanılır?

  1. CSS'i yapıştırın veya bir .css dosyası açın.
  2. 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.
  3. Lisans yorumlarını koru seçeneğini açık bırakın; böylece /*! … */ bildirimleri korunur.
  4. Orijinal, küçültülmüş ve gzip'lenmiş boyutları karşılaştırın.
  5. Sonucu kopyalayın veya output.min.css olarak 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 → red
  • 0px → 0, 0.90 → .9
  • margin: 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?
Evet. Boşluklar ve yorumlar CSS'in nasıl görüntülendiğini etkilemez ve CSSO'nun değer dönüşümleri spesifikasyona göre eşdeğerdir. Yeniden yapılandırma cascade sırasını korur; en temkinli çıktıyı istiyorsanız kapatın.
Custom property, nesting ve @layer gibi modern CSS özelliklerini destekliyor mu?
Evet. Custom property'ler (--var), @media, @supports, @layer, @container ve grid sözdizimi korunur.
Küçültülmüş CSS'i daha sonra geri açabilir miyim?
Küçültülmüş CSS herhangi bir formatter ile yeniden girintilenebilir, ancak silinen yorumlar geri getirilemez. Orijinal kaynak dosyanızı saklayın ve küçültülmüş dosyayı bir build çıktısı olarak görün.
Stil dosyam bir yere yükleniyor mu?
Hayır. Küçültme tarayıcınızda çalışır; hiçbir şey sunucuya gönderilmez.

İlgili araçlar