CSS güzelleştirme nasıl çalışır
Güzelleştirici, stil dosyanızı karakter karakter okur, her bloğun ne kadar iç içe olduğunu izler ve tutarlı boşluklarla yeniden yayar. Stillerin ne yaptığını asla değiştirmez — yalnızca dosyada nasıl göründüklerini.
- Belirtece ayırma. Kütüphane girdinizi bir belirteç akışına tarar: seçiciler, özellik adları, değerler, at-kuralları, yorumlar ve bunları ayıran süslü ayraçlar, iki nokta üst üste ve noktalı virgüller. Dizeler ve url() değerleri tek birim olarak tanınır; bu nedenle bir content özelliği içindeki süslü ayraç asla blok sınırlayıcı ile karıştırılmaz.
- İç içe geçmeyi izleme. Belirteç akışını dolaşırken güzelleştirici çalışan bir girinti düzeyi tutar. Her açılan süslü ayraç — bir kural bloğuna, medya sorgusuna veya keyframes bloğuna ait olsun — düzeyi derinleştirir; her kapanan onu geri alır. Bu derinlik, geri aldığınız her satırın önünde kaç girinti birimi olacağına karar verir.
- Seçenekleri uygulama. Girinti seçiminiz (2 boşluk, 4 boşluk veya sekme) bir düzeyin genişliğini belirler. Ayraç stili ayarı, açılan süslü ayracın kendisinden önceki seçiciye yapışıp yapışmayacağına ya da kendi satırına düşüp düşmeyeceğine karar verir. Diğer geçişler, kural blokları arasına boş satır ekler ve gruplanmış seçicileri ayrı satırlara böler.
- Yeniden yayma. Son olarak biçimlendirici belirteçleri hesapladığı girinti ve satır sonlarıyla geri yazdırır; her satıra bir bildirim ve her iki nokta üst üsteden sonra tek bir boşluk koyar. Sonuç, bir insanın kaskadı tarayabileceği şekilde düzenlenmiş aynı stil dosyasıdır.
CSS neden güzelleştirilir
- Küçültülmüş stil dosyalarını okuma. Prodüksiyon CSS, kurallar arasında boşluk olmaksızın tek satırda gönderilir. Güzelleştirme satır sonlarını ve girinti düzeyini geri yükler; böylece bir kaynak haritası olmasa bile bir düzen hatasının arkasındaki seçiciyi bulabilir ve tam olarak hangi bildirimleri belirlediğini görebilirsiniz.
- Tutarsız dosyaları düzenleme. Birden fazla kişinin dokunduğu bir stil dosyası karışık girinti ve ayraç stillerine sürüklenir. Güzelleştirici üzerinden tek bir geçiş tüm dosyayı tek bir düzene normalleştirir; bu da bir sonraki farkın boşluk gürültüsü yerine gerçek kaskad değişikliklerini göstermesini sağlar.
- Bu araç sayfanıza vergi yüklemez. Çoğu çevrimiçi biçimlendirici, sayfayı açar açmaz tüm kütüphanesini yükler. Bu araç js-beautify'ı yalnızca Güzelleştir'e tıkladığınızda veya Canlı modu açtığınızda geç yükler; bu nedenle sayfayı açmak birkaç yüz yerine birkaç kilobayta mal olur ve ilk oluşturma hızlı kalır.
- Hiçbir şey tarayıcınızı terk etmez. Güzelleştirici tamamen cihazınızda çalışır. CSS'niz hiçbir zaman bir sunucuya yüklenmez; bu, incelediğiniz stil dosyası bir müşteriye ait olduğunda, dahili sınıf adları içerdiğinde veya bir gizlilik anlaşması kapsamında olduğunda önem taşır.
Yaygın uygulamalar
CSS güzelleştirme, birinin okunmak için yazılmamış bir stil dosyasını okuması gerektiğinde ortaya çıkar.
- Prodüksiyon hata ayıklama: beklediğiniz düzeni geçersiz kılan kuralı bulmak için Network sekmesinden çekilen küçültülmüş bir stil dosyasını yapıştırın.
- Kod inceleme hazırlığı: gözden geçirenler kaskad değişikliklerini, düzen karmaşasını değil görsün diye çekme isteğini açmadan önce bir katılımcının tutarsız girintili stil dosyasını yeniden biçimlendirin.
- Öğrenme ve denetim: seçicilerin, medya sorgularının ve özel özelliklerin nasıl yapılandırıldığını incelemek için bir çerçeve veya bileşen kütüphanesi stil dosyasını genişletin.
Uygulamalı bir örnek
Küçültülmüş bir tek satır alın: a{color:red;margin:0}b{padding:0}. Girinti 2 boşluk ve ayraç stili Daralt olarak ayarlanmışken yukarıya yapıştırın, ardından Güzelleştir'e tıklayın. Okunabilir bloklar geri alırsınız: a { kendi satırında, color: red; ve margin: 0; bildirimleri birer düzey daha derin girintili, kapanış ayracı seçicinin altında hizalı ve aşağıda b kuralı. Ayraç stilini Genişlet olarak değiştirin; her açılan süslü ayraç kendi satırına düşer. Girinti'yi Sekmelere değiştirin; her düzey iki boşluktan bir sekme karakterine geçer. Stiller aynıdır; yalnızca düzen değişir.
FAQ
Bu tarayıcımda mı çalışıyor?
Evet. js-beautify kütüphanesi, Güzelleştir'e ilk tıkladığınızda veya Canlı modu etkinleştirdiğinizde geç yüklenir, ardından önbelleğe alınır. CSS'niz hiçbir zaman sayfayı terk etmez — sunucu ile gidiş-dönüş veya yükleme yoktur.
Güzelleştirme ile küçültmeyi geri alma aynı şey mi?
Okunabilir biçimlendirmeyi — girinti, satır sonları ve boşlukları — geri yükler; ancak küçültmenin kaldırdığı yorumları geri getiremez veya dosyada hiç bulunmayan yapıyı kurtaramaz. Yalnızca mevcut bildirimleri ve seçicileri yeniden biçimlendirir.
Güzelleştirme stillerimin nasıl görüntüleneceğini değiştirir mi?
Hayır. Güzelleştirme yalnızca boşluk ve satır sonları ekler ve kaldırır; kaskad dokunulmaz ve sayfa aynı şekilde görüntülenir. Özellik sırası, özgüllük ve değerlerin tümü tam olarak yazdığınız gibi kalır.
Ayraç stili seçenekleri ne anlama gelir?
Daralt, açılan süslü ayracı seçiciyle aynı satırda tutar (a {); bu yaygın CSS kuralıdır. Genişlet her açılan süslü ayracı seçicinin altındaki kendi satırına düşürür. Boş satır ve satır başına bir seçici geçişleri, kural blokları arasındaki boşlukları ve h1, h2, h3 gibi gruplanmış seçicilerin nasıl düzenlendiğini denetler.
Tarayıcı taraflı CSS güzelleştirme, bir derleme adımı veya yükleme olmadan size okunabilir bir stil dosyası sağlar. Küçültülmüş veya dağınık bir dosyayı yapıştırın, girinti ve ayraç stilinizi seçin, ardından sonucu kopyalayın veya indirin. Hiçbir şey cihazınızı terk etmez, hesap yoktur ve kütüphane yalnızca bunu istediğinizde yüklenir — bu nedenle bu sayfayı açmak size bir megabayт değil birkaç kilobayt mal olur.