CSS Küçültücü ve Biçimlendirici: Küçültün ya da Düzenleyin

Nasıl kullanılır?

Stil sayfanızı CSS alanına yapıştırın. Metinler ve url() değerleri olduğu gibi korunur.
Mod seçimini daha küçük bir dosya için Küçült'te bırakın, ya da okunması kolay olsun diye Biçimlendir'i seçin.
Ne kadar kazandığınızı görmek için Önceki bayt sayısı ile Sonraki bayt sayısını karşılaştırın.
Sonuç kutusunu kopyalayın ya da styles.css olarak indirin.

Küçültme neyi siler, neyi korur?

Bir CSS yorumu /* ile başlar ve */ ile biter; /*! ile başlayan bir bildirim dışında silinir. Bildirim, taşıdığı lisans ya da kredi için korunur. CSS Syntax belirtimi yorumu tanımlar; araç metinleri ve url() değerlerini aynı kurallara göre okur, bu yüzden içerikleri olduğu gibi kopyalanır.

Boşluklar, dilbilgisinin gerektirmediği yerlerden çıkar: süslü parantezlerin, virgüllerin ve tanımlardaki iki noktanın çevresinden ve ünlem işaretinden önce. Bir bloğun son noktalı virgülü de gider, çünkü kapanış parantezi bloğu zaten bitirir. Seçicide iki noktadan önceki boşluk kalır; çünkü .card :hover ile .card:hover farklı şeyler anlatır.

a { color : red ; }  olur  a{color:red}

Renkler, sıfırlar ve yapılmayan kısaltmalar

Çiftleri tekrar eden bir hex renk üç ya da dört haneyle yazılır: #ffffff, #fff olur; #aabbccdd, #abcd olur. Harfler küçük yazılır. Bir seçicideki renk hiç değişmez, çünkü #aabbcc gibi bir seçici bir kimliği gösterir.

Bir değerin başındaki 0px, 0 olur. calc() gibi bir işlevin içinde ve iki kısa çizgiyle başlayan özel bir özellikte uzunluk olduğu gibi kalır; çünkü çıplak 0 her bağlamda uzunluk olarak okunmaz. Biçimlendirme hiçbir rengi ya da uzunluğu değiştirmez.

Boyutlar UTF-8 baytı olarak sayılır; sunucunun dosyayı gönderdiği biçim budur. Aksanlı bir harf iki bayt tutar.
Küçülttükten sonra sayfayı deneyin; eski bir tarayıcı için yazılmış nadir bir numara, araç tarafından silinen bir boşluğa bağlı olabilir.

Örnek: bir yorum, bir renk ve bir sıfır içeren kural

Metin .card { color: #aabbcc; /* not */ margin: 0px 10px; } bir yorum, çiftleri tekrar eden bir hex renk ve bir değerin başında sıfır uzunluk içerir. Küçültmek yorumu ve boşlukları siler, rengi #abc, sıfırı 0 yapar.

Sonuç .card{color:#abc;margin:0 10px} olur ve kural daha önce olduğu gibi çalışır.

Sık sorulan sorular

Küçültülmüş CSS tarayıcı için orijinaliyle aynı mı?

Evet; tarayıcı için kurallar aynı biçimde uygulanır, çünkü araç yalnızca CSS dilbilgisinin gerektirmediği şeyleri çıkarır. Yine de küçülttükten sonra sayfayı kontrol edin; nadir bir numara bir boşluğa bağlı olabilir.

Araç neden her sıfır birimini silmiyor?

calc() gibi bir işlevin içinde ve özel bir özellikte sıfır her zaman uzunluk olarak okunmaz. Bu yüzden araç 0px'i yalnızca bir değerin başında kısaltır; böylece sonuç ele aldığı her durumda güvenli kalır.

Biçimlendirme yorumları neden kendi satırlarına koyuyor?

Her yorum ait olduğu kuralın düzeyinde kendi satırına yazılır, böylece stil sayfasının yapısı izlenmesi kolay kalır. /*! ile başlayan bildirimler de korunur.

Araç CSS'imde hata arıyor mu?

Hayır. Araç yapıyı okur: süslü parantezlerin, metinlerin ve tırnaksız url() değerlerinin kapandığını denetler. Bir özelliğin adının ya da değerinin geçerli olup olmadığını denetlemez; bunun için bir doğrulayıcı kullanın.

CSS'im bir yere gönderiliyor ya da saklanıyor mu?

Hayır. Küçültme ve biçimlendirme tarayıcınızda çalışır. Hiçbir şey saklanmaz ya da sunucumuza gönderilmez; bu yüzden sayfadan ayrılmadan önce sonucu kopyalayın.

Kaynaklar

Rakamlar ve metin en son 10 Kasım 2026 Salı tarihinde kontrol edildi.

Sonuç