CSS Düzenleyici - DigiKitApp

Sıkışık CSS kodunu okunaklı hale getirin.

Ne zaman kullanmalısın?

Sıkışık veya tutarsız girintili bir CSS dosyasını okunabilir hale getirmen, örneğin bir başkasının yazdığı stil dosyasını incelerken kullan.

Ne zaman kullanmamalısın?

CSS'i bir build aracıyla (Sass, PostCSS gibi) otomatik derliyorsan, formatlamayı genelde build sürecinin bir parçası olarak yapman daha tutarlı sonuç verir.

Adım adım kullanım

Düzenlemek istediğin stilleri CSS kodu alanına yapıştır. Bu, tek satıra sıkıştırılmış bir dosya ya da tarayıcının geliştirici araçlarından kopyaladığın bir parça olabilir.
Çalıştır butonuna bas.
Sonuçta her seçicinin ve her özelliğin ayrı satıra, girintili olarak yerleştiğini kontrol et.
Çıktıyı kopyalayıp editörüne yapıştır ve incelemeye ya da düzenlemeye oradan devam et.

Örnek

Hazır bir WordPress temasında butonların rengini değiştirmek istiyorsun, ama temanın stil dosyası tek uzun satır halinde. Bu satırı alana yapıştırıp formatladığında .button ile başlayan kuralları ve içindeki background veya border-radius gibi özellikleri gözle bulmak kolaylaşır. Değiştirmek istediğin kuralı bulduktan sonra temanın kendi dosyasına dokunmak yerine alt temaya ya da ek CSS alanına yalnızca o kuralı eklemek daha güvenli olur.

Başka bir senaryo da kod incelemesi. Bir ekip arkadaşın girintileri karışık bir dosya gönderdiyse, önce formatlayıp sonra okumak hangi kuralın hangi medya sorgusunun içinde kaldığını görmeni kolaylaştırır. Özellikle iç içe @media blokları olan dosyalarda süslü parantezlerin nerede kapandığı ancak düzgün girintiyle net anlaşılır.

CSS biçimlendirici ne yapar?

Araç CSS kodunu her kural bloğu ve her bildirim ayrı satırda olacak şekilde, iç içe seviyeye göre iki boşluk girintiyle yeniden yazar. Açılış parantezinden sonra yeni satır başlar, her noktalı virgülden sonra yeni satıra geçilir, kapanış parantezi bir seviye geri çekilir. Parantez içindeki noktalı virgüller (örneğin url(data:image/png;base64,...)), tırnaklı metinler ve yorumlar bozulmaz. @media içindeki kurallar bir seviye girintilenir.

Kullanırken

Araç bir ayrıştırıcı değil, karakter tabanlı bir düzenleyicidir. Hatalı ya da kapanmamış parantezli CSS’te çıktı da hatalı görünür.
Seçicideki virgüller aynı satırda kalır; her seçiciyi ayrı satıra bölmez.
Sass/Less gibi iç içe yazımlar ve değişkenler düz CSS değildir; sonucu gözle kontrol edin.
Büyük projelerde editörünüzdeki biçimlendiriciyi (örneğin Prettier) kullanmak ekip içinde tutarlılık sağlar.

Dikkat edilmesi gerekenler

Formatlama kodun davranışını değiştirmez, sadece görünümünü düzenler. Kapanmamış bir süslü parantez gibi bir hata varsa çıktı da garip görünür. Bu durumda önce hatayı bul.
Sıkıştırılmış dosyalarda yorum satırları genelde zaten silinmiştir. Formatlamak onları geri getirmez.
Sass veya Less sözdizimi düz CSS değildir. İç içe kurallar ve değişkenler içeren kodda sonucu dikkatle kontrol et.
Bir ekiple çalışıyorsan girinti ve satır düzeni için ortak bir kuralda anlaşın. Aksi halde her formatlama, sürüm kontrolünde gereksiz büyük farklar oluşturur.

Sık sorulan sorular

Girdiğim kod/veri kaydediliyor mu?

Hayır, hiçbir veri sunucuya gönderilmez veya saklanmaz; işlem tamamen tarayıcınızda gerçekleşir.

Büyük dosyalarda çalışır mı?

Evet, ancak çok büyük girdilerde (birkaç MB üzeri) tarayıcı performansı düşebilir.

Bu araç ücretsiz mi?

Evet, temel kullanım için tamamen ücretsizdir ve üyelik gerektirmez.