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

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur