CSS Küçültme
Küçük bir örnek, yalnızca yorumlar ve boşluklar silinerek 98 bayttan 66 bayta iner (%32,7 daha küçük): .card{display:flex;margin:0 auto}.card>.title:hover{color:#123456}
Nasıl kullanılır
- CSS kodunuzu giriş kutusuna yapıştırın.
- Dosyanızda kalması gereken bir lisans başlığı varsa "/*! yorumlarını koru" seçeneğini açık bırakın. Bütün yorumları silmek için kapatın.
- Önceki ve sonraki boyutu görün, ardından küçültülmüş CSS'i kopyalayın.
Nasıl hesaplanır
Bu araç yalnızca CSS'in okunuşunu değiştiremeyecek şeyleri siler: yorumlar, satır sonları, girintiler, { } ; , > çevresindeki ve iki noktadan sonraki boşluklar. Kapanış süslü parantezinden hemen önceki son noktalı virgül de atılır.
Renkleri, sayıları veya birimleri kısaltmaz, kuralları birleştirmez, sıra ya da ad değiştirmez. Örneğin 0px ve #ffffff olduğu gibi kalır. Bu bilinçli bir sınırdır: çıktıyı öngörülebilir ve güvenli tutar, bedeli ise tam bir optimize ediciye göre biraz daha az kazançtır.
Anlamı olan her boşluk korunur: :hover önündeki alt öğe birleştiricisi, margin: 0 auto gibi değerler arasındaki boşluklar, "and (min-width: 600px)" içindeki boşluk ve calc() içinde + ile - çevresindeki boşluklar. Tırnaklı dizgiler, data URI gibi tırnaksız url() değerleri ve kaçış dizileri birebir kopyalanır.
Kapanmamış bir yorum, dizgi veya url() ile dengesiz süslü parantezler için uyarı verir. Yine de çıktı üretir, bu yüzden uyarı görürseniz özgün dosyayı kontrol edin.
Sık sorulan sorular
Küçültme sayfamın görünüşünü değiştirir mi?
Değiştirmemesi gerekir. Yalnızca boşluklar ve yorumlar silinir, önemli olan her boşluk korunur. Bir fark görürseniz özgün dosyayı kullanın ve girdide uyarı olarak bildirilen eksik bir parantez ya da tırnak olup olmadığına bakın.
Kazanç neden başka küçültücülerden daha az?
Tam optimize ediciler kuralları birleştirir, değerleri kısaltır ve kullanılmayan kodu atar. Bu adımlar uç durumlarda sonucu değiştirebildiği için bu araç hiçbirini yapmaz. Elle yazılmış CSS'te kazancın büyük kısmı genellikle boşluk ve yorumlardan gelir.
/*! yorumlarına ne olur?
Varsayılan olarak /*! ile başlayan yorumlar korunur, çünkü lisans bildirimini işaretlemenin yaygın yolu budur. Onları da silmek için seçeneği kapatın.
Çıktıyı canlı ortamda kullanabilir miyim?
İç içe kurallar ve özel özellikler (CSS değişkenleri) dahil normal CSS için evet. Her araçta olduğu gibi yayına almadan önce sonucu sayfanızda test edin ve okunabilir kaynak dosyanızı saklayın.
CSS kodum yükleniyor mu?
Hayır. Her şey tarayıcınızda çalışır.