CSS Biçimlendirici

Bu araç diğer CSS biçimlendiricilerden ne yapıyor da farklı?

Biçimlendirmenin yanında CSS denetleniyor: yazım hatası olan özellik adları, özelliğe uymayan değerler, tanımlanmamış değişkenler ve bozuk calc() ifadeleri satır ve sütun numarasıyla listeleniyor. Ayrıca her işlemden sonra girdideki ve çıktıdaki bildirim sayısı karşılaştırılıyor, fark varsa kırmızı uyarı çıkıyor.

Hangi sorunları buluyor?

Hata olarak: bilinmeyen özellik adı (colr gibi), özelliğe uymayan değer (color: notacolor), calc() içinde artı veya eksinin yanında boşluk olmaması, ayrıştırma hataları. Uyarı olarak: tanımlanmamış özel özellik kullanımı, aynı kuralda yinelenen özellik, içi boş kural. Bilgi olarak: aynı seçicinin birden fazla kez yazılması, hiç kullanılmayan değişken tanımı, important kullanım sayısı.

calc() içindeki boşluk neden bu kadar önemli?

CSS şartnamesi calc() içinde artı ve eksi işaretlerinin iki yanında boşluk olmasını zorunlu kılar. calc(100%-10px) yazarsanız tarayıcı bildirimi biraz yanlış hesaplamaz, tümden atar ve öge o kuralı hiç almamış gibi davranır. Hata konsola da düşmez. Bu araç hem kendi çıktısında bu hatayı üretmez hem de girdinizde varsa size satır numarasıyla söyler.

Küçültme nasıl çalışıyor, güvenli mi?

Küçültmede calc() boşlukları, tırnak içindeki metinler, grid-template-areas değerleri ve özel özellik değerleri olduğu gibi kalıyor. Küçültmeden sonra çıktı yeniden ayrıştırılıp bildirim sayısı girdiyle karşılaştırılıyor; fark çıkarsa küçültme iptal ediliyor ve bunun yerine biçimlendirilmiş çıktı veriliyor.

İç içe yazılmış kurallar (nesting) korunuyor mu?

Evet, hem biçimlendirmede hem küçültmede. Girdinizde iç içe kural varsa ve küçültme yapıyorsanız üstte bunu belirten bir not çıkıyor. @layer, @container, @supports ve @scope gibi yeni at-kuralları da korunuyor.

Lisans yorumlarına ne oluyor?

Küçültmede normal yorumlar (/* ... */) siliniyor, ünlem işaretli yorumlar (/*! ... */) korunuyor. Ünlem işareti telif bildirimlerini işaretlemek için kullanılır. Girdinizde kaç lisans yorumu bulunduğu ve kaçının korunduğu üstte yazıyor.

Tanımsız değişken uyarısı ne demek?

var(--renk) yazdınız ama hiçbir yerde --renk: tanımı yok demektir. Tarayıcı bu durumda bildirimi geçersiz sayar ve kural uygulanmaz, ama hiçbir hata göstermez. Yedek değer verdiyseniz, yani var(--renk, red) yazdıysanız, uyarı çıkmaz çünkü o durum güvenlidir. Araç yalnızca yapıştırdığınız metne bakar; değişken başka bir dosyada tanımlıysa yine uyarı verir.

Hangi CSS sürümünü biliyor?

Denetim, CSS şartnamelerinden üretilmiş bir özellik ve değer sözlüğü kullanıyor. Modern özellikler tanınır. Yine de çok yeni veya tarayıcıya özgü bir özellik kullanıyorsanız ve araç bilmiyorsa hata verebilir; böyle bir durumda rapordaki satırı yok sayın, çıktı yine de doğrudur.

Ne kadar büyük dosya işleyebilirim?

Sınır 4 MB. Denetim hızlıdır, 283 KB ve dört bin kurallık bir dosya yaklaşık iki yüz milisaniyede taranıyor. Sınırı aşan girdide araç işlemeyi reddeder ve size söyler.

Verilerim sunucuya gidiyor mu?

Hayır. Denetim, biçimlendirme, küçültme ve ağaç görünümünün tamamı tarayıcınızın içinde çalışır; sayfa açıldıktan sonra araç sunucuya istek göndermez. Dosya açtığınızda da dosya yüklenmez, yalnızca tarayıcınız tarafından okunur.