Hiçbir şey kurmadan CSS'i çevrimiçi nasıl küçültürüm?

CSS'inizi Girdi CSS alanına yapıştırın veya bir .css dosyası bırakın, ardından CSS'i küçült'e tıklayın. Yorumlar ve fazla boşluklar kaldırılır; sonucu Kopyalayabilir veya styles.min.css olarak İndirebilirsiniz.

CSS küçültücü lisans yorumlarını ve data URI'leri bozmadan koruyor mu?

Evet. Normal yorumlar atılır, ancak /*! license */ yorumları korunur. Tırnaklı dizeler, url() değerleri ve data URI'ler ayrı ayrı belirteçlere ayrılır, bu yüzden boşluk kuralları bunları değiştirmez.

Küçültülmüş CSS'i tekrar okunabilir koda nasıl dönüştürürüm?

CSS'i küçült yerine CSS'i güzelleştir'e tıklayın. Kod seviye başına iki boşlukla yeniden girintilenir ve a:hover gibi seçici iki noktaları özellik iki noktalarından ayırt edilir. İndir, bunu styles.css olarak kaydeder.

Küçülmenin yanındaki gzip'li sayı ne anlama geliyor?

Tarayıcının CompressionStream API'siyle ölçülen, gzip sıkıştırmasından sonraki çıktı boyutunun bir tahminidir. Tarayıcınızda bu API yoksa gzip boyutu gösterilmez.

CSS'imi küçülttüğümde bir sunucuya gönderiliyor mu?

Hayır. Küçültme, tarayıcınızda çalışan bir JavaScript belirteçleyicisi tarafından yapılır, harici kütüphane yoktur. Hiçbir şey yüklenmez, bu yüzden özel stil sayfalarında kullanabilirsiniz.

Gerçekten ücretsiz mi?

Evet. Tüm araçlar ücretsizdir; hesap veya kredi kartı gerekmez. İşlem sunucularımızda değil cihazınızda yapılır ve araçları ücretsiz sunabilmemizi sağlayan da budur.

Mobilde çalışır mı?

Evet. iOS ve Android'in güncel mobil tarayıcılarında, hiçbir şey kurmadan çalışır.

🗜️

Ücretsiz CSS Küçültücü ve Güzelleştirici

Dosya boyutunu azaltmak için CSS'i küçültün veya okunabilirlik için küçültülmüş CSS'i güzelleştirin. Anında, tarayıcınızda.

Tarayıcınızda çalışırKayıt yok, açılır pencere yokGiriş gerekmezSonsuza kadar ücretsiz

Yüklendikten sonra çevrimdışı çalışır

ya da aşağıya bir .css dosyası bırakın

Buraya bir .css dosyası bırakın ya da göz atmak için tıklayın

CSS · cihazınızda işlenir

veya panodan yapıştırmak için Ctrl+V'ye basın

Dosyalara göz at

Giriş CSS

Çıktı CSS

Çıktı burada görünecek…

Yaygın kullanımlar

Üretim Dağıtımı için CSS'i KüçültÜretime dağıtmadan önce CSS dosya boyutunu küçült - daha hızlı sayfa yükleri ve daha düşük bant genişliği maliyetleri.
Hata Ayıklama için Küçültülen CSS'i GüzelleştirSıkıştırılmış veya küçültülmüş CSS'i okunabilir koda biçimlendir ve stillerinizi inceleyip hatalarını ayıklayabilirsin.
E-posta Şablonları için CSS'i KüçültDosya boyutu ve satır içi stil şişmesinin önemli olduğu HTML e-posta şablonları için CSS'i sıkıştır.
WordPress Temaları için CSS'i KüçültDaha iyi PageSpeed puanları için özel WordPress tema stil sayfalarının boyutunu azalt.
Kod İncelemesi için CSS'i GüzelleştirHerhangi bir CSS dosyasını inceleme ve işbirliği için hazır, temiz, girintili, okunabilir koda biçimlendir.

Nasıl çalışır

Bu araç tamamen JavaScript ile yazılmış, elle yazılmış ve bağımlılıksız bir CSS ayrıştırıcısı kullanır — harici kütüphane yok, sunucu çağrısı yok. Ayrıştırıcı, herhangi bir dönüşüm uygulamadan önce her karakteri kod, yorum, tırnaklı dize veya url() değeri olarak sınıflandırır; bu, boşluk kurallarının dize içeriklerini, veri URI'lerini veya calc() ifadelerini bozmasını önler.

1
Ayrıştırma geçişi
Girdi CSS'i karakter karakter taranır ve tür etiketli belirteçlere bölünür: ham kod bölümleri, /* ... */ yorumları, tırnaklı dizeler (kaçış dizilerini koruyarak) ve url(...) blokları. Bu, sonraki adımdaki dönüşümlerin yalnızca gerçek CSS sözdizimine dokunmasını sağlar — asla bir dize değişmezinin veya veri URI'sinin içeriğine değil.
2
Küçültme veya güzelleştirme
Küçültme modunda normal yorumlar kaldırılır (/*! license */ yorumları korunur), kod öğelerindeki boşluk dizileri tek boşluğa indirilir ve { } : ; , > ~ çevresindeki noktalamaya bitişik boşluklar kaldırılır. calc() ifadelerini bozmamak için + ve - çevresindeki boşluklara bilinçli olarak dokunulmaz. Güzelleştirme modunda kod önce temiz bir taban için küçültülür, ardından iki boşluklu derinlik takibi ve bildirim iki nokta algılamasıyla yeniden ayrıştırılıp girintilenir; böylece property: value iki noktaları a:hover gibi seçici iki noktalarından ayırt edilir.
3
Gzip boyut tahmini
Çıktı üretildikten sonra tarayıcının yerel CompressionStream API'si sonucu gzip ile sıkıştırmak ve ortaya çıkan bayt sayısını ölçmek için kullanılır. Bu, gzip sıkıştırmalı bir web sunucusunun ağ üzerinden göndereceği boyutla eşleşen gerçekçi bir aktarım boyutu tahmini verir.
4
Kopyala veya indir
İşlenen CSS, Clipboard API ile panoya yazılır ya da text/css MIME türünde bir Blob kullanılarak styles.min.css (küçültme modu) veya styles.css (güzelleştirme modu) olarak indirilir. Boyut azaltma yüzdesi siz yazarken canlı gösterilir.

İlgili araçlar

✨

SVG Optimize Edici ve Küçültücü

Meta verileri kaldırın, boşlukları daraltın ve SVG dosya boyutunu dramatik biçimde küçültmek için ondalıkları yuvarlayın — genellikle %30-70 oranında küçülme. Görsel önizleme hiçbir şeyin bozulmadığını doğrular.

DeneyinDosyalar yerel kalır

🎨

CSS Güzelleştirici

Küçültülmüş CSS'i tutarlı girintilerle düzenleyin ya da küçültün. Öngörülebilir farklar için isteğe bağlı alfabetik özellik sıralaması.

Deneyin

📋

JSON Biçimlendirici

JSON verilerini biçimlendirin, doğrulayın, küçültün ve keşfedin. Ağaç görünümü, sözdizimi vurgulama ve tek tıklamayla kopyalama.