CSS Biçimlendirici
Bir stil sayfasını okuyabileceğiniz biçimde girintileyin, tamamen tarayıcınızda. Hiçbir şey yeniden adlandırılmaz, kısaltılmaz ya da normalleştirilmez.
Tamamen tarayıcınızda çalışır. Hiçbir şey yüklenmez, günlüğe yazılmaz veya saklanmaz.
Küçültülmüş ya da kötü girintilenmiş bir stil sayfasını yapıştırın ve düzgünce okuyun. Biçimlendirme tarayıcınızda yapılır ve stil sayfasında boşlukları dışında hiçbir şey değişmez.
Nasıl çalışır
Stil sayfası parçalara bölünür (yorumlar, dizeler, adresler, adlar, sayılar, parantezler ve süslü parantezler) ve ardından yeniden yazılır. Her kural kendi bloğunu, bir listedeki her seçici kendi satırını, her bildirim de kuralın içinde kendi satırını alır. İç içe kurallar, medya sorguları ve keyframe'ler de buna göre iç içe yerleştirilir.
Boşluk, hiçbir anlam taşımadığı kanıtlanamadıkça korunur. Bu, çoğu biçimlendiricinin yaptığının tersidir ve bilinçlidir: CSS'te iki seçici arasındaki boşluk alt öğe birleştiricisidir; bu yüzden “.a .b” ile “.a.b” farklı öğeleri seçer. Boşluk yalnızca virgülden, noktalı virgülden ya da kapanıştan önce ve bir açılıştan sonra, yani CSS'in onu hiçbir şey olarak okuyamayacağı yerlerde kaldırılır.
Eklenen tek boşluk, bir bildirimin iki noktasından sonra gelendir. Biçimlendiricinin neyi okuduğuna karar vermeden önce bir sonraki kapanışa ya da noktalı virgüle kadar ileriye bakması, bu iki noktayı bir sözde sınıfın iki noktasından ayırt etmek içindir.
Örnekler
| Durum | Girdi | Sonuç |
|---|---|---|
| Tek satıra yazılmış bir kural | a{color:red;margin:0} | a { color: red; margin: 0; } |
Sık sorulan sorular
Stil sayfam bir yere gönderiliyor mu?
Hayır. Biçimlendirici, bu sayfada çalışan JavaScript'tir. Hiçbir şey yüklenmez, kaydedilmez ya da saklanmaz: internet bağlantınızı kesseniz bile araç çalışmaya devam eder.
Küçültme de yapıyor mu?
Hayır; bu bir unutkanlık değil, bir karardır. CSS'i küçültmek, hangi boşlukların anlam taşıdığına karar vermek demektir ve bunda yanılmak, bir kuralın hangi öğelere uygulandığını sessizce ve ancak canlı ortamda fark edeceğiniz biçimde değiştirir. Bu ayrı bir iştir ve ya iyi yapılmalı ya da hiç yapılmamalıdır.
Değerlerimi düzeltecek ya da sıralayacak mı?
Hayır. Onaltılık bir rengi küçük harfe çevirmez, #ffffff değerini kısaltmaz, baştaki sıfırı kaldırmaz, bildirimlerinizi yeniden sıralamaz ya da tarayıcı önekleri eklemez. Bunların her biri düzenle ilgili bir mesele değil, kodunuz hakkında bir görüştür ve bazıları davranışı değiştirir. Yalnızca boşluklar yer değiştirir.
Sass veya Less anlıyor mu?
Kısmen, ve bunu dürüstçe söylemek gerekir: bu dillerin modern CSS ile paylaştığı şey olan iç içe kuralları düzenler. Bir mixin'in, bir değişkenin ya da bir kontrol direktifinin ne anlama geldiğini hiç bilmez; bu yüzden onları oldukları token'lar olarak ele alır. Hiçbir şey kaybolmaz, ama @if ifadesinin bir dal açtığını bilmesini beklemeyin.
Data URI'ler ne oluyor?
Bozulmadan kalır. Tırnaksız bir url(), kapanış parantezine kadar tek bir parça olarak okunur, çünkü bir data URI çoğu zaman noktalı virgül içerir ve onu bir bildirimin sonu olarak okumak değeri ikiye bölerdi.
Bilmekte fayda var
- Çıktı, girdinin içerdiği parçaların tam olarak aynısını içerir. Eklenen tek şey, bir bloğun son bildirimindeki noktalı virgüldür; bu her yerde güvenlidir ve kural daha sonra bir satır uzadığında sonucu kararlı tutar.
- Kapanmamış bir dize, yorum ya da url() yeniden biçimlendirilmek yerine reddedilir, çünkü o noktadan sonra araç kodu metinden ayırt edemez.
- Düzen deterministiktir: aynı seçenekle aynı stil sayfası her zaman aynı çıktıyı verir ve zaten biçimlendirilmiş bir stil sayfasını biçimlendirmek hiçbir şeyi değiştirmez.