CSS kodunuzu sıkıştırın veya güzelleştirin. Yorum satırlarını kaldırın, boşlukları optimize edin, dosya boyutunu küçültün.
CSS minification, yorum satırlarını ve gereksiz boşlukları kaldırarak dosya boyutunu küçültür. Bu, sayfa yükleme süresini doğrudan etkiler. Beautifier ise sıkıştırılmış CSS'i tekrar okunabilir formata dönüştürür.
CSS dosyaları geliştirme sürecinde okunabilirlik için girintiler, boşluklar ve açıklayıcı yorumlar içerir. Ancak bu karakterler tarayıcı için herhangi bir anlam taşımaz ve yalnızca dosya boyutunu artırır. Minification işlemi bu gereksiz karakterleri kaldırarak dosyayı mümkün olan en küçük boyuta indirger.
1. Mod Seçin: Üst kısımdan "Sıkıştır" (minify) veya "Güzelleştir" (beautify) modunu seçin. Sıkıştırma modu dosya boyutunu küçültür, güzelleştirme modu sıkıştırılmış kodu okunabilir hale getirir.
2. CSS Kodunu Girin: Metin alanına CSS kodunuzu yapıştırın veya bir .css dosyasını sürükleyip bırakın.
3. Seçenekleri Ayarlayın: "Yorumları kaldır", "Fazla boşlukları kaldır" ve "Sıfırları kısalt" seçeneklerini ihtiyacınıza göre açıp kapatın.
4. İşleyin: "İşle" düğmesine tıklayın. Çıktı sağ panelde görünür. Orijinal ve çıktı boyutlarıyla tasarruf yüzdesi otomatik olarak hesaplanır.
5. Sonucu Alın: "Kopyala" ile panoya alın veya "İndir" ile .min.css dosyası olarak kaydedin.
CSS sıkıştırma işlemi sırasında şu öğeler kaldırılır veya optimize edilir:
Yorum satırları: /* ... */ biçimindeki geliştirici notları tamamen silinir. Bu yorumlar genellikle dosya boyutunun önemli bir bölümünü oluşturur.
Gereksiz boşluklar ve satır sonları: Girintiler, fazla boşluklar ve boş satırlar kaldırılır. Seçiciler, özellikler ve değerler arasındaki boşluklar minimuma indirilir.
Gereksiz noktalı virgüller: Bir CSS bloğundaki son kuralın ardındaki noktalı virgül kaldırılır (ör. color:red; yerine color:red).
Sıfır optimizasyonu: 0px, 0em, 0rem gibi değerler birim belirtilmeden 0 olarak kısaltılır; 0.5 gibi değerler .5 şeklinde yazılır.
Bu optimizasyonların hiçbiri CSS'in işlevselliğini değiştirmez; tarayıcı her iki biçimi de aynı şekilde yorumlar.
CSS dosya boyutunun küçülmesi sayfa yükleme süresini birkaç yönden iyileştirir. Daha küçük dosya daha hızlı indirilir; bu, özellikle mobil ağlarda belirgin bir fark yaratır. Tarayıcı CSS dosyasını indirmeden sayfayı render edemediği için (render-blocking kaynak), her kilobaytlık tasarruf ilk görüntüleme süresini kısaltır. Ayrıca CDN ve sunucu bant genişliğinden tasarruf sağlanır.
CSS minify işlemi CSS'imi bozar mı?
Hayır. Minification yalnızca tarayıcının yoksaydığı karakterleri (boşluk, yorum, gereksiz noktalı virgül) kaldırır. CSS kurallarının anlamı ve sırası değişmez, dolayısıyla stilleriniz tam olarak aynı şekilde uygulanır.
Minify ne kadar tasarruf sağlar?
Tipik olarak %20–60 arası boyut tasarrufu sağlanır. Yorum ağırlıklı ve çok sayıda boşluk içeren kodlarda bu oran daha yüksek olabilir. Gzip sıkıştırmasıyla birleştirildiğinde toplam kazanım %70–80'e ulaşabilir.
Canlı ortamda (production) CSS'i minify etmeli miyim?
Evet, kesinlikle. Modern web geliştirme iş akışlarında CSS dosyalarının canlı ortama minify edilmiş olarak çıkması standart bir uygulamadır. Geliştirme ortamında okunabilir kodu, canlı ortamda sıkıştırılmış kodu kullanmak en iyi yaklaşımdır.
Source map nedir ve minify ile nasıl çalışır?
Source map, sıkıştırılmış kod ile orijinal kaynak kod arasında bir eşleme dosyasıdır. Tarayıcının geliştirici araçlarında hata ayıklama yaparken, minify edilmiş kod yerine orijinal okunabilir kodu görmenizi sağlar. Build araçları (Webpack, Vite gibi) genellikle source map'leri otomatik oluşturur.
Media query'leri düzgün şekilde işler mi?
Evet. Minification, @media bloklarının yapısını ve mantığını korur. Yalnızca blok içindeki gereksiz boşluklar ve yorumlar kaldırılır. İç içe geçmiş media query'ler, breakpoint değerleri ve koşullar olduğu gibi kalır.