CSS Biçimlendirici & Güzelleştirici
Kullanım Kılavuzu
CSS Formatter, CSS kodunu — standart CSS dosyaları, önişlemci çıktısı ve satır içi stil blokları dahil — doğrudan tarayıcıda güzelleştirir veya küçültür. Derleme araçları tarafından sıkıştırılmış, otomatik oluşturulan CSS genellikle okunamaz: tek satırdaki kurallar, zincirlenmiş seçiciler ve kısaltılmış değerler hata ayıklamayı ve incelemeyi zorlaştırır. Bu araç, küçültülmüş CSS'yi her bildirimin ayrı bir satırda olduğu, iç içe girintinin uygulandığı (@media sorguları ve @keyframes için) ve seçici, süslü parantez ile bildirimler arasında tutarlı boşluk bulunan okunabilir bir biçime genişletir. Biçimlendirme motoru, girinti boşluk sayısı, açılış küme parantezinin konumu ve birden fazla seçicinin işlenmesi için seçeneklerle CSS'ye özel olarak yapılandırılmış js-beautify kullanır. Küçültme tam tersini yapar: tüm gereksiz boşlukları kaldırır ve CSS'yi en kompakt biçime sıkıştırır — paket boyutunu kontrol etmek veya kritik yükleme dosyalarını optimize etmek için kullanışlıdır.
- CSS'inizi yapıştırın — Giriş paneline tıklayın ve ham veya küçültülmüş CSS kodunuzu yapıştırın. Standart CSS, Less, derlenmiş Sass ve satır içi stil blokları desteklenmektedir.
- Modu seçin — Okunabilir, girintili çıktı için "Güzelleştir"i veya üretimde kullanılmak üzere kompakt CSS üretmek için "Küçült"ü seçin.
- Girintiyi yapılandırın — Girinti boyutunu (2 veya 4 boşluk) seçin. Tutarlı bir boyut, ekip çalışmasında kod incelemelerini kolaylaştırır.
- Çıktıyı inceleyin — Sağ paneldeki biçimlendirilmiş CSS'yi okuyun. Bildirimlerin hizalanıp hizalanmadığını, @media sorgularının doğru girintili olup olmadığını ve birden fazla seçicinin ayrı satırlarda olup olmadığını kontrol edin.
- Sonucu kopyalayın — İşlenen CSS'yi panoya kopyalamak için "Kopyala"ya tıklayın. Kod editörünüze, tasarım sisteminize veya kod tabanınıza yapıştırın.
- Öncesi ve sonrasını karşılaştırın — Biçimlendirmenin CSS'nin anlamsal içeriğini değiştirmediğini görsel olarak doğrulamak için yan yana giriş ve çıkış panellerini kullanın — yalnızca boşluk ve hizalama.
Sık Sorulan Sorular
CSS'im bir sunucuya gönderiliyor mu?
Hayır. Tüm CSS biçimlendirme ve küçültme, yerel JavaScript aracılığıyla tarayıcınızda gerçekleşir. Kodunuz cihazınızda kalır.
Bu aracı çevrimdışı kullanabilir miyim?
2Kit bir PWA'dır. İlk ziyaretinizden sonra araç önbelleğe alınır ve tamamen çevrimdışı çalışır.
CSS güzelleştirme ve küçültme arasındaki fark nedir?
Güzelleştirme, CSS'i okunabilir hale getirmek için uygun girintileme ve satır sonları ile biçimlendirir. Küçültme, üretim için dosya boyutunu azaltmak amacıyla tüm gereksiz boşlukları ve yorumları kaldırır.
Bu araç değişkenler ve nesting gibi modern CSS'i destekliyor mu?
Evet. Biçimlendirici, özel CSS değişkenlerini (--custom-properties) ve çoğu modern CSS sözdizimini içeren standart CSS'i işlemek için js-beautify'ı kullanır.
Bu CSS biçimlendirici ücretsiz mi?
Evet. 2Kit tamamen ücretsizdir, hesap gerektirmez ve kullanım sınırı yoktur.
Teknik Uygulama
Tüm işlemler yalnızca tarayıcınızda gerçekleştirilir — hiçbir veri sunuculara gönderilmez. Bu araç, Aşamalı Web Uygulaması (PWA) olarak tamamen çevrimdışı çalışır: ilk ziyaretten sonra tüm sayfalar ve kaynaklar Service Worker tarafından önbelleğe alınır ve internet bağlantısı olmadan da kullanılabilir hale gelir. Girdiğiniz veriler cihazınızdan hiç çıkmaz, bu da API anahtarları, parolalar, özel yapılandırmalar ve gizli belgeler gibi hassas içerikler için güvenli bir ortam sağlar.