Softonic

CSS Küçültücü

Adım 1 / 3
Sonraki

Küçültülmüş bir CSS dosyası, biçimli ikizine göre belirgin şekilde daha hızlı yüklenir ve fark her sayfa yüklemesinde birikir. Bu küçültücü boşlukları, yorumları ve sondaki noktalı virgülleri çıkarır; kademeyi veya herhangi bir kuralın etkisini değiştirmez. Çıktı her zaman geçerli CSS’tir ve tarayıcılar onu orijinaliyle aynı şekilde ayrıştırır.

CSS’i nasıl küçültürsünüz

  1. 1

    CSS’i yapıştırın

    Herhangi bir CSS: el yazısı, Sass-derlenmiş, satır içi stil blokları.

  2. 2

    Küçültün

    "Minify CSS" düğmesine basarak yorumları, boşlukları ve sondaki noktalı virgülleri tek geçişte çıkarın.

  3. 3

    Tasarrufu kontrol edin

    Bayt tasarrufu, sıkıştırılmış çıktının yanında gösterilir.

  4. 4

    Sonucu kopyalayın

    Küçültülmüş CSS’i üretim paketinize yapıştırın veya `.min.css` olarak kaydedin.

Küçültücü ne yapar

Dönüşümler (davranışı asla değiştirmez):

  • Yorumları çıkarın (tümü, /*! lisans blokları dahil).
  • Gereksiz boşlukları çıkarın (seçiciler, bildirimler, parantezler arasında).
  • Kapanış parantezlerinden önceki son noktalı virgülleri kaldırın.
  • Çok satırlı kuralları tek satıra daraltın.

Yaptığı tek şey bu, bu yüzden çıktı orijinaliyle birebir aynı davranır: her seçici, özellik ve değer yazdığınız gibi kalır.

Tipik tasarruflar

Kaynak Orijinal boyut Küçültülmüş boyut Tasarruf
Biçimli el yazısı CSS 20 KB 12 KB %40
Sass-derlenmiş, dev modu 45 KB 25 KB %44
Zaten küçültülmüş + gzip 10 KB 10 KB %0

Küçültmenin üstüne, sunucudaki gzip sıkıştırması CSS oldukça gereksiz olduğundan %60-80 daha tasarruf ekler. İkisi birikir; her zaman ikisini de yapın.

Küçültmenin yapmadıkları

  • Kullanılmayan CSS’i kaldır. Bu tree-shaking / PurgeCSS bölgesidir; HTML’nizi veya bileşenlerinizi analiz etmeyi gerektirir.
  • Hex renkleri kısalt, sıfır birimleri daralt veya bildirimleri birleştir. Bu agresif dönüşümler cssnano, esbuild veya Lightning CSS’in işidir, bu aracın değil.
  • Yinelenen seçicileri birine birleştir. Kaynak sırası kademeyi etkilediği için riskli; bazı küçültücüler dener, çoğu atlar.
  • Sınıfları yeniden adlandır. Bu CSS-in-JS veya CSS Modules’tür, küçültme değil.
  • Kritik CSS’i satır içine al. Bu ayrı bir derleme zamanı adımıdır.

Lisans yorumlarını koruma

Birçok küçültücü /*! ile başlayan yorumları korur, lisans başlıkları için kullanılır:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

Bu araç tüm yorumları çıkarır. CSS’inizde lisans başlıkları varsa küçültme sonrası geri ekleyin ya da lisans koruma seçeneği olan bir derleme aracı kullanın (cssnano veya esbuild gibi).

Source map’ler

Üretim hata ayıklaması için derleme araçları, küçültülmüş çıktının yanında bir source map oluşturur:

styles.min.css
styles.min.css.map

DevTools haritayı okuyabilir ve bir öğeyi incelediğinizde orijinal biçimli satır numaralarını gösterebilir. Bu araç source map üretmez.

Bir derleme hattında CSS küçültme

  • Vite, Webpack, Parcel: üretim derlemelerinde bunu otomatik olarak işler.
  • cssnano ile PostCSS: standart bağımsız küçültücü.
  • esbuild: CSS küçültmesini de içerir.
  • cssnano önayarları: güvenli dönüşümler için default, agresif için (bazı ödünlerle) advanced.

Bu araç tek seferlik küçültme, hızlı düzeltmeler ve küçültücülerin gerçekte ne yaptığını öğrenmek içindir. Üretim iş akışı için kaynağınızın okunabilir kalması ve yalnızca çıktının küçültülmesi için bir derleme aracı kullanın.

Küçültme CSS’inizi ne zaman bozabilir

Nadir ama mümkün:

  • Boşluğa duyarlı seçiciler: .foo .bar vs. .foo.bar, boşluk önemlidir.
  • Boşluklu özel özellik değerleri: --shadow: 0 2px 4px rgba(0,0,0,0.1), rgba() içindeki virgüller çıkarılmamalıdır.
  • Kapatılmamış blok yorumları: /* eksik kapanış sonrasındaki her şeyi yer. Küçültücüler hatalı biçimlendirilmiş girdide kötü davranabilir.

Düzeltme: küçültülmüş çıktınızı göndermeden önce her zaman bir lint/test geçişinden geçirin.

Sık Sorulan Sorular

Hayır. Doğru şekilde küçültülmüş bir CSS dosyası bayt olarak farklı ama semantik olarak aynıdır. Her seçici, özellik ve değer aynı görsel sonucu üretir. Bir oluşturma değişikliği görürseniz, küçültücüde bir hata vardır veya girdinizde boşluğa duyarlı söz dizimi vardır.

Evet, “Minify CSS” düğmesine bastığınızda gönderilir. Yapıştırdığınız CSS küçültme için sunucumuza gönderilir ve sonuç sayfaya geri döner. Veritabanına kaydedilmez ve sayfa bağlantısına eklenmez.

Sonra. Tarayıcıların aldığı son derlenmiş CSS’i küçültün. Sass çıktısı zaten oldukça kompakttır ama küçültmenin çıkardığı boşluklar ve yorumlara sahiptir.

Mütevazı ama gerçek, tipik olarak gzip üzerine %5-15. Boşlukları ve yorumları çıkarmak gzip örüntülerini de biraz daha yoğun yapar.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

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.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur