Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz CSS Güzelleştirici

Küçültülmüş CSS'i tutarlı girintilerle düzenleyin ya da küçültün. Öngörülebilir farklar için isteğe bağlı alfabetik özellik sıralaması.

Yüklendikten sonra çevrimdışı çalışır

Dosyayı buraya bırakın ya da göz atmak için tıklayın

CSS · cihazınızda işlenir

veya panodan yapıştırmak için Ctrl+V'ye basın

Dosyalara göz at
Biçimlendirilmiş CSS
Çıktı burada görünecek…

Yaygın kullanımlar

  • Üretime CSS'sinde Hata AyıklaÜretim sitelerinden küçültülmüş CSS'yi okunabilir biçimde görüntüle, stili bulmak ve tersine mühendislik yapmak.
  • Ekip CSS Stilini UygulaEkip tarafından gönderilen CSS'i tutarlı bir beautifier aracılığıyla çalıştır, böylece diffs biçimlendirmede değil içerikte olur.
  • Ön Ek Eklenmiş CSS'i FormatlaÖn ek eklenmiş CSS (autoprefixer çıkışı) genellikle -webkit-, -moz-, -ms- varyantlarından fazlasına sahip. İncelemek için formatla.
  • Pro CSS'den ÖğrenÜnlü tasarım sistemlerinden CSS'yi derlenmiş çıkışlarını biçimlendirerek çalış.
  • Hata Raporları için CSS'i FormatlaCSS hataları dosyalarken biçimlendirilmiş CSS inceleyenler için çok daha kolay okunabilir.

Nasıl çalışır

Bu araç CSS'i doğrudan sayfaya yerleşik, elle yazılmış özyinelemeli bir ayrıştırıcıyla biçimlendirir — üçüncü taraf kütüphane yok, sunucu çağrısı yok. Ayrıştırıcı CSS'inizi karakter karakter dolaşır ve daha basit düzenli ifade tabanlı yaklaşımları şaşırtacak tırnaklı dizeleri, url() değerlerini, iç içe at-kurallarını ve yorumları doğru işler.

  1. 1
    Karakter düzeyinde ayrıştırma
    walkCss işlevi ham girdiyi karakter karakter tarar ve tırnak durumunu ile parantez derinliğini izler; böylece url(), dize değerleri veya yorumlar içindeki noktalı virgüller ya da süslü parantezler asla yapısal ayırıcı sanılmaz.
  2. 2
    Blok ve bildirim ayrımı
    Tarayıcı üst düzey bir açılış süslü parantezi bulduğunda önsözü (seçici veya at-kuralı anahtar kelimesi) çıkarır ve blok gövdesini özyinelemeli olarak işler — bu gövde de daha derin bir özyineleme düzeyinde işlenen iç içe kurallar (@media, @supports, yerel CSS iç içe yazımı) içerebilir.
  3. 3
    Özellik sıralama ve girinti
    Her bloktaki bildirimler bir grupta toplanır, ardından seçilen girinti genişliğiyle (2 veya 4 boşluk) yazılmadan önce isteğe bağlı olarak özellik adına göre alfabetik sıralanır. Küçültme modu boşlukları tamamen atlar ve yorumları kaldırır.
  4. 4
    Tarayıcıda anında çıktı
    Sonuçlar siz yazarken bir useMemo kancasıyla görünür — hiçbir şey bir yere gönderilmez. Biçimlendirilmiş veya küçültülmüş CSS panoya kopyalanabilir ya da .css dosyası olarak indirilebilir; panel orijinale göre boyut farkını gösterir.

İlgili araçlar

🌐

HTML Güzelleştirici ve Küçültücü

HTML'yi uygun yuvalama girintisiyle güzel yazdırın veya küçültün. <pre>, <script>, <style> bloklarındaki içeriği korur.

Deneyin
🗄️

SQL Biçimlendirici ve Güzelleştirici

SQL sorgularını uygun girintileme, yapılandırılabilir anahtar kelime büyük/küçük harfi ve ana yan tümcelerde satır sonlarıyla güzel yazdırın. Her SQL diyalektiyle çalışır.

Deneyin
🗜️

CSS Küçültücü ve Güzelleştirici

Dosya boyutunu azaltmak için CSS'i küçültün veya okunabilirlik için küçültülmüş CSS'i güzelleştirin. Anında, tarayıcınızda.

Deneyin

Sık sorulan sorular