TR

CSS küçültme: CSS’i sıkıştır, biçimlendir ve HTML’e göm

Bu CSS küçültme aracıyla bir stil sayfasını küçültür, okunur biçime getirir ya da e-posta bültenleri için style özniteliklerine gömersiniz. Yorumlar, boşluklar ve gereksiz sıfırlar etkiyi değiştirmeden kalkar. Sözdizimi hataları satırı belirtir ve kodunuz tarayıcıda kalır.

Kaynak: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Güncelleme: .

AraçlarımGirdileriniz yalnızca bu tarayıcıda saklanır.

Kod yalnızca tarayıcınızda işlenir. Gömme kipinde tam bir HTML belgesi ya da <style> içeren bir parça yapıştırın.

Metniniz tarayıcınızda kalır – gönderilmez, kaydedilmez ve adres çubuğuna eklenmez.

Sonda bir style bloğu daha gibi ele alınır, örneğin ayrı bir CSS dosyasından.

Sonuç

Sonuç
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Boyut
212 → 144 karakter (%32 daha küçük).
Kaldırılan: 1 yorum, 0 boş kural. /*! ile başlayan yorumlar korunur.

Nasıl hesaplanır?

Bu araç stil sayfaları için üç şey sunar: küçük dosyalar için küçültme, okunur kod için biçimlendirme ve bazı programların style bloklarını yok saydığı ya da kırptığı HTML e-postalar için gömme.

CSS küçültme

  1. “Küçült”ü seçin ve CSS’inizi yapıştırın.
  2. Sonucu kopyalayın ya da style.min.css olarak indirin. Altta dosyanın ne kadar küçüldüğünü görürsünüz.

Yalnızca etkiyi değiştirmeyen dönüşümler uygulanır: yorumlar (/*! … */ hariç) ve boşluklar kalkar, } öncesindeki son noktalı virgül de; 0.50em .5em olur, #aabbcc #abc olur, 0px 0 olur. Birimli sıfırlar gerekli oldukları yerde kalır: calc(), min(), max(), clamp() içinde, flex kısaltmasında, süre, açı ve yüzde değerlerinde ve özel özelliklerde. Dizeler ve url() değişmez.

CSS biçimlendirme

Sıkıştırılmış CSS okunur koda dönüşür: satır başına bir bildirim, seçici listeleri satır satır, girintili bloklar ve kurallar arasında boş satır. Yorumlar korunur.

CSS’i HTML’e gömme

Style bloklu bir HTML belgesi yapıştırın. Her öğe için uyan kurallar değerlendirilir, özgüllüğe ve sıraya göre dizilir ve style özniteliğine yazılır. Var olan bir style özniteliği normal kurallara, !important ise her şeye üstün gelir. Bir öğeye yazılamayanlar, örneğin :hover, sahte öğeler, @media ve @font-face, bir style bloğunda kalır.

Bilmekte fayda var

Kodunuz tarayıcınızda kalır; gönderilmez ve kaydedilmez.

Sıkça sorulan sorular

CSS nasıl küçültülür?

“Küçült” kipini seçip CSS’i yapıştırın. Yorumlar, boşluklar ve gereksiz sıfırlar kaldırılır; sonucu kopyalayabilir veya dosya olarak indirebilirsiniz.

Küçültme sayfanın görünümünü değiştirir mi?

Hayır, yalnızca güvenli dönüşümler uygulanır. Birimli sıfırlar örneğin calc() içinde ve flex kısaltmasında gerekli oldukları için kalır. Dizeler ve url() dokunulmaz.

CSS’i gömmek ne işe yarar?

Bazı e-posta programları style bloklarını tamamen ya da kısmen yok sayar. Gömmede her kural öğeye style özniteliği olarak yazılır, böylece biçimlendirme ulaşır.

Gömerken :hover ve @media’ya ne olur?

Bir öğeye yazılamazlar, bu yüzden head içindeki bir style bloğunda kalırlar. Bunları destekleyen programlar yine uygular.

Araç çelişen kuralları nasıl çözer?

CSS basamaklamasına göre: önce !important, sonra daha yüksek özgüllük, eşitlikte sonraki kural. Var olan bir style özniteliği en yüksek özgüllüklü bir seçici gibi sayılır.

Kodum yükleniyor mu?

Hayır. Her şey tarayıcınızda çalışır; kod gönderilmez, kaydedilmez ve adres çubuğuna yazılmaz.

Kaynaklar ve yasal dayanak

Güncelleme: · Editoryal ilkeler

Benzer araçlar