ضغط كود CSS

ملف CSS أخف دون أن يتغير شكل موقعك

ملف التنسيقات الذي تكتبه مليء بالمسافات والأسطر الفارغة والتعليقات، وهي ضرورية لك وأنت تعدّله، لكن المتصفح لا يحتاجها. كل زائر يحمّلها مع ذلك. أداة ضغط كود CSS في جود تحذف هذا الزائد وتعطيك ملفًا أصغر يعمل بالطريقة نفسها تمامًا.

والحجم هنا يهم أكثر مما يبدو: المتصفح لا يعرض الصفحة قبل أن ينتهي من تحميل ملفات CSS المرتبطة بها في رأس الصفحة، فكل كيلوبايت أقل يقرّب لحظة ظهور الموقع لزائرك، خاصة على شبكة هاتف بطيئة.

طريقة الاستعمال

1. الصق كود CSS في الخانة، حتى 2 ميغابايت.
2. اضغط «ابدأ الآن».
3. انسخ الكود المضغوط بزر «نسخ النتيجة» وضعه في ملف منفصل، مثل style.min.css.

ما الذي يُحذف وما الذي يبقى

• يُحذف: التعليقات، والمسافات وفواصل الأسطر غير اللازمة، والفاصلة المنقوطة الأخيرة قبل كل قوس إغلاق.
• يبقى كما هو: النصوص بين علامات التنصيص، مثل أسماء الخطوط «Segoe UI»، ومحتوى url() للصور والخطوط، حتى لا ينكسر رابط.
• تعليقات الترخيص التي تبدأ بـ /*! تبقى، لأن بعض المكتبات تشترط وجودها.

مثال: «.card { color: #ffffff; padding: 0px 10px; }» تصبح «.card{color:#ffffff;padding:0px 10px}».

ما لا تفعله الأداة

الأداة تحذف الزوائد ولا تعيد كتابة القيم: #ffffff تبقى كما هي ولا تصبح #fff، و0px لا تصبح 0. ولا تدمج القواعد المتكررة، ولا تحذف التنسيقات غير المستعملة في صفحاتك. هذه تحسينات تتطلب أدوات بناء متخصصة مثل cssnano، وتفيد في المشاريع الكبيرة. أما لموقع عادي أو قالب صغير، فحذف المسافات والتعليقات هو الجزء الأكبر من الفائدة.

نصيحتان

• احتفظ دائمًا بالنسخة الأصلية المرتبة للتعديل، وانشر النسخة المضغوطة فقط. لا أحد يريد تعديل سطر واحد من آلاف الحروف.
• الضغط هنا يكمل ضغط gzip الذي يقوم به الخادم ولا يغني عنه، فالأفضل الجمع بينهما.

ولضغط ملفات JavaScript استعمل ضغط كود JavaScript، ولصفحات HTML ضغط كود HTML. الكود يُرسل إلى خادم جود ويُضغط هناك، ولا يُحفظ.

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