ضاغط CSS
اضغط ملفات CSS لتقليل حجمها.
واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.
جارٍ تحميل الأداة…
ما هو ضغط CSS؟
CSS، أي أوراق الأنماط المتتالية، هي اللغة التي تصف شكل صفحة الويب: الألوان والمسافات والتخطيط والخطوط والسلوك المتجاوب. وملف التنسيق المكتوب للبشر مليء بالإزاحات والأسطر الفارغة والتعليقات والتنسيق المقروء، ولا يحتاج المتصفح شيئًا من ذلك.
والضغط يزيل كل ما لا أثر له في العرض: المسافات بين القواعد، والتعليقات، والفاصلة المنقوطة الأخيرة في الكتلة، والوحدات غير الضرورية على القيم الصفرية. ويختصر أيضًا الألوان الست عشرية، فتصبح #ffffff هي #fff، ويحذف القواعد الفارغة، ويُنبّهك إلى المحددات المكررة. والناتج غير مقروء للإنسان ومطابق للمتصفح، وأصغر عادةً بنسبة 10 إلى 30 في المئة، وأصغر أيضًا بعد gzip لأن CSS تنضغط جيدًا. ولأن ملفات التنسيق تعيق عرض الصفحة، فذلك التوفير يُطرح مباشرة من زمن ظهورها الأول.
لماذا أنشأنا هذه الأداة
كل من ينشر موقعًا دون خط بناء كامل ما زال يحتاج إلى CSS مضغوطة: قالب WordPress، أو صفحة هبوط، أو قالب بريد، أو موقع ثابت مجمّع يدويًا، أو إصلاح سريع يُنشر مباشرة على الخادم.
وملفات التنسيق أقل حساسية من معظم الملفات، لكنها عمل غير منشور، ولصق تصميم عميل غير منشور في خادم مجهول يبقى إفصاحًا لا داعي له. ضاغطنا مكتوب بلغة JavaScript ويعمل في تبويبك، فيجري التحويل على جهازك ولا يغادر أي طلب الصفحة. وهذا يزيل أيضًا المضايقات العملية للأدوات على الإنترنت: لا سقف للحجم، ولا طابور انتظار، ويعمل دون اتصال بعد تحميله.
نصائح وأخطاء شائعة
- احتفظ بالمصدر المقروء في نظام إدارة الإصدارات واضغطه كخطوة نشر، لا العكس أبدًا.
- احتفظ بتعليقات الترخيص (التي تبدأ بـ /*!) إذا كان جزء من CSS لديك من مكتبة طرف ثالث تشترط الإسناد.
- اختبر ملف التنسيق المضغوط بتحديث كامل؛ فالملف القديم المخزن مؤقتًا هو السبب المعتاد لعدم ظهور التغيير.
- فعّل gzip أو Brotli على الخادم أيضًا؛ فالتوفيران يتراكمان، والذي على الخادم أكبر عادةً.
بداية سريعة: استخدام ضاغط CSS
- الصق ملف التنسيق في مربع الإدخال أعلاه أو حمّل ملف .css.
- اختر خيارات الضغط، ثم شغّله وقارن عدد البايتات قبل الضغط وبعده.
- انسخ الناتج إلى ملف الإنتاج، واحتفظ بالنسخة المقروءة كمصدر.
- انشر وحدّث تحديثًا كاملًا لتتأكد أن شيئًا لم يتزحزح بصريًا.
- فعّل gzip أو Brotli على خادمك أيضًا؛ فالتوفيران يتراكمان.
افعل الشيء نفسه مع ملفات البرمجة بأداة ضاغط JavaScript ومع الترميز بأداة ضاغط HTML.
ما الذي يزيله الضغط
يحذف ضاغط CSS كل ما لا يحتاجه المتصفح:
- التعليقات: ملاحظاتك للمطورين الآخرين.
- المسافات: الإزاحات وفواصل الأسطر والمسافات حول الأقواس والنقطتين.
- الأحرف الزائدة: الفاصلة المنقوطة الأخيرة في الكتلة، والوحدات غير الضرورية على القيم الصفرية.
والقواعد نفسها لا تُمس، فتبدو الصفحة وتتصرف بشكل مطابق؛ إنها فقط تصل كسطر واحد كثيف بدلًا من كتل مقروءة.
كم يوفّر
تنكمش CSS المعتادة بنسبة 10 إلى 30 في المئة من الضغط وحده، وأكثر حين يضغطها الخادم أيضًا بـ gzip أو Brotli. وفي ملف تنسيق كبير، هذا توفير حقيقي وقابل للقياس في زمن التحميل؛ ولأن CSS تعيق العرض، فالملف الأصغر يعني ظهور الصفحة أسرع. وفي موقع صغير تكون البايتات المطلقة متواضعة، لكن العادة مجانية وتكبر مع نمو الموقع.
احتفظ بالمصدر وانشر المضغوط
القاعدة الوحيدة: لا تعدّل CSS المضغوطة يدويًا أبدًا. فهي غير مقروءة ومستحيلة الصيانة. احتفظ بملف CSS الأصلي المنسق كمصدر للحقيقة، وعدّله هو، ولا تضغط إلا النسخة التي تنشرها. وفي خط بناء حقيقي يحدث هذا تلقائيًا؛ أما في موقع تديره يدويًا، فاضغط كآخر خطوة قبل النشر.
الضغط مقابل التحسينات الأخرى
الضغط رافعة واحدة بين عدة روافع. ويتكامل جيدًا مع:
- ضغط الخادم (gzip/Brotli): يُطبَّق فوقه، بمكاسب أكبر بكثير.
- إزالة CSS غير المستخدمة: أكبر مكسب في ملفات التنسيق المتضخمة، لكنها تحتاج إلى تحليل ما يستخدمه الموقع فعلًا.
اضغط أولًا لأنه مجاني وآمن؛ واسعَ إلى إزالة CSS غير المستخدمة حين يكون الملف كبيرًا فعلًا.
استخدامات شائعة
- تسريع تحميل الصفحة بتصغير ملفات التنسيق.
- تقليل استهلاك البيانات في المواقع كثيفة الزيارات.
- تجهيز CSS للنشر في بيئة الإنتاج.