CSS biçimlendirici

Bir CSS stil sayfasını veya parçasını yapıştırın, bu araç tutarlı girintiyle okunur hale getirsin ya da tek yoğun satıra sıkıştırsın. Kapanmamış parantezli veya sarkık kurallı bozuk CSS bile hata vermek yerine yine de biçimlendirilir, yani her söz dizimi hatasını önce düzeltmeden ham CSS’i temizleyebilirsiniz.

Biçimlendirme ve küçültme nasıl çalışır?

Okunur biçimlendirme, 2 boşluk, 4 boşluk veya sekme girintisi arasından seçim yapabileceğiniz js-beautify kütüphanesi üzerinde çalışır. Katı bir ayrıştırıcı yerine belirteçler (token) üzerinde çalışır, bu yüzden kapanış parantezi eksik ya da başıboş bir noktalı virgül içeren bir stil sayfası bile hata fırlatmak yerine makul bir girintiyle çıkar. Bu, tarayıcının geliştirici araçlarından kopyalanmış ya da yarım kalmış bir dosyadan gelen CSS’i temizlerken önemlidir. Küçültme ise tam tersi yolu izler: yorumları siler, boşlukları toplar ve { } ; : , > çevresindeki gereksiz boşlukları kaldırır, ancak tırnak içindeki metinlerin ve url(...) çağrılarının içeriğine dokunmaz, böylece içinde boşluk geçen bir yol veya yazı tipi adı bozulmadan kalır.

Küçültücü, tam bir CSS ayrıştırıcısı değil bir dizi düzenli ifade (regex) geçişidir, bu yüzden birkaç bilinen sınır durumu vardır: tırnaklı bir argümanın içinde gerçek bir kapanış parantezi geçen bir url() doğru işlenmez, ayrıca iki nokta üst üste öncesindeki boşluğun kaldırılması bir alt öğe birleştiricisini sonrasındaki bir sözde sınıfla kaynaştırabilir (a :hover ifadesini a:hover’a çevirir, bu da seçicinin neyi eşleştirdiğini değiştirir). İkisi de gerçek projelerdeki CSS’te nadir görülür. Araç, bozuk girdide asla takılmamak için bu küçük riski göze alır.

CSS’im bir yere yükleniyor mu?

Hayır. Biçimlendirme ve küçültme, gömülü kütüphaneyi kullanarak tamamen tarayıcınızda gerçekleşir, hiçbir şey sunucuya gönderilmez. Şirketinize özel stil sayfaları, müşteri işleri veya başka sitelerden alınmış, gerçek içerik barındıran parçalar cihazınızda kalır, bu da rastgele bir web formuna yapıştırmak istemediğiniz kurum içi bir kod tabanından gelen CSS’i temizlerken işe yarar.

Yaygın kullanımlar: view-source’tan kaydedilmiş küçültülmüş bir stil sayfasını düzenli hale getirmek, bir CSS dosyasını yayınlamadan önce küçültmek veya bir bileşenin stillerini kod incelemesi için tutarlı bir girinti genişliğine getirmek. Seçicilerin, bildirimlerin ve @ kurallarının (at-rule) nasıl bir araya geldiği için MDN CSS söz dizimi referansına bakabilirsiniz.