CSS Küçültücü

CSS Küçültme Nedir?

CSS küçültme, bir stil sayfasındaki tüm gereksiz karakterleri davranışını değiştirmeden kaldırma işlemidir. Bu; boşlukların, satır sonlarının, yorumların ve sondaki noktalı virgüller ile gereksiz tırnak işaretleri gibi fazlalık sözdiziminin atılması anlamına gelir. Tarayıcı, küçültülmüş CSS'yi orijinaliyle tamamen aynı şekilde ayrıştırır. W3C CSS Syntax Module dilbilgisini tanımlar; token'lar arasındaki boşluk, tanımlayıcıları birbirinden ayırdığı durumlar dışında zorunlu değildir. Küçültme, her şeyi minimum gerekli karakter sayısına indirerek bu özellikten yararlanır.

Online bir CSS küçültücü, biçimlendirilmiş stil sayfanızı alarak aktarım boyutu için optimize edilmiş kompakt bir sürüm üretir. Kaynağın ne kadar boşluk ve yorum içerdiğine bağlı olarak tipik tasarruf %15 ile %40 arasında değişir. 50 KB'lık bir stil sayfası için bu, her sayfa yüklenmesinde ağ üzerinden 7–20 KB daha az byte gönderilmesi anlamına gelir. Sunucudaki gzip veya Brotli sıkıştırmasıyla birlikte küçültme, nihai aktarım boyutunu daha da azaltır; çünkü zaten küçültülmüş CSS'nin sıkıştırılmış çıktısı, biçimlendirilmiş orijinalin sıkıştırılmasından daha küçüktür.

Küçültme, frontend derleme süreçlerinde standart bir adımdır. cssnano, clean-css ve esbuild gibi araçlar küçültmeyi derlemenin bir parçası olarak çalıştırır. Ancak geliştirme sırasında tek bir parçacığı test için küçültmeniz, kritik bir CSS bloğunu satır içine almanız ya da bir paket yapılandırmasına eklemeden önce bir stil sayfasının ne kadar küçüleceğini kontrol etmeniz gerekebilir. Tarayıcı tabanlı bir CSS küçültücü tam da bu noktada işe yarar: CSS'yi yapıştırın, küçültülmüş çıktıyı alın, kopyalayın ve devam edin.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Bu CSS Küçültücüyü Neden Kullanmalısınız?

Herhangi bir CSS yapıştırın ve milisaniyeler içinde küçültülmüş çıktı alın. Derleme aracı yapılandırması yok, CLI komutları yok, hesap oluşturma yok.

CSS Küçültücü Kullanım Senaryoları

CSS Küçültme Teknikleri

Bir CSS küçültücü, dosya boyutunu azaltmak için çeşitli dönüşümler uygular. Her biri kaynaktaki farklı bir fazlalık türünü hedef alır. Aşağıdaki tablo, biçimlendirilmiş bir stil sayfasında ana teknikleri ve tipik tasarruflarını listeler:

Tasarruf yüzdeleri girdiye göre değişir. Yoğun yorumlu dosyalar yorum kaldırmadan daha fazla faydalanırken, zaten sıkıştırılmış dosyalar daha az kazanım sağlar. En güvenilir kazanımlar boşluk kaldırma ve kısaltma optimizasyonundan gelir. cssnano gibi gelişmiş küçültücüler ayrıca yinelenen seçicileri birleştirir, uzun biçimli özellikleri kısaltmalara dönüştürür (margin-top + margin-right + margin-bottom + margin-left → margin) ve geçersiz kılınan bildirimleri kaldırır.

Küçültme ve Gzip Sıkıştırma Karşılaştırması

Küçültme ve sıkıştırma birbirinin yerine kullanılabilir değil, tamamlayıcı işlemlerdir. Farklı katmanlarda çalışır ve birbirinin üzerine yığılır:

Kod Örnekleri

Farklı dil ve ortamlarda CSS'yi programatik olarak nasıl küçülteceğiniz:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Sıkça Sorulan Sorular