Softonic

CSS Biçimlendirici

Adım 1 / 2
CSS'yi biçimlendir

DevTools’ta bir üretim stil sayfası açtığınızda her şey tek satırdadır. Bu biçimlendirici, küçültülmüş CSS’i okunabilir bir biçime açar: satır başına bir bildirim, iki boşlukluk girinti ve kurallar arasında bir boş satır. Ham CSS, Sass veya PostCSS çıktısı ve satır içi <style> bloklarının içindeki CSS ile çalışır. Yapıştırdığınız CSS, biçimlendirilmek üzere sunucumuza gönderilir ve aracın adımları arasında ilerlerken sayfa bağlantısında taşınır. Blok yorumlar biçimlendirme sırasında kaldırılır.

CSS nasıl biçimlendirilir

  1. 1

    CSS'i yapıştırın

    Tek satırda küçültülmüş, kısmen biçimlendirilmiş ya da zaten düzenli olabilir. Ayrıştırıcı bunu dert etmez.

  2. 2

    Biçimlendirin

    CSS Biçimlendir düğmesine basın. Her bildirim iki boşlukluk girintiyle kendi satırına geçer ve kuralları birer boş satır ayırır.

  3. 3

    İnceleyin

    Çıktıyı kontrol edin. Özellik sırası korunur ancak blok yorumlar kaldırılır.

  4. 4

    Kopyalayın

    Biçimlendirilmiş CSS'i panoya kopyalayın ve projenize geri yapıştırın.

Öncesi ve sonrası

Girdi (küçültülmüş):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Çıktı (biçimlendirilmiş):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

Biçimlendirici ne yapar

Davranış Değer
Bildirimler Satır başına bir tane, iki boşlukla girintili
Kurallar arasında boş satır 1
Açılış süslü parantezi Seçiciyle aynı satırda
Kapanış süslü parantezi Kendi satırında
Özellik sırası Korunur, asla yeniden sıralanmaz
Blok yorumlar Biçimlendirme sırasında kaldırılır

Biçimlendirici neyi kaldırır

/* Bu yorum biçimlendirdiğinizde kaybolur */
.button { background: #2563eb; }

Blok yorumlar (/* ... */) çıktıdan çıkarılır. Gerek duyuyorsanız, biçimlendirmeden önce orijinal dosyanın bir kopyasını saklayın.

İç içe kurallar (Sass / modern CSS iç içe geçme)

Biçimlendirici, iç içe kuralları derinliklerine göre girintiler:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

(& içermeyen) Sass/Less söz dizimi de kabul edilir. @mixin, @include ve @extend gibi Sass’a özgü at kuralları olduğu gibi aktarılır ancak derinlemesine yeniden biçimlendirilmez. Tam Sass biçimlendirmesi için Prettier gibi Sass’ı tanıyan bir araç kullanın.

Ne zaman biçimlendirilmemeli

  • Üretimde: biçimlendirmeyin, küçültün. Biçimlendirilmiş CSS, küçültülmüş hâlinden 2-3 kat daha büyüktür.
  • Diff almadan önce: her iki tarafı da biçimlendirin. Küçültülmüş bir dosyayı düzenli bir dosyayla karşılaştırmak okunamaz farklar üretir.
  • Bir derleme hattının içinde: tutarlılığı Prettier veya çerçevenizin biçimlendiricisi halletsin. Bu aracı tek seferlik temizlik için kullanın.

Sık Sorulan Sorular

Standart CSS’i ve CSS Nesting’i (2023 spesifikasyonu) işler. @mixin, @include, @extend gibi Sass’a özgü söz dizimi ve $ içeren değişkenler olduğu gibi aktarılır ancak derinlemesine yeniden biçimlendirilmez. Tam Sass biçimlendirmesi için Prettier gibi Sass’ı tanıyan bir araç kullanın.

Evet. Biçimlendirme sunucumuzda çalışır; yapıştırdığınız CSS her biçimlendirme isteğiyle birlikte gönderilir ve aracın adımları arasında ilerlerken sayfa bağlantısında taşınır. Hiçbir hesaba kaydedilmez ve sonrasında yeniden kullanılmaz.

Söz dizimsel olarak geçerliyse hayır. CSS’te boşluklar, değerlerin dışında anlamsızdır ve biçimlendirici yalnızca boşlukları ve satır sonlarını yeniden düzenler. Bildirim sırası ve değerlerin kendisi korunur.

Evet. <style> etiketlerinin içindeki CSS’i kopyalayın, yapıştırın, biçimlendirin ve geri yapıştırın. Biçimlendirici yalnızca CSS ile çalışır; çevresindeki HTML yerine CSS içeriğini yapıştırın.

Biçimlendirici, çıktının tutarlı kalması için blok yorumları (/* ... */) kaldırır. Saklamak istiyorsanız, biçimlendirmeden önce orijinal CSS’in bir kopyasını kaydedin.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur