ضاغط CSS

ما هو ضغط CSS؟

ضغط CSS هو عملية حذف جميع الأحرف غير الضرورية من ورقة الأنماط دون تغيير سلوكها. يعني ذلك إزالة المسافات البيضاء وفواصل الأسطر والتعليقات والصيغ الزائدة كالفواصل المنقوطة الزائدة عن الحاجة والاقتباسات غير الضرورية. تُحلّل المتصفحات CSS المضغوط بشكل مطابق للأصل. تُعرّف وحدة W3C CSS Syntax Module القواعد النحوية؛ والمسافات البيضاء بين الرموز اختيارية إلا حيث تُفصل بين المعرّفات. يستغل الضغط ذلك بتقليص كل شيء إلى الحد الأدنى من الأحرف المطلوبة.

يأخذ ضاغط CSS أونلاين ورقة أنماطك المنسّقة وينتج نسخة مضغوطة أصغر حجماً. تتراوح وفورات الحجم المعتادة بين 15% و40% حسب كمية المسافات البيضاء وعدد التعليقات في المصدر. بالنسبة لورقة أنماط حجمها 50 كيلوبايت، يعني ذلك إرسال 7–20 كيلوبايت أقل عبر الشبكة في كل تحميل صفحة. وعند الجمع مع ضغط gzip أو Brotli على الخادم، يُقلّل الضغط من حجم النقل النهائي أكثر لأن مخرج الضغط لـ CSS مضغوط مسبقاً أصغر من ضغط الأصل المنسّق.

الضغط خطوة معيارية في مسارات بناء الواجهة الأمامية. تُشغّل أدوات مثل cssnano وclean-css وesbuild الضغط كجزء من عملية البناء. لكنك أثناء التطوير تحتاج أحياناً لضغط مقتطف واحد للاختبار أو تضمين كتلة CSS حرجة أو التحقق من مقدار تقلص ورقة الأنماط قبل إضافتها إلى إعداد حزمة. هنا تكمن فائدة ضاغط 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 واحصل على مخرج مضغوط في أجزاء من الثانية. بدون إعداد أدوات البناء، وبدون أوامر CLI، وبدون الحاجة لإنشاء حساب.

حالات استخدام ضاغط CSS

تقنيات ضغط CSS

يُطبّق ضاغط CSS عدة تحويلات لتقليل حجم الملف. كل منها يستهدف نوعاً مختلفاً من التكرار في المصدر. يسرد الجدول أدناه التقنيات الرئيسية ووفوراتها المعتادة على ورقة أنماط منسّقة:

تتفاوت نسب الوفورات حسب المدخل. الملفات ذات التعليقات الكثيرة تستفيد أكثر من حذف التعليقات، بينما تُحقق CSS المضغوطة مسبقاً وفورات أقل. الأكثر موثوقية هو حذف المسافات البيضاء وتحسين الاختصارات. تُدمج أدوات الضغط المتقدمة كـ cssnano أيضاً المحددات المكررة وتطوي الخصائص المطوّلة في اختصارات (margin-top + margin-right + margin-bottom + margin-left إلى margin) وتحذف التصريحات المُستبدَلة.

ضغط CSS مقابل ضغط 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}"

الأسئلة الشائعة