Geliştirici aracı / 16

CSS Biçimlendirici ve Güzelleştirici

CSS kurallarını, seçici listelerini ve özellik bildirimlerini okunabilir kod olarak biçimlendirin, girintileyin ve genişletin.

CSS Biçimlendirici ve Güzelleştirici: TOEA; CSS kurallarını, medya sorgularını ve bildirimleri ayrıştırarak özellikler arasındaki boşlukları ve blok girintilerini standartlaştırır. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori: Geliştirici araçları
Çalıştırma sayısı: Tarayıcınızda
Maliyet: Ücretsiz · kayıt gerekmez
Kullanılabilirlik: Kullanıma hazır

CSS biçimlendirici ve düzenleyiciYerel işleme

Tamamen tarayıcınızda çalışır

Düzenlenmiş CSS çıktısı

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Başkasının stil sayfasını okuma

Küçültülmüş bir dosyayı biçimlendirmek onu okunabilir hâle getirir; ancak dosya, oluşturulduğu kaynakla aynı olmaz: küçültücüler kuralları birleştirir ve bildirimleri yeniden sıralar. Bu nedenle gruplanmış seçiciler ve kısaltılmış değerler görmeyi bekleyin. Bir öğeyi hangi kuralın biçimlendirdiğini bulmak için tarayıcının geliştirici araçları daha hızlıdır; bu araçların Sources paneli de küçültülmüş bir dosyayı yerinde güzel yazdırabilir. Bir stil sayfasının iki sürümünü biçimlendirip diff checker içinde karşılaştırmak, güncellemenin neyi değiştirdiğini gösterir.

Biçimlendirme neyi değiştirmez

Biçimlendirici girinti ve boşluk ekler; özellikleri sıralamaz, yanlış yazılmış özellik adlarını düzeltmez, satıcı ön ekleri eklemez veya yinelenen bildirimleri kaldırmaz. Bu nedenle colour: red olduğu gibi geçer. Boşluk dizileri, tırnak içindeki dizeler de dâhil olmak üzere her yerde daraltılır; bu nedenle birden fazla boşluğa dayanan content değerlerini kontrol edin. Dosya kullanıma hazır olduğunda CSS minifier ile yeniden sıkıştırın.

Nasıl kullanılır?

Ham veya küçültülmüş CSS kodunu yapıştırın.
2 boşluk veya 4 boşluk girintisini seçin.
CSS'yi Biçimlendir düğmesine tıklayın; ardından sonucu kopyalayın veya indirin.

Gizlilik ve sınırlamalar

Tüm CSS biçimlendirme işlemleri tarayıcıda yerel olarak çalışır.

İlgili araçlar

Sık sorulan sorular

@media sorgularını destekliyor mu?

Evet, iç içe at-rule'ler ve medya sorguları uygun girintiyle biçimlendirilir.

Renk kodlarını veya seçicileri değiştiriyor mu?

Hayır, biçimlendirme özellik değerlerini değiştirmeden yalnızca boşlukları, girintiyi ve yapıyı düzenler.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez