Ücretsiz CSS Minifier: CSS Kodunu Çevrimiçi Olarak Sıkıştırın ve İyileştirin

CSS Küçültücü Nedir?

CSS küçültücü, tarayıcıların ihtiyaç duymadığı karakterleri çıkararak bir CSS (Basamaklı Stil Sayfaları) dosyasını küçülten bir araçtır. Görünümü değiştirmeden yorumları, fazladan boşlukları ve satır sonlarını kaldırır, ayrıca yaygın bazı kalıpları kısaltır. Sonuç, tarayıcının daha hızlı indirip ayrıştırabileceği daha küçük bir dosyadır.

CSS Küçültme Nasıl Çalışır?

Web geliştiricileri, kodu okumayı ve düzenlemeyi kolaylaştırdığı için CSS'yi yorumlar, girintiler ve boş satırlarla yazar. Tarayıcılar bu biçimlendirmenin tamamını yok sayar. Küçültücü, görsel açıdan hiçbir amaca hizmet etmeyen birkaç başka baytla birlikte bunları da siler ve düzenleme yerine üretimde kullanılmak üzere tasarlanmış kompakt bir dosya bırakır.

Bu araç aşağıdaki değişiklikleri uygular:

• Yorumları kaldırır. Her /* ... */ bloğu silinir.
• Boşlukları birleştirir. Kurallar arasındaki boşluk, sekme ve satır sonu dizileri tamamen kaldırılır veya boşluğun anlamlı olduğu yerlerde tek bir boşluğa indirilir; örneğin bir alt öğe seçicisinde .parent ile .child arasında.
• Noktalama işaretlerinin çevresindeki boşlukları kaldırır. {, }, :, ; ve , işaretlerinin yanındaki boşluklar silinir.
• Fazladan noktalı virgülleri kaldırır. Tekrarlanan noktalı virgüller tek bir noktalı virgüle indirilir ve kapanış } işaretinden önceki son noktalı virgül kaldırılır.
• Onaltılık renkleri kısaltır. #ffffff gibi altı basamaklı bir renk, her basamak çifti aynı olduğunda (kırmızı, yeşil ve mavi) #fff biçimine dönüşür. Alfa kanalı içeren #ffaa00cc gibi sekiz basamaklı bir renk de dört çiftin tümü aynı olduğunda aynı şekilde kısaltılır.
• Sıfır uzunluklu değerlerde birimi kaldırır. 0px, 0em ve 0rem değerleri 0 olur. Yüzde değerleri olduğu gibi bırakılır; çünkü örneğin bir flex-basis veya @keyframes adımında 0% her zaman yalın 0 ile birbirinin yerine kullanılamaz.
• Ondalık sayılardaki baştaki sıfırı kaldırır. 0.5, .5 olur.

Dosyanın bozulmasını önlemek için araç üç tür içeriğe dokunmaz: tırnak içindeki metne, tırnaksız url() içindeki değere ve calc(), clamp(), min() ile max() gibi matematik işlevlerinin içeriğine. calc(100% - 20px) içindeki boşluklar tarayıcı için önemlidir; bu nedenle araç bunları tam olarak korur.

Araç, yinelenen seçicileri birleştirmez, boş kural bloklarını silmez ve rgb() renklerini onaltılık biçime dönüştürmez. Bunlar başka araçların gerçekleştirdiği geçerli iyileştirmelerdir; ancak bu küçültücü yukarıda listelenen değişikliklere odaklanır.

Küçültme Yüzdesi Formülü

Araç, dosyanın yüzde olarak ne kadar küçüldüğünü bildirir:

Her iki uzunluk da karakter cinsinden sayılır. Sonuç iki ondalık basamağa yuvarlanır.

Çözümlü örnek

Özgün CSS (193 karakter):

Küçültülmüş çıktı (129 karakter):

Formül uygulanınca: (193 − 129) / 193 × 100 = %33,16. Yorum kaldırılmış, girintiler ve satır sonları silinmiş, 0px değeri 0 olmuş ve #ffffff/#000000 değerleri #fff/#000 biçimine dönüşmüştür.

Kesin yüzde girişe bağlıdır. Az sayıda yorum içeren, sıkı yazılmış CSS daha az küçülür. Çok yorumlu ve derin girintili CSS daha fazla küçülebilir. Bu araçla küçültülen tipik stil sayfalarında yaklaşık %20 ile %40 arasında küçülme görülür.

Bu Araç Nasıl Kullanılır?

1. CSS kodunu soldaki giriş kutusuna yapıştırın.
2. Küçültülmüş sürüm, basılacak bir düğme olmadan sağda otomatik olarak görünür.
3. Çıktının üzerinde gösterilen küçültme yüzdesini kontrol edin.
4. Küçültülmüş CSS'yi kopyalamak için "Panoya Kopyala" seçeneğini belirleyin, ardından kodu bir proje dosyasına yapıştırın.
5. Her iki kutuyu da silip baştan başlamak için "Temizle" seçeneğini belirleyin.

Araca yazılan hiçbir şey sunucuya gönderilmez; küçültme tarayıcıda gerçekleştirilir.

CSS Ne Zaman Küçültülmeli?

Geliştirme ekipleri, değişikliğin her dağıtımdan önce otomatik olarak gerçekleşmesi için CSS'yi genellikle Webpack veya npm betikleri gibi araçlarla derleme süreçlerinin bir adımı olarak küçültür. Okunabilir ve yorum içeren kaynak dosyası sürüm denetiminde kalır; yalnızca üretim derlemesi küçültülür. Küçültülmüş CSS'nin yaygın olarak kullanıldığı yerler şunlardır:

• Büyük web siteleri, örneğin daha küçük bir stil sayfasının daha hızlı yüklenen bir sayfa anlamına geldiği çevrim içi mağazalar.
• React veya Vue gibi çerçevelerle oluşturulan tek sayfalı uygulamalar; bu uygulamalarda CSS, JavaScript ile birlikte paketlenir.
• Mobil web sayfaları; kullanıcıların daha yavaş bir bağlantı kullanma olasılığı daha yüksektir.
• HTML e-postaları; bunlarda genellikle katı boyut sınırları bulunur.

CSS Küçültme ve Sayfa Hızı

Daha küçük bir CSS dosyası daha hızlı indirilir ve ayrıştırılır; bu da sayfanın görünür hâle gelmesinden önceki süreyi kısaltabilir. Google, sayfa hızının arama sıralamasında kullanılan sinyallerden biri olduğunu belirtmiştir; bu nedenle daha hızlı bir sayfa, bir sitenin arama sonuçlarındaki performansını etkileyen birçok küçük faktörden biri olabilir. Tek başına küçültme sıralamanın değişeceğini garanti etmez; görsel sıkıştırma ve sunucu yanıt süresi gibi birkaç iyileştirmeden biridir.

CSS Küçültücü ile CSS Güzelleştirici Karşılaştırması

Küçültücü, kodu üretim için sıkıştırır. Güzelleştirici ise tersine, sıkıştırılmış CSS'yi alır ve bir kişinin yeniden okuyabilmesi için girintiler ve satır sonları ekleyerek yeniden biçimlendirir. Güzelleştirici, küçültme sırasında kaldırılan yorumları veya özgün değişken adlarını geri getiremez; çünkü silindiklerinde bu bilgiler artık mevcut değildir.

Sık sorulan sorular

Küçültmeden sonra CSS ne kadar küçülür? Bu araçta sonuç genellikle %20 ile %40 arasındadır; bu oran özgün dosyada kaç yorum, boş satır ve girinti bulunduğuna bağlıdır. Başlangıçta az biçimlendirme içeren bir dosya daha az küçülür.

CSS'yi küçültmek sayfanın görünümünü değiştirir mi? Hayır. Küçültme yalnızca yorumlar ve fazladan boşluklar gibi tarayıcıların yok saydığı karakterleri kaldırır ve bazı eşdeğer değerleri yeniden yazar; örneğin #ffffff değeri #fff olur. Oluşturulan sayfa aynı kalır.

CSS geliştirme sırasında küçültülmeli mi? Hayır. Kod yazarken ve hatalarını ayıklarken okunabilir, yorum içeren sürümü koruyun. Yalnızca üretim sunucusuna gönderilen kopyayı, genellikle derleme sürecinde otomatik bir adım olarak küçültün.

Küçültülmüş CSS özgün dosyaya geri dönüştürülebilir mi? Bir güzelleştirici, küçültülmüş CSS'yi girintiler ekleyerek yeniden biçimlendirebilir; ancak silinen yorumları geri getiremez veya küçültülmüş sürümde hiç bulunmamış açıklayıcı adları yeniden oluşturamaz. Özgün kaynak dosyasını saklayın.

Bu araç rgb() renklerini onaltılık biçime dönüştürür mü veya yinelenen seçicileri birleştirir mi? Hayır. Onaltılık renkleri kısaltır ve gereksiz karakterleri kaldırır; ancak rgb()/hsl() değerlerini yeniden yazmaz veya yinelenen seçicileri birleştirmez. Diğer bazı küçültücüler bu ek adımları gerçekleştirir.

Küçültme gzip sıkıştırmasıyla aynı mıdır? Hayır. Küçültme, kaynak kodunun kendisindeki gereksiz karakterleri kaldırır. Gzip (veya Brotli) sıkıştırması, dosya gönderilirken web sunucusu tarafından ayrı bir algoritma kullanılarak uygulanır. İkisinin birlikte kullanılması ağ üzerinden gönderilen en küçük dosyayı sağlar.