CSS Küçültme

Nasıl çalışır?

Stil dosyanızı sol panele yapıştırın; küçültülmüş hali sağ panelde anında belirir. Araç önce gereksiz her şeyi atar: satır sonları, girintiler, son noktalı virgüller ve /* ... */ yorumları. Sonra değerleri kısaltır: #ffffff #fff olur, 0px 0 olur, 0.50em .5em olur, bold 700 olur. Tam düzeyde bir adım daha atılır: art arda yazılmış iki .baslik kuralı tek kurala birleşir, aynı özellikleri taşıyan h2 ve h3 kuralları h2,h3 olarak bir kez yazılır, margin: 0px 0px 16px 0px gibi uzun yazımlar 0 0 16px biçimine iner, aynı kuralın içinde iki kez yazılmış bir özellikten ezilen ilki silinir. Sayfadaki örnek kod bu adımlarla 264 bayttan 146 bayta iner; sonuç satırı sizin kodunuz için de önce ve sonraki boyutu bayt olarak, kazancı yüzde olarak yazar. /*! ile başlayan lisans yorumları varsayılan olarak korunur, çünkü birçok açık kaynak lisansı bu metnin dağıtılan dosyada kalmasını ister. Kodda okunamayan bir bölüm varsa (kapanmamış bir süslü parantez gibi) küçültme yine yapılır ama o bölüm atlanır; sonuç satırı ilk sorunlu yerin satır ve sütununu uyarı olarak söyler.

Bu araç css minify, minify css, css minifier aramalarıyla da biliniyor.

Küçültme (minify) nedir?

Küçültme, kodun anlamını değiştirmeden gereksiz karakterlerini atma işlemidir. CSS'te bu, girinti ve satır sonlarının, yorumların ve son noktalı virgüllerin silinmesi, #ffffff gibi değerlerin #fff biçimine kısaltılmasıdır. Amaç tarayıcıya giden dosyayı küçültmektir: stil dosyası sayfanın ilk görüntüsünü bekleten dosyalardandır, küçük olması sayfanın daha erken çizilmesini sağlar.

csso nedir?

csso (CSS Optimizer), bu sayfanın kullandığı açık kaynak CSS küçültücüdür. Kodu önce ağaç yapısına ayrıştırır, sonra bu yapı üzerinde güvenli dönüşümler yapar: değerleri kısaltır, aynı seçicili kuralları birleştirir, ezilen özellikleri siler. Metin üzerinde arama-değiştirme yapan basit küçültücülerden farkı budur; kodu anladığı için dizelerin ve url(...) içeriklerinin içine dokunmaz.

Tam mı, güvenli mi?

CSS'te kuralların sırası önemlidir: aynı öğeye iki kural uyuyorsa sonra yazılan kazanır. Tam küçültme kuralları birleştirirken bu sırayı bozmayacak durumları seçer, ama bir kuralı dosyada yukarı taşıması gerekebilir. Tek bir stil dosyasıyla çalışan modern bir sitede bu güvenlidir ve en küçük sonucu verir.

Sayfanızda birden çok stil dosyası birbirini eziyorsa ya da eski bir tema !important ve sıra hileleriyle ayakta duruyorsa Güvenli düzeyi seçin: kuralların sayısı ve sırası aynen kalır, yalnız her kuralın içi küçülür. Kazanç birkaç yüzde daha az olur ama beklenmedik bir görünüm değişikliği riski de kalmaz. Emin değilseniz iki düzeyi de deneyip sayfanızı küçültülmüş dosyayla bir kez açıp kontrol edin.

Küçültmenin sınırları

Küçültme kullanılmayan kuralları bulmaz: sayfada hiçbir öğeye uymayan .eski-banner kuralı küçültülmüş dosyada da durur, çünkü araç yalnız CSS'i görür, HTML'inizi görmez. Dosyayı gerçekten küçültmenin ikinci yolu budur ve tarayıcının geliştirici araçlarındaki Kapsam (Coverage) sekmesiyle yapılır.

Sunucunuz dosyaları gzip veya brotli ile sıkıştırarak gönderiyorsa (çoğu barındırma bunu kendiliğinden yapar) kullanıcıya giden gerçek boyut buradaki rakamdan çok daha küçüktür; küçültmenin ek kazancı yine de sürer, çünkü sıkıştırma yorumları ve gereksiz değerleri atamaz. Küçültülmüş dosyayı düzenlemeyin: kaynağı girintili tutup her yayında yeniden küçültün. Tersine dönmek gerekirse CSS biçimlendirme aracı dosyayı yeniden açar, ama silinen yorumlar geri gelmez.

Sık sorulanlar

CSS dosyası nasıl küçültülür?

CSS kodunu bu sayfadaki sol panele yapıştırın; sağ panelde boşluk ve yorumları atılmış, değerleri kısaltılmış tek satırlık kod belirir. Kopyalayabilir ya da .min.css dosyası olarak indirebilirsiniz. Sonuç satırı dosyanın kaç bayttan kaça indiğini gösterir.

CSS küçültmek siteyi bozar mı?

Güvenli düzeyde bozmaz: kuralların sırası ve sayısı aynı kalır, yalnız boşluklar ve yazım kısalır. Tam düzeyde kurallar birleştirilir; tek stil dosyalı sitelerde sorun çıkarmaz ama birden çok dosyanın birbirini ezdiği eski temalarda görünümü değiştirebilir. Küçültülmüş dosyayı yayına almadan önce sayfanızı bir kez onunla açıp bakın.

Lisans yorumum neden silinmedi?

/*! ile başlayan yorumlar, açık kaynak lisanslarının dağıtılan dosyada kalmasını istediği metinler için kullanılan bir gelenektir; araç bunları varsayılan olarak korur. Kendi kodunuzsa ve kalmasını istemiyorsanız lisans yorumları ayarından Silinsin'i seçin.

Kodum bir yere yükleniyor mu?

Hayır. Küçültme tamamen tarayıcınızda çalışan bir kütüphaneyle yapılır; kodunuz bu sayfadan çıkmaz, hiçbir sunucuya gönderilmez.