ما هو ضاغط CSS؟

يضغط CSS Minifier كود CSS الخاص بك عبر إزالة المسافات البيضاء والتعليقات والصياغة الزائدة. الملفات الأصغر تُنزَّل أسرع وترفع درجات PageSpeed.

تحت السطح يعتمد المُصغّر على خوارزمية CSSO التي لا تقتصر على حذف المسافات، بل تدمج القواعد المتجاورة ذات المُحدّد نفسه، وتزيل التكرار في الصيغة المختصرة (margin: 10px 10px 10px 10px تصبح margin: 10px)، وتحذف بادئات الموردين غير الضرورية، وتختصر ألوان HEX من ست خانات إلى ثلاث حين يمكن.

كيفية الاستخدام

1. الصق كود CSS في منطقة الإدخال، أو ارفع ملف .css، أو حمّل ملف أنماط مباشرة عبر رابط.
2. انقر على تصغير للضغط — تزيل الأداة التعليقات والمسافات البيضاء وتختصر القيم.
3. انسخ الناتج المُصغّر أو حمّله كملف .css. تحقق من نسبة الضغط المعروضة.

متى تستخدم

• نشر ورقة أنماط لموقع ثابت لا يمر بخطوة بناء.
• مقارنة نسختين من CSS لمعرفة كم تختفي من تكرار في الكود اليدوي.
• كسب كل بايت ممكن عند إدراج CSS الحرج داخل وسم head في وثيقة HTML.

النتيجة

ملف أنماط بحجم 24 كيلوبايت يحتوي على تعليقات وتنسيق يُصغّر إلى 16 كيلوبايت — تقليص بنسبة 33% يوفر 50 ميلي ثانية من وقت التحميل على اتصالات 3G.

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

هل يختلف عرض CSS المُصغّر عن الأصلي؟

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

هل ينبغي ضغط الناتج بـ gzip أيضاً؟

نعم. تطبيق gzip فوق التصغير يخفّض الحجم من 60 إلى 80٪ إضافياً. معظم شبكات CDN تطبق gzip تلقائياً. التصغير أولاً يبقى مفيداً لأن gzip يضغط الأنماط المتكررة، وهي أكثر بعد التصغير.

هل تُتلف عملية التصغير ملفات source map الخاصة بي؟

هذه الأداة لا تُنتج source map لأنها تعمل على سلسلة CSS واحدة لا على شجرة بناء كاملة. إن احتجت إلى الخرائط، استخدم أداة بناء مثل esbuild أو Vite تُخرج ملف .css.map بجانب CSS المُصغّر.

لماذا تبقى بعض المسافات في الملف المُصغّر؟

تحتفظ CSS بالمسافات داخل القيم النصية، وبين أجزاء المحدّد (.a .b تختلف عن .a.b)، وداخل تعبيرات calc(). المُصغّر يحذف فقط ما لا قيمة دلالية له ويترك الباقي كما هو.

هل آمن تصغير CSS الذي يستخدم خصائص مخصصة (متغيرات CSS)؟

نعم. أسماء وقيم الخصائص المخصصة تبقى كما كتبتها، والمُصغّر يضغط ما حولها فقط. متغيرات مثل --brand-color تظل سليمة لتعمل داخل استدعاءات var().

أدوات ذات صلة