CSS Küçültücü - DigiKitApp

CSS kodundaki gereksiz boşlukları temizleyin.

Ne zaman kullanmalısın?

Bir web sitesinin yayına alınmadan önce dosya boyutunu küçültmek, gereksiz boşluk ve yorumları temizleyerek sayfa yükleme hızını artırmak için kullan.

Ne zaman kullanmamalısın?

Geliştirme aşamasında minify edilmiş kodu okumak/düzenlemek zor; minify işlemini sadece canlıya almadan hemen önceki son adım olarak yap.

Adım adım kullanım

Yayına almak istediğin stil dosyasının son halini CSS kodu alanına yapıştır.
Çalıştır butonuna bas.
Sonuçtaki kısaltılmış kodu kopyala ve style.min.css gibi ayrı bir dosya olarak kaydet. Okunabilir orijinali silme.
HTML'deki bağlantıyı yeni dosyaya çevir ve sayfayı birkaç farklı tarayıcıda açıp görünümün bozulmadığını kontrol et.

Örnek

Tek sayfalık bir tanıtım sitesi hazırladın ve elinde bol yorum satırı, boş satır ve girinti içeren bir style.css var. Dosyayı buraya yapıştırıp küçülttüğünde aynı kurallar tek satırda, boşluklardan arınmış olarak çıkar. Bu yeni dosyayı sunucuya yükleyip HTML'de onu çağırırsın. İleride bir rengi değiştirmen gerektiğinde değişikliği yine okunabilir style.css üzerinde yapar, ardından küçültme adımını tekrarlarsın.

Küçültmeden önce ve sonra iki dosyanın boyutunu karşılaştırmak da faydalı. Fark azsa dosyan zaten sadeymiş demektir ve hız sorununun kaynağını başka yerde, örneğin büyük görsellerde veya kullanılmayan kütüphanelerde aramak daha verimli olur. Fark büyükse, bu adımı her yayından önce yapılan sabit bir iş haline getirmek iyi bir alışkanlık olur.

CSS küçültme ne işe yarar?

CSS küçültme, tarayıcının anlamasına gerek olmayan boşlukları, satır sonlarını ve yorumları silerek dosyayı küçültür. Küçük dosya daha hızlı iner ve sayfa daha çabuk görüntülenir. Kod davranışı aynı kalır; yalnızca okunabilirliği azalır. Bu yüzden geliştirirken okunabilir sürümü saklayıp yayına küçültülmüş sürümü almak yaygın bir yöntemdir.

Küçültürken ipuçları

Orijinal CSS'inizi saklayın; küçültülmüş dosyayı düzenlemek zordur.
Sunucunuzda gzip ya da brotli sıkıştırma varsa kazanç daha da artar.
Küçültmeden sonra sayfanın görünümünü kontrol edin.
Kullanılmayan CSS'i silmek, küçültmeden daha büyük kazanç sağlayabilir.

Dikkat edilmesi gerekenler

Küçültülmüş dosya senin kaynağın değil, bir çıktı. İki dosyayı birbirine karıştırmamak için adlandırmayı baştan net tut.
Sunucunda gzip veya Brotli sıkıştırma açıksa dosya tarayıcıya zaten sıkıştırılarak gider. Küçültme yine faydalıdır ama asıl kazancı çoğu zaman bu ikisinin birlikteliği sağlar.
Lisans bilgisi içeren yorumlar, örneğin bir kütüphanenin telif notu, küçültme sırasında silinebilir. Lisans bunu korumanı istiyorsa ayrıca kontrol et.
Tarayıcı önbelleği yüzünden ziyaretçiler eski dosyayı görmeye devam edebilir. Dosya adına sürüm eklemek bu sorunu çözer.

Sık sorulan sorular

Girdiğim kod/veri kaydediliyor mu?

Hayır, hiçbir veri sunucuya gönderilmez veya saklanmaz; işlem tamamen tarayıcınızda gerçekleşir.

Büyük dosyalarda çalışır mı?

Evet, ancak çok büyük girdilerde (birkaç MB üzeri) tarayıcı performansı düşebilir.

Bu araç ücretsiz mi?

Evet, temel kullanım için tamamen ücretsizdir ve üyelik gerektirmez.