Çevrimiçi CSS Güzelleştirici/Biçimlendirici

CSS Biçimlendirme Aracının Özellikleri

Bu araç, CSS kodunuzu düzenlemek için iki temel işlem sunar: güzelleştirme ve küçültme. Güzelleştirme, kodu okunaklı hale getirir; küçültme ise dosya boyutunu azaltır.

Güzelleştirme Örneği

Girdi olarak body{color:red;margin:0;} verdiğinizde, güzelleştirici şu çıktıyı üretir:

body {
  color: red;
  margin: 0;
}

Bu işlem, boşlukları düzenler, süslü parantezler ve noktalı virgüller etrafındaki metni ayırır, blok derinliğine göre girinti ekler ve bildirimlerin kaynak sırasını korur.

Küçültme Örneği

Aynı girdi için küçültme işlemi şu çıktıyı verir: body{color:red;margin:0}. Küçültme, blok yorumlarını kaldırır, süslü parantezler, iki nokta üst üste, noktalı virgül ve virgül çevresindeki boşlukları daraltır ve kapanış parantezinden hemen önceki noktalı virgülü siler.

Ayarlar ve Sınırlamalar

Girinti seçenekleri: iki boşluk, dört boşluk veya sekme. Bu araç, tam bir CSS ayrıştırıcısı veya doğrulayıcı değildir; yalnızca hafif bir metin biçimlendiricidir. Karmaşık dizeler, özel özellik değerleri, veri URL'leri veya yönerge olarak kullanılan yorumlar gibi durumlarda noktalama işaretleri anlamlı olabilir; bu nedenle çıktıyı bir tarayıcıda veya derleme hattında kontrol etmelisiniz.

Sıkça Sorulan Sorular

1. Güzelleştirme işlemi özellikleri yeniden sıralar mı?

Hayır, bildirimler kaynak sırasında korunur. Araç, özellikleri yeniden sıralamaz, satıcı önekleri eklemez veya uyumluluk testi yapmaz.

2. Küçültme işlemi her zaman güvenli midir?

Küçültme, çoğu durumda CSS'i anlamsal olarak değiştirmez, ancak bazı uç durumlarda (örneğin, özel özellik değerleri veya veri URL'leri) noktalama işaretleri önemli olabilir. Bu nedenle, küçültülmüş çıktının her durumda anlamsal olarak değişmediği garanti edilmez.

3. Dosya yükleyebilir miyim?

Hayır, bu araç yalnızca yapıştırılan metni işler. Dosya yükleme veya sunucuya veri gönderme yoktur; tüm işlem tarayıcınızda gerçekleşir.

Kontrol Listesi

• Girinti tercihinizi seçin (iki boşluk, dört boşluk veya sekme).
• Güzelleştir veya Küçült modunu seçin.
• Sonucu kopyalamadan önce gözden geçirin.
• Karmaşık CSS için çıktıyı tarayıcıda doğrulayın.