طريقة ضغط CSS
الصق الكود
الصق أكواد CSS أو افتح ملف .css، أو جرّب «مثال».
اضغط
اضغط «اضغط الكود» لترى الحجم قبل وبعد ونسبة التوفير.
انسخ أو حمّل
انسخ النتيجة أو حمّلها ملفا .min.css وارفعه مكان الأصل.
ماذا نغيّر وماذا لا نغيّر؟
| مثال | التفاصيل | |
|---|---|---|
| نحذف | المسافات والأسطر والتعليقات | إلا المسافة التي لها معنى، مثل .a .b وcalc(1px + 2px). |
| نختصر | 0.50 ← .5، #FFFFFF ← #fff | القيمة نفسها بحروف أقل. |
| نحذف | القواعد الفارغة .a{} وآخر ; | لا أثر لها في الصفحة. |
| لا نغيّر | ترتيب القواعد ولا ندمجها | الدمج يوفر قليلا لكنه قد يغيّر أي قاعدة تفوز. |
| لا نغيّر | قيم المتغيرات --x | تبقى كما كتبتها، لأن JavaScript قد يقرؤها. |
نصائح
CSS الحديثة مدعومة. التداخل (& .title) و@layer و@container و:has() تبقى كما هي. بعض أدوات الضغط القديمة تحذفها أو تكسرها دون تنبيه.
رسائل أخطاء واضحة. قوس لم يُغلق أو نص بلا علامة إغلاق؟ نخبرك برقم السطر والعمود ونأخذك إليه.
ملف خريطة المصدر. نحذف تعليق sourceMappingURL لأن الخريطة القديمة لا تطابق الملف الجديد.
أسئلة شائعة
هل ضغط CSS يغير شكل الموقع؟
لا. لا نعيد ترتيب القواعد ولا ندمجها، ونترك كل مسافة لها معنى. اختبرنا الأداة على 17 ملفا حقيقيا منها Bootstrap وBulma وFont Awesome وملف CSS لهذا الموقع، وقارنّا كل قاعدة قبل الضغط وبعده بمحلل CSS مستقل وبالمتصفح نفسه، فلم يتغير شيء.
كم يوفر ضغط CSS؟
عادة من 10% إلى 40% حسب كثرة المسافات والتعليقات. وفّرنا مثلا 17% من Bootstrap و33% من Tachyons. ومع ضغط gzip في الخادم يقل الحجم المنقول أكثر.
لماذا لا تدمجون القواعد المتشابهة؟
لأن دمج القواعد أو نقلها قد يغير أي قاعدة تطبق على العنصر في حالات نادرة، والتوفير الإضافي صغير غالبا (1% إلى 3%). اخترنا الأمان.
هل تُحذف تعليقات الترخيص؟
لا، التعليقات التي تبدأ بـ /*! تبقى، لأن رخص بعض المكتبات تشترط بقاءها. ويمكنك إلغاء ذلك من الخيار.
ما المكتبات المستخدمة؟
نقرأ الكود بمكتبة css-tokenizer من مشروع csstools (رخصة MIT)، المطابقة لمواصفات W3C، ثم يكتب كودنا النتيجة. جربنا csso وclean-css، فوجدنا الأولى تحذف القواعد المتداخلة دون تنبيه، والثانية تكسر @container والتداخل.