مضغط CSS
ضغط كود CSS للاستخدام في الإنتاج
CSS المدخل
CSS المضغوط
أمثلة ضغط CSS
CSS المنسق مقروء؛ CSS المضغوط موجز للإنتاج. مثال:
أنماط الحاوية والزر
الإدخال المنسق:
المخرجات المضغوطة:
استخدم تحميل مثال أعلاه لتحميل المزيد من البيانات النموذجية.
ما هو مضغط CSS؟
تستخدم ملفات CSS المسافات البيضاء والتعليقات والمسافات البادئة للقراءة. في الإنتاج، الملفات الأصغر تُحمَّل بشكل أسرع. يحذف مضغط CSS المسافات البيضاء الزائدة والتعليقات ويُقصّر القيم حيث يكون آمناً لتقليل حجم الملف. مواصفات W3C CSS تحدد اللغة؛ الضغط يحافظ على السلوك بعدد أقل من البايتات.
تحلل هذه الأداة CSS وتُعيد نسخة موجزة. يتم الضغط بالكامل في المتصفح. لا يتم إرسال أي شيء إلى خادم. لتنسيق CSS المضغوط استخدم منسق CSS. للتحقق استخدم التحقق من CSS.
كيفية استخدام هذه الأداة
لصق أو رفع CSS
انسخ CSS والصقه في المحرر الأيسر. يمكنك أيضاً النقر على رفع الملف لتحميل ملف .css. زر تحميل مثال يحمّل بيانات نموذجية. سيظهر خطأ إذا كان CSS غير صالح.
مراجعة المخرجات المضغوطة
تعرض اللوحة اليمنى CSS موجزاً. تُحذف المسافات البيضاء والتعليقات. المخرجات CSS صالح — السلوك محفوظ. سيعرض CSS غير الصالح خطأً في المخرجات.
نسخ أو تنزيل
استخدم نسخ لوضع النتيجة في الحافظة، أو تنزيل للحفظ. لـ SCSS أو Less حوّل أولاً بـ SCSS إلى CSS أو Less إلى CSS ثم اضغط.
كيف يعمل المضغط
تحذف الأداة المسافات البيضاء وفواصل الأسطر والتعليقات من CSS. قد تُقصَّر القيم حيث يكون آمناً (مثلاً 0px إلى 0، #ffffff إلى #fff). تبقى المخرجات صالحة وفق مواصفة W3C CSS. أدوات مثل cssnano وPostCSS توفر تحسيناً أكثر عدوانية؛ هذه الأداة توفر ضغطاً سريعاً في المتصفح.
متى يفيد ضغط CSS
المواقع في الإنتاج تستفيد من ملفات CSS أصغر. الضغط يقلل حجم الحمولة ويحسن أوقات التحميل ويوفر النطاق الترددي. أدوات البناء مثل Webpack وVite وParcel في الغالب تضغط تلقائياً، لكن هذه الأداة مفيدة للملفات الفردية أو الفحوصات السريعة.
قوالب البريد الإلكتروني أو الأنماط المضمّنة أو CSS المستضاف على CDN في الغالب تحتاج ضغطاً يدوياً. تمرير ورقة الأنماط عبر هذه الأداة يعطي مخرجات جاهزة للإنتاج. لإضافة بادئات المورّد قبل الضغط استخدم بادئات CSS. لتنسيق CSS المضغوط مجدداً استخدم منسق CSS.
الأسئلة الشائعة
هل يكسر الضغط CSS؟
لا. تُحذف المسافات البيضاء والتعليقات فقط. المحددات والخصائص والقيم تبقى كما هي. المخرجات CSS صالح. قد تُقصّر بعض المضغوطات القيم (مثلاً 0px إلى 0) — السلوك محفوظ.
هل بياناتي خاصة؟
نعم. يتم الضغط بالكامل في المتصفح. لا يتم إرسال أي بيانات إلى أي خادم.
ما حال خرائط المصدر؟
لا تولّد هذه الأداة خرائط مصدر. لبناءات الإنتاج بخرائط المصدر استخدم أداة بناء مثل PostCSS أو cssnano أو مضغّط حزمتك.
هل يدعم SCSS أو Less؟
تضغط هذه الأداة CSS العادي. لـ SCSS أو Less حوّل أولاً بـ SCSS إلى CSS أو Less إلى CSS ثم اضغط المخرجات.
بكم تصغر؟
عادةً 20-40% أصغر حسب المسافات البيضاء والتعليقات. CSS بتعليقات أو تنسيق كثير قد يحقق وفورات أكبر. التخفيض الدقيق يعتمد على البيانات المدخلة.
أدوات ذات صلة
مواصفة CSS: W3C CSS. MDN CSS مرجع أساسي. cssnano وPostCSS للضغط المتقدم.