Çevrimiçi CSS biçimlendirme
Küçültülmüş stil sayfanızı ekleyin ve yeniden rahatça okuyun. Seçiciler ayrı satırlara, her bildirim kendi satırına yerleşir; bloklar ve medya sorguları elle yazacağınız gibi girintilenir.
Canlı ortamdaki CSS neden tek satırdır?
Stil sayfaları da betiklerle aynı nedenle küçültülür. CSS görüntü oluşturmayı engellediği için kazanılan her bayt, sayfanın görünme süresini etkileyebilir. cssnano, Lightning CSS ve Sass ile PostCSS süreçlerindeki iyileştiriciler boşlukları ve yorumları kaldırır, renk değerlerini kısaltır, yinelenen kuralları birleştirir ve blokların son noktalı virgülünü silebilir. Yardımcı sınıf tabanlı sistemlerde çıktı daha da yoğundur: derlenmiş bir Tailwind stil sayfası, aralarında neredeyse hiçbir boşluk bulunmayan binlerce küçük kural içerebilir.
Basamaklanmayı yeniden okuyun
Bir stil sayfasını biçimlendirmenin başlıca amacı, bir kuralın neden uygulandığını veya uygulanmadığını anlamaktır. Her seçici ayrı satırda, bildirimleri de altında girintili olduğunda basamaklanmayı izleyebilirsiniz. Bir öğeyi hedefleyen kuralları bulun, özgüllüklerini karşılaştırın, hangisinin daha sonra geldiğini görün ve çalışmanızı geçersiz kılan beklenmedik !important bildirimini fark edin. Medya sorguları içerikleriyle birlikte bloklara ayrılır; böylece duyarlı tasarım davranışını izlemek kolaylaşır.
Modern CSS desteği
Biçimlendirici güncel CSS sözdizimini anlar. Özel özellikler, calc ve clamp ifadeleri, grid ve flexbox kısa yazımları, kapsayıcı sorguları, iç içe kurallar, katmanlar, supports blokları ve keyframes kuralları biçimlendirilir. Uzun seçici listeleri okunabilir satırlara bölünür, derleme sonrasında kalan yorumlar korunur. Dosyada standart CSS ile tarayıcıya özgü önekli özellikler birlikte yer alıyorsa ikisi de korunur; yalnızca daha açık bir düzende gösterilir.
Derlenmiş stilleri incelerken pratik bir ipucu
Derlenmiş Tailwind veya Bootstrap stil sayfasını biçimlendirdiğinizde dosya çok uzayabilir. On binlerce satır olağandır. Satır numaralarını açın ve sürekli kaydırmak yerine tarayıcınızın bul özelliğiyle ilgili sınıf adını veya özelliği arayın. Amacınız dosyayı okumak değil küçültmekse asıl düzenlemenin derleme yapılandırmasında yapılacağını unutmayın. Kullanılmayan kurallar, küçültme işlemi başlamadan önce zaten üretilmiştir.
Sık sorulan sorular
Derlenmiş Tailwind stil sayfasını açabilir miyim?
Evet, bu sayfanın yaygın kullanım alanlarından biridir. Sistem her yardımcı sınıf için bir kural ürettiğinden çıktı çok uzun olabilir. Satır numaralarını açıp tarayıcınızın arama özelliğini kullanmak, dosyada gezinmenin pratik yoludur.
Yorumlar geri getirilir mi?
Yalnızca dosyada kalan yorumlar korunur. Çoğu küçültücü, yasal bildirim olarak işaretlenenler dışındaki yorumları siler. Silinen yorumlar kurtarılamaz. Biçimlendirici mevcut yorumları koruyup uygun biçimde yerleştirir.
SCSS veya Less ile çalışır mı?
Bu sayfa, tarayıcıların aldığı standart CSS için tasarlanmıştır. SCSS veya Less’e özgü değişken, mixin ve iç içe yazım içeren ön işlemci kaynakları hedeflenen girdi değildir. Standart iç içe CSS kuralları ise desteklenir.