CSS Küçültücü ve Biçimlendirici

Bu Araç Nedir?

Bir CSS küçültücü, stil sayfasını görüntülenme şeklini değiştirmeden olabildiğince küçük hale getirmek üzere yeniden yazar: yorumları ve boşlukları kaldırır, renk değerlerini kısaltır ve güvenli olduğu durumlarda birim değerlerini sıfıra indirger, yinelenen kuralları birleştirir ve gereksiz noktalı virgülleri kaldırır.

Bu araç, stil sayfasını düzenli ifadeler (regex) kullanmak yerine gerçekten bir AST’ye ayrıştıran bir CSS optimize edici olan clean-css üzerine kurulmuştur; bu nedenle, basit minifiye edicileri bozan olağan dışı durumları — CSS özel özellikleri (--main-color: ...), dizgilerin içindeki içerik, karmaşık seçiciler ve medya sorguları gibi unsurlar doğru şekilde işlenir.

Neden Kullanmalısınız?

• Regex yerine AST tabanlı küçültme (clean-css) — özel özellikler, dizeler ve iç içe geçmiş medya sorguları ile uyumludur.
• Seviye 2 optimizasyonları, kuralları birleştirip basitleştirerek, sadece boşlukların kaldırılmasının ötesinde ek tasarruf sağlar.
• Tam olarak kaç bayt ve yüzde kaç tasarruf ettiğinizi görün.
• Biçimlendirme modu, küçültülmüş bir stil sayfasını tutarlı girintilerle okunabilir bir CSS'ye dönüştürür.
• %100 yerel işleme — tescilli veya henüz yayınlanmamış stiller tarayıcınızdan asla dışarı çıkmaz.

Nasıl Kullanılır

1. CSS kodunuzu giriş kutusuna yapıştırın veya "Örneği Yükle" seçeneğine tıklayarak özel bir özellik ve medya sorgusu içeren bir örneği deneyin.
2. Sıkıştırmak için "Minify" düğmesine tıklayın ya da 2 boşlukluk girintiyle metni düzgün bir şekilde biçimlendirmek için "Format" düğmesine tıklayın.
3. Kutuların altındaki mesajı kontrol edin — “minify” modu boyut azalmasını gösterir; “geçersiz CSS” ise hatalı çıktıyı sessizce üretmek yerine açık bir hata mesajı gösterir.
4. Sonucu almak için "Kopyala" düğmesine tıklayın.

Örnek

Giriş

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Çıkış

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Özel özellikler, medya sorguları ve basamaklı sıralama aynen korunur — yalnızca boşluklar, yorumlar ve gereksiz karakterler kaldırılır.

Pratik ipuçları

• Geliştirme aşamasında değil, derleme/dağıtım sırasında kod küçültme işlemi yapın — okunabilir kaynak kodunu düzenleyin ve bu aracın (ya da derleme boru hattınızın) dağıtılacak sürümü oluşturmasına izin verin.
• Bir sayfanın üretim ortamında neden farklı göründüğünü araştırıyorsanız, önce küçültülmüş CSS dosyasını biçimlendirmek, kaynak kodunuzla karşılaştırma tablosunu çok daha okunaklı hale getirir.
• Özel özellikler kod küçültme işleminden etkilenmez; bu nedenle, tasarım belirtecine dayalı stil sayfaları (--spacing, --color-* vb. kullanılanlar) bu araçta güvenle işlenebilir.
• Projenizde sürüm yayınlanmadan önce tüm dosyalar ayrı ayrı tutuluyorsa, aşağıdaki HTML ve JS küçültme araçlarıyla birlikte kullanın.

Bunun gerçek iş akışlarında nasıl bir yeri var?

CSS, küçültülmesi en etkili unsurlardan biridir; çünkü stil sayfaları varsayılan olarak sayfanın görüntülenmesini engeller — stil sayfasından kesilen her bayt, özellikle daha yavaş bağlantılarda ilk görüntüleme süresini biraz kısaltabilir. Bu, resim optimizasyonuna kıyasla daha küçük bir kazanç olsa da, derleme aşamasına entegre edildiğinde pratikte hiçbir maliyet gerektirmez.

Format yönergesi, tam tersi bir durum için de yararlıdır: bir rakibin veya eski bir üretimin, minifiye edilmiş olarak dağıtılmış stil sayfasını inceleyerek, bir geçersiz kılma veya yeniden tasarım yazmadan önce yapısını anlamak.

→ HTML Küçültücü · JS Küçültücü

Yaygın kullanım örnekleri

• Statik bir siteyi veya açılış sayfasını yayına almadan önce stil sayfasını küçültmek.
• Yapısını incelemek amacıyla canlı bir siteden alınan minifiye edilmiş bir CSS dosyasını yeniden biçimlendirme.
• Tasarım aracından dışa aktarılan ve genellikle aşırı miktarda yorum ve boşluk içeren CSS kodunu düzenlemek.
• El yazısı bir CSS kod parçasının doğru şekilde işlenip işlenmediğini hızlıca kontrol etmek; zira hatalı biçimlendirilmiş CSS, açık bir hata olarak ortaya çıkar.

Sıkça Sorulan Sorular