CSS Biçimlendirici
Küçültülmüş CSS kodunu okunur hale getirin; girinti seçimi ve satır başına tek bildirim
CSS Biçimlendirici hakkında
url(data:image/svg+xml;base64,...) gibi bir data URI içinde noktalı virgül adresin parçasıdır, bildirim ayırıcısı değildir. Yalnızca {, } ve ; karakterlerinden bölen biçimlendiriciler stil dosyasını tam burada ikiye ayırır; aynı sorun content: "a { b" için de geçerlidir. Bu araç metni kesmek yerine CSS kodunu token token okur, böylece metinler, yorumlar ve url() içerikleri hiç bozulmadan kalır.
CSS Biçimlendirici nasıl kullanılır
- 1
Küçültülmüş CSS kodunu giriş kutusuna yapıştırın; çıktı siz yazarken yeniden oluşturulur.
- 2
Girintiyi 2 boşluk, 4 boşluk veya sekme olarak seçin.
- 3
Açılış parantezinin aynı satırda mı yoksa sonraki satırda mı duracağını belirleyin.
- 4
Satır başına tek seçici, kurallar arasında boş satır ve yorumları koru seçeneklerini ihtiyacınıza göre açıp kapatın.
- 5
Kural ve bildirim sayaçlarını kontrol edip Kopyala düğmesine basın.
Sıkça sorulan sorular
CSS kodum bir yere yükleniyor mu?
Hayır. Tüm ayrıştırma ve yeniden yazma işlemi kendi tarayıcı sekmenizde JavaScript ile yapılır ve araç hiçbir ağ isteği göndermez. Biçimlendirme sırasında geliştirici araçlarının Network sekmesini açık bırakırsanız hiçbir istek kaydedilmediğini görürsünüz.
Biçimlendirme sayfamın görünümünü değiştirebilir mi?
CSS içinde boşlukların her zaman anlamsız olduğu yaygın inancı yanlıştır. Seçicilerde boşluk anlamlıdır: .a .b torun eşleşmesi demektir, .a.b ise iki sınıfın da aynı öğede olmasını ister. calc() içinde de + ve - çevresindeki boşluklar zorunludur, yoksa değer geçersiz olur. Bu araç kaynaktaki bu anlamlı boşlukları korur ve yalnızca virgül, iki nokta ile >, + ve ~ birleştiricilerinin çevresindeki aralığı standartlaştırır.
Yorumları koru seçeneğini kapatırsam ne olur?
Çıktının kaynakla bayt bazında eşdeğer olmadığı tek ayar budur. Silinen yorumun yerine tek bir boşluk konur ki iki yanındaki tokenlar birbirine yapışmasın; bu da .a/*x*/.b ifadesini .a .b haline getirir ve bu .a.b ile aynı anlama gelmez. Stil dosyanızda seçici ya da değer ortasında yorum varsa bu seçeneği açık bırakın.
İç içe CSS ve yeni at-rule yapıları destekleniyor mu?
Evet. Ayrıştırıcı geneldir ve { ile açılan her bloğu izler; bu yüzden & ile yazılan yerleşik CSS iç içe kullanımı doğru girintilenir, ayrıca @media, @supports, @container, @layer, @keyframes, @font-face ve @page da desteklenir. Kapatılmamış bir parantez, metin veya yorum varsa araç sessizce bozuk çıktı üretmek yerine sonucu onarır ve uyarı gösterir.