Temiz Web Kodu için Çevrimiçi CSS Düzenleyici

Giriş

Küçültülmüş ya da elle sıkıştırılmış CSS, tarayıcının indirmesi için verimlidir ama insanın okuması için zordur — her şey birbirine girer; satır sonu yoktur, girinti yoktur, çoğunlukla açıklama da yoktur. Güzelleştirme, küçültmenin tersini yapar: CSS'i bu sıkışık halinden alır ve onu yeniden okunur kılan satır sonlarını, boşlukları ve girintileri geri kurar; hem de hiçbir kuralın ne yaptığını değiştirmeden. Bu, CSS'e tarayıcının değil bir insanın gerçekten bakması gerektiği her durumda önem taşır: ondan öğrenmek, onu denetlemek ya da içinde belirli bir kuralı bulmak için.

Bu Araç CSS'inizi Nasıl Biçimlendirir

CSS'i yapıştırıp Güzelleştir'e tıklamak kodu blok başına bir kural olacak biçimde yeniden kurar: her seçici kendi satırında, altında girintili olarak özellikleri, her satıra bir özellik. Özellik değerlerinin kendisi — renkler, birimler, kısa yazımlar — yapıştırdığınız gibi kalır; yalnızca boşluklar ve yapı değişir. Seçicilerin ve değerlerin nasıl ele alındığına dair bilinmeye değer iki ayrıntı var:

• Gruplanmış seçiciler bir arada kalır. Virgülle ayrılmış birkaç seçicisi olan bir kural — örneğin .card, .card-highlight, .card-featured { ... } — bazı biçimlendiricilerin yaptığı gibi her seçici ayrı satıra bölünmek yerine tek bir seçici satırı olarak korunur.
• İçinde iki nokta geçen değerler doğru ele alınır. Her bildirimde yalnızca ilk iki nokta, özellik ile değeri arasındaki ayraç sayılır; böylece kendi içinde iki nokta barındıran bir değer — en sık rastlananı background: url(http://example.com/img.png) gibi bir web adresidir — yanlış yerden kesilmez.

Bu işlemin bir parçası olarak açıklamalar kaldırılır; biçem sayfanızda bir lisans ya da atıf notu varsa bunu bilmeniz gerekir — aşağıdaki nota bakın.

Kullanmadan Önce Bilinmesi Gerekenler

Bu araç dolambaçsız, düz CSS ile iyi çalışır — seçiciler ve özelliklerinden oluşan yalın bir liste. Gerçek dünyadan kod yapıştırmadan önce bilinmeye değer iki belirli sınırı vardır:

• İç içe kurallar doğru biçimlenmez. CSS'iniz bir @media sorgusu, bir @keyframes bloku ya da başka bir blokun içine yerleşmiş herhangi bir kural içeriyorsa, çevresindeki bölüm düzgün girintilenmek yerine büyük olasılıkla karışmış olarak çıkar. Bu araç yapıyı, açan ve kapatan süslü parantezleri birer çift halinde eşleştirerek kurar ve bir parantezin başka bir blokun ne kadar içinde durduğunu izlemez — bu yüzden @media içine yerleşmiş bir kuralın içeriği, düzgün biçimde iç içe kalmak yerine @media blokunun kendisiyle karışır. Biçem sayfanız medya sorguları ya da anahtar kareler kullanıyorsa, çıktının o bölümünü dikkatle gözden geçirin ya da iç içe bölümleri çıkarılmış bir sürümü güzelleştirin.
• Bütün açıklamalar istisnasız kaldırılır. Bu sitedeki, lisans ya da atıf notu olarak yazılmış açıklamaları koruyan CSS Minifier aracının tersine, bu güzelleştirici yapıştırılan koddaki her açıklamayı siler. Biçem sayfanızda korumanız gereken bir lisans başlığı varsa, güzelleştirmeden önce bir kopyasını saklayın.

Bunların hiçbiri CSS'in ne yaptığını etkilemez — alttaki kurallar ve değerler değişmez; söz konusu olan yalnızca yapının ne kadarının doğru biçimde okunur hale getirildiğidir.

Bu Aracın Doğru Seçim Olduğu Durumlar

• Başkasının küçültülmüş CSS'ini ondan öğrenmek için okumak. Gerçek bir sitenin biçem sayfasına tarayıcının geliştirici araçlarından bakmak çoğu kez sıkıştırılmış, okunmaz bir CSS gösterir — onu buraya yapıştırıp güzelleştirmek, bir yerleşimin ya da bileşenin nasıl kurulduğunu gerçekten incelemeyi olanaklı kılar; bu da aracı yalnızca kendi kodunuzda çalıştırmanın ötesinde, gerçek bir dijital okuryazarlık kullanımıdır.
• Bir öğrencinin teslim ettiği CSS'i gözden geçirmek. Düzenleyiciler arasında kopyalanıp yapıştırılan kod bazen özgün biçimini yitirir; okumadan önce güzelleştirmek incelemeyi ve geri bildirimi hızlandırır.
• Çalışmayan bir yerleşimin hatasını bulmak. Yoğun, biçimlenmemiş CSS'i soruna yol açan kural için taramak daha zordur — önce biçimlendirmek asıl sorunu genellikle daha görünür kılar.

Üzerinde çalıştığınız CSS @media sorgularına ya da başka iç içe bloklara dayanıyorsa ve güvenilir biçimlendirme gerekiyorsa, bir kod düzenleyicinin yerleşik biçimlendiricisi bu araçtan daha uygundur — yukarıdaki sınıra bakın. İç içe kural içermeyen düz bir biçem sayfası içinse — ki web tasarımına giriş çalışmalarının büyük bölümü böyledir — bu araç hiçbir şey kurmadan okunur çıktı almanın hızlı bir yoludur.

Örnek

Bir öğrenci bir şablon sitesinin CSS'ini ilginç buluyor ve bir kart yerleşiminin nasıl kurulduğunu anlamak istiyor. Yayındaki biçem sayfası tek bir yoğun satıra küçültülmüş durumda; bu yüzden onu okuyabilmek için önce bu araca yapıştırıp güzelleştiriyor. Kurallar okunur bir yapıya ayrılıyor ve böylece hangi seçicinin yerleşimin hangi bölümünü denetlediğini, boşlukların margin ve padding ile nasıl ayarlandığını, hangi renklerin tasarım boyunca yinelendiğini görmek olanaklı hale geliyor. Kopyalanan biçem sayfası duyarlı davranış için @media sorguları içeriyorsa, o bölüm sonradan ikinci bir bakış ister — yukarıdaki “Kullanmadan Önce Bilinmesi Gerekenler” bölümüne bakın.

Sık Sorulan Sorular

Güzelleştirmek CSS'in ne yaptığını değiştirir mi?

Hayır. Yalnızca boşluklar, satır sonları ve girinti değişir — seçiciler, özellikler ve değerler aynı kalır.

CSS'imdeki açıklamalara ne olur?

Kaldırılırlar. Bu araç, lisans ya da atıf açıklamalarını CSS Minifier gibi korumaz — birini saklamanız gerekiyorsa önce bir kopyasını alın.

Medya sorguları içeren CSS'i doğru biçimlendirir mi?

Güvenilir biçimde hayır. @media, @keyframes ya da benzeri blokların içine yerleşmiş kurallar karışmış olarak çıkabilir — çıktının o bölümünü denetleyin ya da iç içe yapıya çokça dayanan biçem sayfaları için bir kod düzenleyicinin biçimlendiricisini kullanın.

Başka bir siteden kopyaladığım küçültülmüş CSS'i güzelleştirebilir miyim?

Evet — bir sayfanın nasıl kurulduğunu öğrenmek için yaygın ve meşru bir kullanımdır. Kodu yalnızca incelemek yerine gerçekten yeniden kullanmayı düşünüyorsanız, kaynak sitenin kendi koşullarını göz önünde bulundurun.

Kodum bir yerde saklanıyor mu?

Hayır. Yapıştırılan CSS biçimlenmiş sonucu üretmek için işlenir ve sonrasında saklanmaz; yalnızca aracın kullanıldığı kaydedilir, kodun kendisi değil.

Gruplanmış seçiciler ayrı satırlara bölünür mü?

Hayır. Virgülle ayrılmış birkaç seçiciyle yazılmış bir kural, özgün haliyle yazıldığı gibi tek bir seçici satırında kalır.

Hangi ilgili araçları kullanabilirim?

CSS'i yayına hazır hale getirmek üzere yeniden sıkıştırmak için CSS Minifier, başka kod biçimlendirme işleri için JavaScript Beautifier ve HTML Beauty araçlarını kullanın.