CSS Beautifier ve Çevrimiçi Formatlayıcı
Dağınık veya sıkıştırılmış CSS stil sayfalarını gerçek zamanlı olarak anında biçimlendirin, küçültmeyin ve düzenleyin. Durum makinemiz CSS formatlayıcımız, yuvalanmış @media sorgularını, @keyframes, CSS değişkenlerini (--var), https:// URL'lerini ve inline SVG veri URI'leri—ve üretime göndermeye hazır olduğunuzda tek tıklamayla CSS Minifier içerir.
CSS Çevrimiçi Nasıl Güzelleştirilir ve Küçültülür?
- CSS:'nizi Yapıştırın Sıkıştırılmış
.min.cssveya dağınık stil sayfanızı soldaki Giriş CSS düzenleyicisine yapıştırın veya iç içe test etmek için Örnek Yükle seçeneğine tıklayın@mediasorguları, değişkenleri ve URL'leri. - Bir Ön Ayar Seçin veya Ayarları Özelleştirin: 2 Boşluklarını Seç, 4 Boşluklar, A–Z'yi Temizleyin ve Sıralayın veya Hızlı Ön Ayarlar'dan Küçültün (.min.css) sağ tarafta girintiyi, küme ayracı yerleşimini, seçici bölmeyi ve renk sıkıştırmayı ayarlayın.
- Canlı İstatistikleri İnceleyin: Giriş, Çıkış, Rules ve Lines sayaçlarının siz yazarken veya seçenekler arasında geçiş yaparken anında güncellenmesini izleyin.
- Kopyala veya İndir: clipboard'a Kopyala veya Biçimlendirilmiş stil sayfanızı
styles.beautified.css(veyastyles.min.cssKüçült modunda).
CSS Biçimlendirme ve Optimizasyon Seçenekleri Açıklaması
| Seçenek | Ne İşe Yarar | Önce | Sonrasında |
|---|---|---|---|
| Küçültmeyi Kaldır ve Girintiyi Kaldır | Tek satırlı kuralları ve yuvalanmış @media / @keyframes bloklarını 2, 4 veya 8 boşluk veya sekmeyle genişletir. |
@media(max-width:768px){.box{width:100%}} |
@media (maks. genişlik: 768 piksel) { |
| Hat Başına Bir Seçici | :is() veya :not() içindeki virgülleri yok sayarak virgülle ayrılmış seçici listelerini tek tek satırlara böler. |
.btn, .card, .modal { ... } |
.btn, |
| Renk Değerlerini Sıkıştırın | Çevredeki belirteçleri korurken rgb() ve 6 basamaklı onaltılık kodları herhangi bir bildirim değeri içindeki 3 basamaklı onaltılık kodlara dönüştürür. |
sınır: 1 piksel katı rgb(255, 0, 0); |
sınır: 1 piksel katı #f00; |
| Özellikleri Sırala (A–Z) | Kod incelemelerini standartlaştırmak ve yinelenen özellikleri ortaya çıkarmak için her bloğun içindeki bildirimleri alfabetik hale getirir. | z-endeksi: 5; ekran: esnek; hizalama öğeleri: merkez; |
hizalama öğeleri: merkez; |
Neden Durum Makinesi CSS Beautifier Kullanılmalı?
Birçok basit çevrimiçi CSS formatlayıcı, kodu her iki nokta üst üste (:), noktalı virgül (;) veya parantez (}) üzerine böler. Stil sayfanız aşağıdaki gibi modern CSS özelliklerini içerdiğinde bu yaklaşım bozulur:
- Yuvalanmış Kurallar ve Yerel CSS Yuvalama:
@mediasorguları,@supportsözellik sorguları,@keyframesanimasyonları,@layerblokları ve iç içe alt öğe seçiciler çok düzeyli girinti takibi gerektirir. - EHarici URL'ler ve Satır İçi SVG Veri URI'leri:
background gibi özellikler: url("https://...")veyaurl("data:image/svg+xml;utf8,hiçbir zaman bölünmemesi gereken iki nokta üst üste ve noktalı virgül içerir CSS özellik sınırlayıcıları.") - Sözde Öğe İçerik Dizeleri:
content: "Öğe: 1; Durum: Tamam" gibi bildirimlertam iç karakterlerini ve boşluklarını olduğu gibi korur. - W3C-Doğru Renk Kısaltma: Adlandırılmış renkler yalnızca onaltılık eşdeğeri CSS spesifikasyonunda kesinlikle daha kısa ve aynı olduğunda kısaltılır (örneğin,
white→#fffveblack→#000,green'yigreenolarak bırakırken#008000daha uzundur ve#0f0aslındakireç).
Sıkça Sorulan Sorular
Bir .min.css dosyasını çevrimiçi olarak nasıl küçültebilirim?
Sıkıştırılmış .min.css kodunuzu soldaki Input CSS kutusuna yapıştırın. Araç, seçicileri, bildirimleri, @media sorgularını ve @keyframes'yi gerçek zamanlı olarak temiz girintili çok satırlı CSS'ye otomatik olarak ayrıştırır.
Bu CSS beautifier, @media sorgularını, @keyframes ve data: URI'lerini destekliyor mu?
Evet. Basit bölünmüş tabanlı formatlayıcılardan farklı olarak bu araç, iç içe geçmiş blokları koruyan bir durum makinesi CSS ayrıştırıcısını kullanır (@media, @supports, @keyframes, @layer ve yerel CSS) yerleştirme) ve ayrıca url("https://..."), data:image/svg+xml URI'lerin içindeki iki nokta üst üste ve noktalı virgülleri ve alıntılanan content dizelerini içerir.
CSS özelliklerini alfabetik olarak sıralamak güvenli midir?
Alfabetik sıralama, büyük kuralların taranmasını kolaylaştırır ve yinelenen bildirimlerin tespit edilmesine yardımcı olur. Bununla birlikte, bir kural kısa yol özelliğine ve ardından daha spesifik bir geçersiz kılmaya dayanıyorsa (veya bunun tersi, background-color ve background gibi), bildirim sırasının değiştirilmesi hangi özelliğin kazanacağını değiştirebilir. Kurallarınız kısayol geçersiz kılma sırasına bağlı olmadığında sıralamayı etkinleştirin.
Bu araçla CSS'yi de küçültebilir miyim?
Evet. Yorumları, boşlukları ve sondaki noktalı virgülleri çıkarmak ve renk değerlerini kompakt bir üretim stil sayfasına sıkıştırmak için Minify CSS düğmesini tıklayın (veya ayarlar panelinde Minify (Single-Line .min.css) seçeneğini seçin).
CSS kodum herhangi bir sunucuya yüklendi mi?
Hayır. Tüm CSS biçimlendirme ve küçültme işlemleri, JavaScript kullanılarak tarayıcınızda %100 yerel olarak çalışır. Stil sayfalarınız asla bilgisayarınızdan ayrılmaz.