تصغير CSS _

كيف يعمل تصغير CSS؟

يمشي المُصغّر على ملف الأنماط بمحلل مُعجمي واعٍ بالحالة يُميّز بين المناطق المحفوظة (السلاسل النصية وقيم url()) والمسافات القابلة للتحرير حيث الطيّ والتجريد آمنان.

1. حماية السلاسل النصية وعناوين URL. قبل أي تحويل آخر، يُحدّد المحلل المعجمي كل سلسلة نصية مقتبسة ("…" أو '…') وكل وسيط url(…) ويحفظها كما هي. المرورات اللاحقة لا تلمس هذه البايتات أبدًا، فيُحفظ عنوان URL لصورة الخلفية المحتوي على مسافات أو خاصية المحتوى المحتوية على ترقيم بشكل مطابق.
2. تجريد التعليقات. تُزال كتل /* … */ حين يكون المفتاح مُفعَّلًا. إذا كان مفتاح تعليقات الترخيص مُفعَّلًا أيضًا، فتبقى كتل /*! … */ كي تظل ترويسات ترخيص MIT وApache وBSD في الناتج وفق ما تشترطه تلك التراخيص.
3. طيّ المسافات. يُطوى كل تتابع من المسافات والجدولات وكسرات الأسطر إلى مسافة واحدة، ثم تُزال المسافات حول الأحرف البنيوية في CSS وهي { و} و; و: و, كلياً. قوائم المحدد والقيمة تُعاد صياغتها بالطريقة ذاتها التي يقرأها محلل المتصفح.
4. تحسين القيم. مرورات اختيارية تُحوّل رموز ألوان hex إلى حروف صغيرة، وتطوي قنوات hex السداسية المزدوجة الأرقام إلى صيغة ثلاثية مختصرة (#aabbcc → #abc)، وتجرّد وحدات الأبعاد من القيم الصفرية (0px → 0). مرور الوحدات الصفرية يتخطى القيم داخل استدعاءات transform() حيث الوحدات ذات معنى.
5. الإبلاغ عن وفورات البايتات. يُقاس كلٌّ من النص الأصلي والمُصغّر بـ new TextEncoder().encode(…).byteLength، وهو نفس عدد بايتات UTF-8 الذي يراه CDN أو خادم HTTP على الشبكة. يعرض شريط المقاييس الحجم الأصلي والحجم المُصغّر والبايتات الموفَّرة والنسبة المئوية للتوفير.

لماذا نُصغّر CSS؟

• تحميل عرض أسرع يحجب التصيير. لن يرسم المتصفح بكسلاً واحداً حتى ينتهي من تحليل CSS. تخفيض ملف الأنماط بنسبة 30 بالمئة يُقصّر هذا الحجب ويرفع First Contentful Paint ويظهر مباشرةً في درجة Lighthouse للأداء.
• فواتير خروج CDN أقل. تُفوتر CloudFront وCloudflare وFastly بالغيغابايت الخارج. تخفيض ملف أنماط بنسبة 20 بالمئة يُشحن في كل مشاهدة صفحة يتحول إلى بند حقيقي في الفاتورة حين يتجاوز الزيارات الشهرية بضعة ملايين.
• تضمينات ورسائل بريد إلكتروني CSS أصغر. قوالب البريد الإلكتروني للمعاملات تُدمج CSS بداخلها للنجاة من مشاكل عرض Outlook وGmail، وكل بايت إضافي يُقربك من حد اقتطاع Gmail البالغ 102 ك.ب. التصغير قبل الدمج يُبقي الرسالة تحت الحد.
• بدون اعتماد على أدوات البناء. الأعمال الفردية السريعة والمستودعات القديمة بدون خط أنابيب بناء والبيئات المعزولة لا تتيح دائماً مجالاً لسلسلة أدوات Node. يمكنك تشغيل العملية هنا دون تثبيت PostCSS أو cssnano أو أي شيء آخر.

التطبيقات الشائعة

يظهر تصغير CSS في نهاية تقريبًا كل خط أنابيب بناء للواجهة الأمامية وفي سياقات تشغيل عدة حيث تهم أعداد البايتات.

• خطوط أنابيب البناء الإنتاجية: تشحن Webpack وVite وRollup وParcel جميعها خطوة تصغير CSS في إعدادات الوضع الإنتاجي الافتراضية. تشغيل العملية هنا قبل الإيداع يتيح التحقق من الناتج دون تشغيل بناء كامل.
• تضمين CSS في وسوم <style>: تستفيد الأطر ذات التصيير من جهة الخادم التي تُدمج CSS الحرج في مستند HTML من الوفر ذاته في البايتات كملفات الأنماط المستقلة، والـ CSS المُدمج الأصغر يُقلّل Time to First Byte.
• البريد الإلكتروني للمعاملات والتسويق: يُدمج HTML في البريد الإلكتروني كل CSS، فكل كيلوبايت في ملف الأنماط يُضاف إلى إجمالي حجم الرسالة. التصغير قبل الدمج يُبقي الرسائل تحت حدود حجم مزودي خدمة البريد.

مثال عملي

الصق مجموعة قواعد بحجم 1 ك.ب بمسافة بادئة من مسافتين، وأسطر فارغة بين المحددات، وكتلة تعليق ترخيص في الأعلى، وألوان hex مطوّلة كـ #FFFFFF وهوامش صفرية مثل margin: 0px. مع تفعيل كل الخيارات، يتقلص الناتج إلى نحو 600 بايت — توفير يبلغ 40 بالمئة — بينما تبدو الصفحة المُصيَّرة مطابقة بايتاً للمصدر.

هل يُغيّر التصغير سلوك CSS الخاص بي؟

لا، عند استخدام المفاتيح الافتراضية. يُزيل المُصغّر فقط البايتات التي يتجاهلها محلل CSS أصلاً — المسافات والتعليقات والفاصلة المنقوطة الاختيارية الأخيرة — ويتخطى داخل transform() حيث الوحدات ذات معنى. كل محدد وخاصية وقيمة يُحفظ.

هل يعمل مع SCSS أو LESS؟

فقط بعد تصييرها إلى CSS عادي. صياغة SCSS وLESS (المتغيرات والتداخل والـ mixins ومحددات الوالد &) ليست CSS صالحة وسيُشوّه المُصغّر شيفرتها. قم بتصيير مصدر المعالج المسبق أولاً، ثم الصق الناتج المُصيَّر هنا.

لماذا تُجرَّد تعليقات الترخيص الخاصة بي؟

"حذف التعليقات" مُفعَّل افتراضياً ويمسح كل كتلة /* … */. فعِّل "الحفاظ على تعليقات /*! الترخيص" للحفاظ على الكتل التي تبدأ بـ /*!. تشترط MIT وApache وBSD جميعها ترويسة حقوق النشر مع إعادة توزيع CSS.

ما مقدار ما يمكنني توفيره؟

يُخفَّض CSS المكتوب يدوياً عادةً من 15 إلى 35 بالمئة. الملفات الغنية بالتعليقات أو ذات المسافة البادئة العميقة مع كثير من ألوان hex الحرفية قد تصل إلى 40 بالمئة. الناتج المُصيَّر من Sass أو CSS-in-JS يكون في الغالب مُصغَّراً جزئياً مسبقاً ويوفر أقل — عادةً من 5 إلى 15 بالمئة.

تشغيل تصغير CSS في تبويب متصفح يُجنّبك سلسلة أدوات Node كلياً. الصق ملف الأنماط أعلاه، وعدّل الخيارات بما يناسب مدى الاقتضاب المطلوب، ثم انسخ الناتج أو نزّله بصيغة .min.css. لا رفع، لا حساب، لا مكتبة تابعة.