فشرده‌ساز CSS

فشرده‌سازی CSS چیست؟

فشرده‌سازی CSS فرآیند حذف تمام کاراکترهای غیرضروری از یک استایل‌شیت بدون تغییر رفتار آن است. این یعنی حذف فضای خالی، شکست خط، کامنت‌ها و نحو اضافی مانند سمی‌کالن‌های انتهایی و کوتیشن‌های غیرضروری. مرورگر CSS فشرده‌شده را دقیقاً مانند نسخه اصلی تجزیه می‌کند. طبق مشخصات W3C، فضای خالی بین توکن‌های CSS اختیاری است مگر جایی که شناسه‌ها را از هم جدا کند. فشرده‌سازی از این ویژگی بهره می‌گیرد و همه چیز را به حداقل کاراکترهای لازم تقلیل می‌دهد.

یک فشرده‌ساز CSS آنلاین استایل‌شیت قالب‌بندی‌شده شما را می‌گیرد و نسخه‌ای فشرده و بهینه‌شده برای حجم انتقال تولید می‌کند. صرفه‌جویی معمول بین ۱۵ تا ۴۰ درصد است، بسته به میزان فضای خالی و تعداد کامنت‌های موجود در سورس. برای یک استایل‌شیت ۵۰ کیلوبایتی، این به معنای ۷ تا ۲۰ کیلوبایت کمتر در هر بارگذاری صفحه است. ترکیب این روش با فشرده‌سازی gzip یا Brotli در سرور، حجم نهایی انتقال را بیشتر کاهش می‌دهد زیرا خروجی فشرده‌شده CSS از پیش مینیفای‌شده کوچک‌تر از خروجی فشرده‌سازی نسخه قالب‌بندی‌شده اصلی است.

فشرده‌سازی یک مرحله استاندارد در پایپ‌لاین‌های build فرانت‌اند است. ابزارهایی مانند cssnano، clean-css و esbuild فشرده‌سازی را به‌عنوان بخشی از فرآیند build اجرا می‌کنند. اما در طول توسعه، گاهی لازم است یک قطعه کد را برای آزمایش فشرده کنید، یک بلوک CSS حیاتی را به‌صورت inline تعبیه کنید، یا قبل از اضافه کردن به پیکربندی bundle بررسی کنید یک استایل‌شیت چقدر کوچک می‌شود. اینجاست که یک فشرده‌ساز CSS مبتنی بر مرورگر مفید است: CSS را پیست کنید، خروجی فشرده‌شده را دریافت کنید، کپی کنید و ادامه دهید.

.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}

/* 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;
}

چرا از این فشرده‌ساز CSS استفاده کنیم؟

هر CSS دلخواهی را پیست کنید و در میلی‌ثانیه خروجی فشرده‌شده دریافت کنید. نیازی به پیکربندی ابزار build، دستورات CLI، یا ایجاد حساب کاربری نیست.

موارد استفاده فشرده‌ساز CSS

تکنیک‌های فشرده‌سازی CSS

یک فشرده‌ساز CSS چندین تبدیل برای کاهش حجم فایل اعمال می‌کند. هر کدام نوع خاصی از افزونگی در سورس را هدف می‌گیرند. جدول زیر تکنیک‌های اصلی و صرفه‌جویی معمول آن‌ها روی یک استایل‌شیت قالب‌بندی‌شده را نشان می‌دهد:

درصد صرفه‌جویی بسته به ورودی متفاوت است. فایل‌هایی با کامنت زیاد از حذف کامنت بیشتر بهره می‌برند، در حالی که CSS از پیش فشرده‌شده کاهش کمتری می‌بیند. مطمئن‌ترین مزایا از حذف فضای خالی و بهینه‌سازی shorthand به‌دست می‌آیند. فشرده‌سازهای پیشرفته مانند cssnano همچنین سلکتورهای تکراری را ادغام، ویژگی‌های longhand را به shorthand تبدیل (مانند ترکیب margin-top، margin-right، margin-bottom و margin-left به margin) و اعلان‌های بازنویسی‌شده را حذف می‌کنند.

مینیفای‌کردن در مقابل فشرده‌سازی Gzip

فشرده‌سازی CSS و فشرده‌سازی فایل مکمل هستند، نه جایگزین یکدیگر. در لایه‌های مختلف عمل می‌کنند و روی هم انباشته می‌شوند:

مثال‌های کد

نحوه فشرده‌سازی برنامه‌نویسی CSS در زبان‌ها و محیط‌های مختلف:

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}"

سؤالات متداول