CSS Biçimlendirme

Nasıl çalışır?

Bir sitenin stil dosyasını incelerken çoğu zaman tek satıra sıkıştırılmış bir .min.css ile karşılaşırsınız: 40 KB'lık dosya tek satırdır ve hangi kuralın nerede başladığı görünmez. Kodu sol panele yapıştırın; sağ panelde her seçici kendi satırına, her özellik (color: red; gibi) ayrı bir satıra iner ve süslü parantezlerin içi seçtiğiniz genişlikte girintilenir. @media, @supports ve @keyframes blokları bir kademe daha içeri alınır; böylece mobil kuralların masaüstü kurallarından nerede ayrıldığı bir bakışta görünür. Virgülle ayrılmış seçiciler (.kart h2, .kart h3) alt alta yazılır, yorumlar yerinde kalır. SCSS ya da LESS dosyasındaki iç içe kurallar da aynı biçimde açılır; değişkenler ($ana-renk, @ana-renk) olduğu gibi bırakılır. Sonuç satırı kaç satırın kaça açıldığını ve kaç kural bloğu bulunduğunu söyler. Ne yapılsın? ayarından Küçültülmüş'ü seçerseniz tersini yapar: boşluk ve yorumlar atılır, #ffffff gibi renkler kısalır ve kod tek satıra iner; kurallar birleştirilmez, sırası değişmez.

Bu araç css formatter, css beautifier, css girintileme, scss formatter, less beautifier aramalarıyla da biliniyor.

CSS nedir?

CSS (Cascading Style Sheets, basamaklı stil sayfaları), bir web sayfasının renklerini, yazı tiplerini, boşluklarını ve yerleşimini tanımlayan dildir. Her kural bir seçiciden (.kart, h2, #menu) ve süslü parantez içindeki özellik: değer; çiftlerinden oluşur. Tarayıcı kurallar arasındaki boşluk ve satır sonlarını yok sayar; bu yüzden aynı CSS hem okunur girintili biçimde hem de tek satıra sıkıştırılmış biçimde yazılabilir ve ikisi de sayfada aynı sonucu verir.

SCSS ve LESS nedir?

SCSS ve LESS, CSS'e değişken, iç içe kural ve yeniden kullanılabilir parça (mixin) ekleyen ön işlemci dilleridir. Tarayıcı bunları doğrudan okumaz; bir derleyici önce düz CSS'e çevirir. Söz dizimleri CSS'e çok yakın olduğu için aynı biçimleyiciyle girintilenebilirler: iç içe yazılmış .kart { h2 { ... } } yapısı her kademede bir girinti daha alır.

CSS biçimlendirme ile CSS küçültme arasındaki fark nedir?

İkisi aynı kodu iki ters yöne götürür. Biçimlendirme (beautify) boşluk ve satır ekler, kodu insanın okuyacağı hale getirir; dosya büyür ama anlamı değişmez. Küçültme (minify) boşluk ve yorumları atar, renk ve sayıları kısaltır, derin modda kuralları birleştirir; dosya küçülür, sayfa daha hızlı yüklenir ama kod okunmaz hale gelir. Tarayıcı için ikisi aynı sonucu verir; fark kimin okuyacağıdır.

Biçimlendirme kodu değiştirir mi?

Hayır. Girintili modda yalnız boşluk, satır sonu ve girinti değişir; seçiciler, özellikler, değerler ve yorumlar karakteri karakterine aynı kalır. Tarayıcı CSS'teki boşlukları yok saydığı için biçimlenmiş dosya sayfada tam olarak aynı görünür. Bu yüzden canlı sitenin küçültülmüş stil dosyasını açıp okumak, bir hatayı bulmak ya da bir kuralı kopyalamak için güvenle kullanılır.

Araç bir doğrulayıcı değildir: kapanmamış bir süslü parantez, yanlış yazılmış bir özellik adı ya da eksik noktalı virgül hata olarak bildirilmez, kod olduğu gibi girintilenir. Yine de girintili düzen hatayı çoğu zaman görünür kılar: kapanmayan bir blokta alttaki bütün kurallar bir kademe fazla içeride durur.

Girintili mi, küçültülmüş mü?

Girintili biçim insan içindir: kodu okurken, düzenlerken ve bir ekiple paylaşırken kullanılır. Küçültülmüş biçim tarayıcı içindir: yayındaki sitede dosya ne kadar küçükse sayfa o kadar hızlı açılır. Genel düzen şudur: projede girintili dosyayı tutar, yayına çıkarken küçültürsünüz.

Bu sayfadaki Küçültülmüş seçeneği güvenli küçültme yapar: yalnız boşluk ve yorumlar atılır, renk ve sayılar kısalır; kuralların sırası ve sayısı değişmez. /*! ile başlayan lisans yorumları korunur. Aynı seçicili kuralları birleştiren daha derin küçültme ve önce-sonra karşılaştırması için CSS küçültme aracını kullanın.

• Okumak, hata aramak, kural kopyalamak → Girintili
• Yayına koymak, e-postaya gömmek → Küçültülmüş
• SCSS/LESS kaynak dosyası → Girintili (küçültme derlenmiş CSS'e yapılır)

Sık sorulanlar

Küçültülmüş CSS dosyası nasıl okunur hale getirilir?

Dosyanın içeriğini kopyalayıp bu sayfadaki sol panele yapıştırın. Her seçici ve her özellik kendi satırına iner, blokların içi girintilenir. Sonucu kopyalayabilir ya da .css dosyası olarak indirebilirsiniz. Tarayıcıda açık bir sitenin stilini görmek için geliştirici araçlarındaki Kaynaklar sekmesinden .css dosyasını açıp içeriğini kopyalayabilirsiniz.

SCSS veya LESS kodunu da biçimlendirebilir miyim?

Evet. İç içe yazılmış kurallar, değişkenler ve & işaretli seçiciler de aynı biçimde satırlara açılıp girintilenir. Araç SCSS'i derlemez ve karışımları (@mixin, @include) çalıştırmaz; yalnız düzenini okunur hale getirir.

CSS'imde hata varsa araç söyler mi?

Hayır, bu araç bir doğrulayıcı değildir; hatalı kod da olduğu gibi girintilenir. Kapanmamış bir süslü parantez varsa alttaki kuralların fazladan içeride durmasından fark edebilirsiniz. Okunamayan bölümlerin konumunu görmek için CSS küçültme aracı uyarı verir.

Kodum bir sunucuya gönderiliyor mu?

Hayır. Biçimlendirme tamamen tarayıcınızın içinde yapılır; yapıştırdığınız kod bu sayfadan çıkmaz ve hiçbir yere kaydedilmez.