Nasıl kullanılır?

Giriş kutusuna CSS yapıştırın, bir .css dosyası açın veya örneği deneyin.
Okunabilir kod için Güzelleştir'i veya en küçük çıktı için Küçült'ü seçin.
Güzelleştirirken, 2 boşluk, 4 boşluk veya sekme seçin.
Sonucu kopyalayın veya .css dosyası olarak indirin. Küme parantezleri veya tırnak işaretleri dengesizse, hata satırı ve sütunu gösterir.

Nasıl çalışır?

Biçimlendirici önce stil sayfasını belirteçlere ayırır: tek veya çift tırnak içindeki dizeler, url(…) değerleri, yorumlar, süslü parantezler ve noktalı virgüller. Dizeler ve url() tek belirteç olduğundan, bir veri URI'si içindeki noktalı virgül veya content: "{ }" içindeki süslü parantez yapıyı asla karıştırmaz ve içerikleri aynen kopyalanır.

Beautify, seçici listesindeki her seçiciyi kendi satırına koyar, alt, kardeş ve bitişik birleştiricilerin (>, ~, +) etrafına boşluk ekler ve her bildirimi kendi satırında “özellik: değer;” biçiminde yazar. @media, @supports, @layer, @container ve yerel CSS iç içe geçmesi içindeki bloklar her derinlik için bir seviye girintilenir. Bir bloğun son bildiriminden sonra eksik noktalı virgül eklenir. Yorumlar oldukları yerde korunur.

Minify, yorumları (/*! … */ lisans bildirimleri hariç) kaldırır, boşlukları sıkıştırır, süslü parantezler, iki nokta üst üste, noktalı virgül, virgül ve seçici birleştiricileri etrafındaki boşlukları kaldırır ve her kapanış süslü parantezinden önceki noktalı virgülü atar. Anlamı değiştiren boşluklar korunur: “.a .b” içindeki alt birleştirici, “a :focus” içindeki boşluk ve calc(100% - 2px) gibi değerlerin içindeki boşluklar. “! important” “!important” olarak normalleştirilir.

Araç değerleri yeniden yazmaz: renkler, birimler ve sıfırlar yazıldığı gibi bırakılır ve kurallar birleştirilmez veya yeniden sıralanmaz. Düz iç içe geçmeye sahip SCSS veya Less dosyaları genellikle çalışır, ancak kendi sözdizimleri olan // satır yorumları veya mixin'ler anlaşılmaz.

Örnekler

Küçültülmüş bir çerçeve dosyasını okuma

Tek satırlık bir bootstrap.min.css alıntısını yapıştırın ve her kuralı, medya sorgularını ve iç içe kurallarını ayrı, girintili satırlarda görmek için 2 boşlukla Beautify'ı seçin.

Elle yazılmış bir stil sayfasını yayınlama

E-posta şablonuna veya sayfa başına satır içi eklemeden önce, yorumlar ve girintiler içeren 12 KB'lık bir stil sayfasını küçültün. Özet, önceki ve sonraki karakter sayısını gösterir.

Eksik bir süslü parantezi bulma

Bir stil sayfası yarıda uygulanmayı durdurur. Biçimlendirici, kapanış süslü parantezi eksik olan kuralın satırıyla birlikte “Bu { asla eşleşen bir } ile kapatılmıyor” raporunu verir.

Sık sorulan sorular

Bu aracın küçültülmüş CSS'i üretimde kullanmak güvenli mi?

Yalnızca CSS'in yok saydığı yorumları ve boşlukları kaldırır, böylece kurallar aynı şekilde davranır. Kuralları birleştirme veya renkleri kısaltma gibi derleme araçlarının yaptığı daha derin optimizasyonları yapmaz, bu nedenle sonuç onlarınkinden biraz daha büyük olabilir.

“a :focus” içinde neden boşluk korunuyor?

Bir seçicide boşluk, alt öğe birleştiricisidir. “a :focus”, bir bağlantının içindeki odaklanmış bir öğe anlamına gelirken, “a:focus” odaklanmış bir bağlantı anlamına gelir. Bu boşluğu kaldırmak, hangi öğelerin eşleşeceğini değiştirir.

SCSS veya Less biçimlendirebilir mi?

Düz iç içe kurallar doğru biçimlendirilir. // yorumları, argümanlı mixinler veya @if blokları gibi yalnızca ön işlemcilere özgü sözdizimi anlaşılmaz ve garip biçimlendirilebilir, bu nedenle sonucu kontrol edin.

Küçültme sırasında lisans yorumları kaldırılır mı?

/*! ile başlayan yorumlar korunur; bu, lisans ve telif hakkı bildirimleri için yaygın bir kuraldır. Diğer tüm yorumlar kaldırılır.

Gizlilik

CSS'iniz yalnızca tarayıcınızda işlenir. Hiçbir şey yüklenmez, saklanmaz veya analizlere dahil edilmez.