أداة تصغير CSS عبر الإنترنت لتسريع أكواد المواقع

مقدمة

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

كيف تضغط هذه الأداة شيفرة CSS

لصق الشيفرة والنقر على «ضغط» يفعل أكثر من حذف المسافات:

• تُحذف التعليقات، مع استثناء واحد. يبقى التعليق المكتوب بالصيغة المتعارف عليها /*! ... */، أو الذي يتضمن كلمة @license أو @preserve. وهذه هي الطريقة المعتادة لوسم تعليق بوصفه إشارة ترخيص أو نسبة عمل لا ينبغي لأدوات البناء أن تحذفه. أما التعليق التوضيحي العادي مثل /* button hover state */ فيُحذف — فإن أردت الإبقاء على ترويسة ترخيص فاكتبها بإحدى هاتين الصيغتين.
• تُزال المسافات وفواصل الأسطر والقواعد الفارغة. يُحذف كل ما لا يلزم للفصل بين رمز وآخر، أما كتلة القاعدة الفارغة المتبقية (محدد مثل .old-banner {} لا شيء بداخله) فتُحذف كليًا بدل أن تبقى حملًا زائدًا.
• تُختصر بعض القيم من دون أن يتغير معناها. يصبح اللون المكتوب #ffffff هكذا #fff، وتُقصّ الأصفار الزائدة (فتصير 0.500 إلى .5، وتصير قيمة مثل -0px إلى 0)، وتُحوَّل الكلمتان normal وbold المستعملتان مع font-weight إلى مقابليهما الرقميين 400 و700.
• تبقى الخصائص المخصصة في CSS وتعبيرات calc() في مأمن. فالمتغيرات المعرّفة بالبادئة -- (مثل --brand-color) وتعبيرات calc() تقوم على علامات ومسافات تنكسر لو ضُغطت كما تُضغط أي قيمة عادية، ولهذا تُنحّى جانبًا قبل تشغيل خطوتَي إزالة المسافات واختصار الأصفار، ثم تُعاد كما هي من غير مساس.

ما ينبغي معرفته قبل الضغط

لا تعيد هذه الأداة ترتيب قواعدك ولا تدمجها ولا تحذف المكرر منها — فالناتج يحمل المحددات نفسها بالترتيب نفسه، غير أنها مضغوطة. وإن كنت تبحث عما يزيل شيفرة CSS التي لا تستعملها صفحتك فعلًا، فتلك أداة من نوع آخر لا أداة ضغط. ولأن الضغط هنا يقوم على إزالة الفراغات واختصار القيم لا على إعادة تفسير بنية القواعد، يبقى المحتوى المتداخل — كالقواعد الواردة داخل استعلام @media — في موضعه، ويُضغط ما بداخله كما يُضغط كل ما عداه.

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

لا يغيّر الضغط هنا ما تفعله شيفرتك، ومع ذلك يستحق الأمر نظرة سريعة على صفحة تستعمل الناتج المضغوط قبل النشر أو التسليم — وهي العادة نفسها التي نراجع بها أي عمل قبل إرساله.

متى تكون هذه هي الأداة المناسبة

• تجهيز مشروع صفّي أو موقع شخصي للنشر. فملف CSS الأصغر يُحمَّل أسرع، وهذا أهم مما يبدو على شبكة المدرسة أو على هاتف يعمل ببيانات الجوال.
• رؤية الشكل الحقيقي لشيفرة المواقع المنشورة. كثيرًا ما يكشف مصدر موقع حقيقي عن شيفرة CSS لا تشبه ما يكتبه الطلبة في الصف — وضغط ملف تنسيقاتك ومقارنته جنبًا إلى جنب بالأصل طريقة ملموسة لإدراك السبب، وهو يقترن طبيعيًا بأداة CSS Beautifier في الاتجاه المعاكس.
• تخفيف وزن الصفحة قبل موعد تسليم أو في استضافة محدودة. فبعض الاستضافات التي توفرها المدارس ذات حصص ضيقة في المساحة أو في حجم النقل، وضغط الملفات قبل رفعها وسيلة سريعة للبقاء ضمن الحدود.

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

مثال

ينهي طالب موقعه الشخصي في مادة تصميم الويب: ملفات تنسيق منفصلة للتخطيط وللوحة الألوان وللقواعد المتجاوبة، وفي كل منها تعليقات بقيت من تجريب أفكار مختلفة على طول الطريق. وقبل تسليم المشروع يجمع الشيفرة ويلصقها في هذه الأداة. تبقى الصفحة بعد ذلك بالمظهر نفسه والسلوك نفسه تمامًا، لكن الملف المرافق لها صار أصغر ولم يعد يحمل تعليقات المحاولة والخطأ التي كتبها أثناء البناء.

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

هل يغيّر الضغط شكل صفحتي؟

لا. تبقى القواعد والمحددات والقيم كما هي — ولا يتغير سوى التنسيق والتعليقات وقلة من القيم المختصرة (مثل الألوان الست عشرية والأصفار الزائدة)، وليس لأي منها أثر في طريقة العرض.

ماذا يحدث للتعليقات في شيفرتي؟

تُحذف التعليقات العادية. أما التعليق المكتوب بصيغة /*! ... */ أو المتضمن @license أو @preserve فيبقى — وهذا هو العرف المتبع لوسم إشارة ترخيص أو نسبة عمل.

هل تتعامل الأداة مع متغيرات CSS وتعبيرات calc()؟

نعم. تُصان الخصائص المخصصة وتعبيرات calc() أثناء الضغط بدل أن تُضغط كما تُضغط القيم العادية.

هل هناك حد للحجم؟

لا حدّ ثابتًا كما في أدوات رفع الملفات بهذا الموقع — فأنت تلصق نصًا ولا ترفع ملفًا. أما اللصقات الكبيرة جدًا، كحزمة مكتبة كاملة مثلًا، فالأولى أن تتولاها أداة بناء ضمن مسار النشر لديك.

هل تُحفظ شيفرتي في مكان ما؟

لا. تُعالَج الشيفرة الملصقة لإنتاج النتيجة المضغوطة، ولا تُخزَّن ملفًا ولا يُحتفظ بها بعد ذلك؛ ولا يُسجَّل إلا أن الأداة استُعملت، أما الشيفرة نفسها فلا.

هل يمكنني ضغط أكثر من ملف تنسيقات دفعة واحدة؟

الصق كتلة CSS واحدة واضغطها في كل مرة. وإن احتجت إلى ضغط عدة ملفات معًا فادمجها أولًا، وإلا فكرر العملية مع كل ملف على حدة.

ما الأدوات ذات الصلة التي يمكنني استعمالها؟

استعمل CSS Beautifier لعكس العملية وإعادة الشيفرة المضغوطة إلى صورة مقروءة، أو HTML Minifier وJavaScript Beautifier لسائر المهام المتعلقة بالشيفرة.