CSS Küçültücü / Büyütücü
CSS'i yorum ve boşlukları kaldırarak küçültün, ya da temiz girintili okunabilir koda geri açın — her iki yön de canlı.
1.257 görüntülenme
Nasıl Çalışır
Küçültme (minify), makine ayrıştırıcısının ihtiyaç duymadığı ama insan gözünün okuması için var olan her şeyi kaldırarak dosya boyutunu azaltır: yorum satırları, satır sonları, girintiler ve kapanış parantezinden önceki gereksiz son noktalı virgül. Bunların hiçbiri tarayıcının stilleri nasıl uyguladığı açısından anlamlı değildir — her kuralı tek satırda ve boşluksuz olan bir stil sayfası, güzel biçimlendirilmiş olanla birebir aynı şekilde davranır, sadece daha küçük ve indirmesi daha hızlıdır. Bu, üretim (production) ortamında önemlidir çünkü CSS indirilip ayrıştırılana kadar sayfanın render edilmesini engeller; dosyadan kilobaytlar kırpmak, özellikle yavaş bağlantılarda sayfa yükleme hızını doğrudan iyileştirir.
Düzenleme (beautify) tersine bir işlemdir ve gerçekten daha zordur: sıkıştırılmış veya dağınık CSS'i alır, her bildirimi kendi satırında, her kuralı kendi bloğunda, iki nokta üst üste ve parantez etrafında tutarlı boşluklarla yeniden girintiler. Bu bir tür tersine mühendislik sayılır, çünkü orijinal biçimlendirme — özellikle de yorum satırları — dosya küçültülür küçültülmez tamamen kaybolur; yalnızca yapısal biçimlendirme (hangi seçicinin hangi bildirimlerle gittiği) geri kazanılabilir, yazarın orijinal satır sonları veya notları değil. Örneğin .btn{color:red;padding:8px}, .btn { } içinde color: red; ve padding: 8px;'in her biri kendi satırında olacak şekilde düzgün girintili bir bloğa dönüşür.
Bilinmesi Gerekenler
- Her iki yön de davranışı birebir korur. Seçiciler, özellikler, değerler ve cascade sırası dokunulmadan kalır — yalnızca boşluk ve yorumlar değişir, bu yüzden özgüllük (specificity) ve kalıtım öncesi ve sonrası birebir aynı şekilde çalışır.
- Bu, hafif, regex-tabanlı bir araçtır, PostCSS gibi tam bir CSS ayrıştırıcısı değil. Standart CSS'i doğru işler, ama tırnak içinde harfi harfine
{,}veya;içeren içerik değerleri (pratikte nadir, çoğunlukla üretilmişcontent:değerlerinde görülür) mükemmel biçimlenmeyebilir. - Sass/Less söz dizimi işlenmez. İç içe geçme, değişkenler ve mixin'ler tek başına geçerli CSS değildir, bu yüzden derlenmeden büyük ölçüde değişmeden geçer — bunları düz CSS'e çevirmek için yine de Sass veya Less'in kendisine ihtiyacınız olur.
- Küçültmenin kalıcı olarak attığı tek şey yorumlardır. Bir yorum, tarayıcıya özel bir hack'i veya "bunu silme" uyarısını belgeliyorsa, küçültülmemiş kaynağın bir kopyasını bir yerde saklayın — sıkıştırılmış çıktının onu geri getirmesinin bir yolu yoktur.
- Kaynak dosyanızı her zaman ayrı tutun. Küçültülmüş dosya üzerinde doğrudan düzenleme yapmak yerine, orijinal kaynağı düzenleyip her dağıtımda yeniden küçültmek, ileride okunabilirlik ve versiyon kontrolü açısından çok daha sağlıklıdır.
Somut bir karşılaştırma: düzenli hâldeki .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } kuralı, küçültüldüğünde .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)} hâline gelir — belirgin şekilde kısalır; onlarca kural, yorum ve iç içe medya sorgusu içeren tam bir stil sayfasında bu tasarruf tipik olarak orijinal dosya boyutunun %20 ila %40'ı arasında olur.
Sıkça Sorulan Sorular
Küçültme CSS'imi bozar mı?
Hayır — yalnızca yorumları kaldırır ve noktalama çevresindeki boşlukları toplar; her seçici, özellik, değer ve kural işlevsel olarak aynı kalır. Tarayıcı küçültülmüş ve orijinal sürümü piksel piksel birebir aynı şekilde render eder; aralarındaki tek fark, sunucudan indirilen bayt sayısıdır.
Küçültme sitemi neden hızlandırır?
Tarayıcı, sayfayı güvenle render edebilmeden önce tüm CSS dosyasını indirip ayrıştırmak zorundadır (CSS'in "render-blocking" olarak adlandırılmasının nedeni budur). Daha küçük bir dosya, özellikle mobil ağlarda veya yavaş bağlantılarda daha hızlı iner ve sayfanın görünür hâle gelmesine kadar geçen süreyi kısaltır — bu da First Contentful Paint gibi metrikleri doğrudan iyileştirir.
Düzenleme (beautify) orijinal kaynak kodumu birebir geri getirir mi?
Tam olarak değil. Küçültme, yapı dışındaki her şey için tek yönlü bir işlemdir — yorumlar ve geliştiricinin orijinal satır sonu tercihleri, dosya sıkıştırıldığı anda kalıcı olarak kaybolur. Düzenleme, küçültmeden sonra da hayatta kalan yalnızca yapısal söz dizimine (seçiciler, parantezler, bildirimler) dayanarak temiz, tutarlı girintili bir sürüm yeniden oluşturur; bu genelde stil sayfasını yeniden okunabilir ve karşılaştırılabilir yapmaya yeter, ama yazarın orijinal dosyasıyla birebir aynı olmaz.
SCSS veya LESS söz dizimini işler mi?
Düz CSS için tasarlanmıştır. Sass/Less'e özgü söz dizimi — iç içe geçme, $color gibi değişkenler, mixin'ler, @include ifadeleri — işlenmeden büyük ölçüde değişmeden geçer, çünkü bu yapılar tek başına geçerli CSS değildir ve önce kendi derleyicilerinden (Sass veya Less) geçip standart CSS'e dönüşmesi gerekir.
Ne zaman küçültmeli, ne zaman düzenlemeliyim?
Üretime dağıtmadan hemen önce, derleme sürecinizin son adımı olarak küçültün — kullanıcılara gitmesi gereken dosya sıkıştırılmış olandır, ideal olarak sunucu tarafında gzip veya Brotli sıkıştırmasıyla birlikte daha da tasarruf sağlar. Üçüncü taraf bir kütüphanenin CSS'i, DevTools'tan canlı bir siteden çekilen bir dosya veya elle incelemeniz gereken bir derleme çıktısı gibi küçültülmüş gelen bir stil sayfasını okumanız, hata ayıklamanız veya karşılaştırmanız gerektiğinde düzenleyin.
Benzer Araçlar
Sorun Bildir
CSS Küçültücü / Büyütücü
Yorumlar
Henüz yorum yok — ilk yorumu siz yazın!