CSS küçültücü

CSS küçültücü, CSS dosyalarındaki gereksiz karakterleri kaldıran ve küçültülmüş stil sayfasını işlem öncesi ve sonrası karakter sayılarıyla birlikte sunan ücretsiz bir araçtır.

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

CSS küçültme, tarayıcıların ihtiyaç duymadığı biçimlendirmeleri kaldırarak stil sayfasındaki karakter sayısını azaltır. Genellikle girintiler, satır sonları, yorumlar ve noktalama işaretlerinin çevresindeki isteğe bağlı boşluklar kaldırılır.

Tarayıcı CSS kurallarını, seçicileri ve bildirim değerlerini almaya devam eder. Amaçlanan görsel sonuç değişmeden kalmalı, tarayıcıya aktarılan dosya ise küçülmelidir. Bir CSS stil sayfasını küçültmenin pratik faydası özgün dosyaya, HTTP sıkıştırmasına ve tarayıcı önbelleğine bağlıdır. İyi sıkıştırılmış bir stil sayfasında aktarılan bayt miktarı yalnızca sınırlı ölçüde azalabilir.

Küçültme işlemi dağıtımdan önce, gereğinden büyük üçüncü taraf CSS dosyalarını incelerken veya geliştirme sırasında kullanılan biçimlendirmenin dosya boyutuna ne kadar katkıda bulunduğunu kontrol ederken yararlıdır. Ancak kullanılmayan seçicileri kaldıran, eşdeğer kuralları birleştiren ya da bildirimleri yeniden yazan optimizasyon işlemlerinden farklıdır. Bu araç, söz konusu daha kapsamlı işlemleri yaptığını iddia etmez.

CSS küçültücü nasıl kullanılır?

Stil sayfasını CSS alanına yapıştırıp aracı çalıştır, ardından Küçültülmüş CSS sonucunu ilgili derleme veya dağıtım iş akışına kopyala. Okunabilir CSS kaynak dosyasını, küçültülmüş kopyayla kalıcı olarak değiştirmek yerine saklamaya devam et.

1. Sitenin veya uygulamanın kullandığı kaynak CSS ile başla.
2. Küçültmeden önce CSS'nin doğru şekilde ayrıştırıldığını kontrol et.
3. Metni CSS alanına yapıştır ve aracı çalıştır.
4. CSS karakterleri ile Küçültülmüş CSS karakterleri değerlerini karşılaştır.
5. Sonucu duyarlı görünümler, yazdırma stilleri ve etkileşimli bileşenler dahil olmak üzere bir hazırlık sayfasında test et.

CSS küçültme işlemi sunucuda gerçekleştirilir. Gönderdiğin CSS, HTTPS üzerinden sunucuya iletilir ve saklanmaz. Stil sayfasında gizli URL'ler, dahili ana makine adları veya başka hassas bilgiler varsa bunları sunucu tarafında çalışan herhangi bir araca göndermenin kuruluşunun veri işleme politikasına uygun olup olmadığını değerlendir.

Sonuç nasıl okunur?

Sonuçta dönüştürülmüş CSS ile iki karakter sayısı bulunur. Böylece çıktıyı inceleyebilir ve azalmayı doğrudan görebilirsin. CSS karakterleri, gönderilen metnin uzunluğunu; Küçültülmüş CSS karakterleri ise küçültme işleminden sonraki uzunluğu gösterir.

Bu değerler, çok baytlı karakterleri dikkate alan bir uzunluk işleviyle hesaplanan karakter sayılarıdır. Ağ üzerinden aktarılacak boyutun kesin tahmini olarak değerlendirilmemelidir. UTF-8 karakterleri birden fazla bayt kaplayabilir. Ayrıca Brotli veya gzip sıkıştırması, HTTP üzerinden gönderilen boyutu önemli ölçüde değiştirebilir.

Bu araçta ayrı bir doğrulama veya hata alanı bulunmaz. Bu nedenle araç bir CSS doğrulayıcı olarak kullanılmamalıdır. Eşleşmeyen küme parantezleri, eksik iki nokta, kapatılmamış dizeler, hatalı biçimlendirilmiş yorumlar veya geçersiz iç içe yerleştirme gibi yaygın sorunları tarayıcı geliştirici araçları, bir linter ya da standartları dikkate alan bir doğrulayıcıyla kontrol etmen gerekir. Geçersiz CSS, sıkıştırılmış görünen ancak amaçlandığı gibi çalışmayan bir çıktı üretebilir.

Kısa CSS küçültme örnekleri

Standart bir küçültülmüş sürüm, kuralı korurken biçimlendirmeyi kaldırır.

CSS

p { color: red; }

Küçültülmüş CSS

p{color:red}

Bu örnekte okunabilir girdi 17, küçültülmüş biçim ise 12 karakterden oluşur. Tırnak içindeki dizelerde yer alan boşluklar ve noktalama işaretleri değerin parçası olarak korunmalıdır.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Küçültülmüş CSS

.notice,.warning{color:#c00;margin:0 1rem}

Tüm boşlukları ayrım gözetmeden silmek güvenli değildir. Boşluk, alt öğe birleştiricisini temsil edebilir. Ayrıca calc() gibi işlevlerdeki aritmetik operatörlerin çevresinde boşluk kullanımıyla ilgili kurallar vardır. Dizeler, veri URL'leri, kaçış dizisi içeren tanımlayıcılar ve özel özellik değerleri de söz dizimini dikkate alan bir işlem gerektirir.

Aksanlı ve Latin alfabesi dışındaki karakterler dizelerde, CSS tanımlayıcı kurallarına uygun olmaları şartıyla da seçicilerde yer alabilir. Sayılar, ondalık noktaları, yüzde işaretleri ve birimler dekoratif metin değil, söz diziminin parçalarıdır. Bu yüzden bildirim anlaşılmadan gelişigüzel kısaltılamazlar. Boş bir stil sayfasında küçültülecek CSS bulunmaz. Çok büyük stil sayfalarında, derleme sırasında çalışan bir küçültücüyü tekrarlamak ve denetlemek genellikle metni çevrim içi bir forma kopyalamaktan daha kolaydır.

CSS küçültme hangi durumlarda gereksizdir?

Bir dosya zaten küçültülmüşse veya üretim için sıkıştırılmış bir varlık olarak oluşturulmuşsa küçültme işlemini tekrarlamak genellikle gereksizdir. İkinci bir CSS küçültme işlemi çok az yer kazandırabilir veya hiç kazandırmayabilir. Üstelik yayın sürecine bir dönüşüm adımı daha ekler.

• Yalnızca tarayıcının veya derleme sisteminin okuyacağı CSS'yi önce okunabilir biçime getirip sonra yeniden küçültme.
• Küçültmeyi, kullanılmayan framework kurallarını veya yinelenen bildirimleri kaldırmanın yerine kullanma.
• Karakter sayısındaki azalmanın işlemeyi engelleyen istekleri, önbellek sorunlarını veya yavaş yüklenen yazı tiplerini ortaya çıkarmasını bekleme.
• Özellikle seçici özgüllüğü, basamak katmanları veya medya sorgularındaki sorunları giderirken biçimlendirilmiş kaynak dosyayı silme.

CSS otomatik olarak paketleniyorsa her sürümde aynı ayarların uygulanması için küçültücüyü bu iş akışına dahil et. İlgili varlıkları elle dağıtıyorsan HTML küçültücü ve JS küçültücü ile bu dosya türlerine eşdeğer işlemi uygulayabilirsin.

Sık sorulan sorular

CSS'yi küçültmek seçici özgüllüğünü değiştirir mi?

Doğru yapılan küçültme, seçicilerin aynı bileşenleri ve sıralamayı koruması gerektiğinden seçici özgüllüğünü değiştirmez. Yine de kaynak dosyada kaçış dizileri, yeni sözde sınıflar veya eski bir küçültücünün anlayamayabileceği, araç tarafından oluşturulmuş söz dizimi kullanılıyorsa karmaşık seçicileri dikkatle karşılaştır.

CSS özel özelliklerini küçültebilir miyim?

Özel özellikler küçültme işlemine dahil edilebilir, ancak değerlerindeki bazı belirteç ve boşluklar daha sonra var() ile yapılacak yer değiştirme işlemi için korunabilir. Görünüşteki her boşluğun isteğe bağlı olduğunu varsaymak yerine hesaplamalar, yedek değerler veya gömülü dizeler içeren bildirimleri projenin desteklediği tarayıcılarda test et.

Araç kaynak haritası oluşturuyor mu?

Hayır, sonuçlarda kaynak haritası sunulmaz. Üretim ortamında hata ayıklamak için küçültülmüş CSS'nin Sass, Less veya başka bir kaynağa eşlenmesi gerekiyorsa küçültülmüş dosyayı ve kaynak haritasını özgün dosya yapısını bilen derleyici ya da paketleyici içinde oluştur.

Lisans yorumları çıktıda kalır mı?

CSS yorumlarının korunacağını varsayma. Bir bağımlılığın lisansı, dağıtılan kodla birlikte bir bildirimin sunulmasını gerektiriyorsa bildirimi ayrıca sakla veya yayınlamadan önce oluşturulan çıktıyı incele.

Küçültme işlemi bozuk CSS'yi düzeltebilir mi?

Hayır. Küçültme gereksiz karakterleri kaldırır ancak geçersiz bir seçiciyi, desteklenmeyen özelliği, eksik varlığı veya hatalı basamak düzenini onarmaz. Önce kaynak dosyadaki ayrıştırma uyarılarını ve görsel gerilemeleri gider.

Dağıtım öncesi kontroller

Küçültülmüş çıktıyı ayrı bir üretim varlığı olarak kaydet, URL'lerin ve tırnak içindeki içeriğin bozulmadığını doğrula ve tarayıcı konsolu açıkken bir hazırlık sayfasında yükle. Temsili sayfaları dar ve geniş görüntü alanlarında karşılaştır. Ardından sunucunun beklenen içerik türünü, önbellek politikasını ve HTTP sıkıştırmasını uyguladığını doğrula.