ضغط CSS
مثال صغير ينخفض من 98 بايت إلى 66 بايت (أصغر بنسبة 32.7%) بحذف التعليقات والمسافات فقط: .card{display:flex;margin:0 auto}.card>.title:hover{color:#123456}
طريقة الاستخدام
- الصق كود CSS في مربع الإدخال.
- إذا كان في ملفك ترويسة ترخيص يجب أن تبقى، فاترك خيار «الإبقاء على تعليقات /*!» مفعّلًا. ولحذف كل التعليقات ألغِ تفعيله.
- راجع الحجم قبل الضغط وبعده، ثم انسخ CSS المضغوط.
طريقة الحساب
تحذف هذه الأداة فقط ما لا يمكن أن يغيّر طريقة قراءة CSS: التعليقات، وفواصل الأسطر، والإزاحات، والمسافات حول { } ; , > وبعد النقطتين. وتُحذف أيضًا آخر فاصلة منقوطة قبل القوس المعقوف الختامي مباشرة.
لا تختصر الألوان أو الأرقام أو الوحدات، ولا تدمج القواعد، ولا تغيّر الترتيب أو الأسماء. فمثلًا يبقى 0px و#ffffff كما هما. هذا حد مقصود: يجعل الناتج متوقعًا وآمنًا، وثمنه توفير أقل قليلًا من المحسّن الكامل.
تُحفظ كل مسافة لها معنى: مُركِّب الأحفاد قبل :hover، والمسافات بين القيم مثل margin: 0 auto، والمسافة في "and (min-width: 600px)"، والمسافات حول + و- داخل calc(). وتُنسخ النصوص بين علامات الاقتباس وقيم url() غير المقتبسة مثل data URI وتسلسلات الهروب حرفيًا.
تنبّه الأداة إلى تعليق أو نص أو url() غير مغلق، وإلى الأقواس المعقوفة غير المتوازنة. ومع ذلك تُنتج ناتجًا، فإذا رأيت تنبيهًا فراجع الملف الأصلي.
أسئلة شائعة
هل يغيّر الضغط مظهر صفحتي؟
لا ينبغي ذلك. تُحذف المسافات والتعليقات فقط، وتُحفظ كل مسافة مهمة. إذا لاحظت فرقًا فاستخدم الملف الأصلي، وتحقق من وجود قوس أو علامة اقتباس ناقصة في المدخلات وردت في التنبيهات.
لماذا التوفير أقل من أدوات الضغط الأخرى؟
المحسّنات الكاملة تدمج القواعد وتختصر القيم وتحذف الكود غير المستخدم. هذه الأداة لا تفعل أيًا من ذلك لأن هذه الخطوات قد تغيّر النتيجة في الحالات الحدية. وفي CSS المكتوب يدويًا يأتي معظم التوفير عادةً من المسافات والتعليقات.
ماذا يحدث لتعليقات /*!؟
افتراضيًا تُحفظ التعليقات التي تبدأ بـ/*!، لأنها الطريقة الشائعة لتمييز إشعار الترخيص. ألغِ تفعيل الخيار لحذفها أيضًا.
هل أستطيع استخدام الناتج في بيئة الإنتاج؟
نعم لـCSS العادي، بما فيه القواعد المتداخلة والخصائص المخصصة (متغيرات CSS). وكما مع أي أداة، اختبر الناتج في صفحتك قبل النشر واحتفظ بملف المصدر المقروء.
هل يُرفع كود CSS الخاص بي؟
لا. كل شيء يعمل في متصفحك.