منسّق CSS وضاغطه

كيفية تنسيق CSS أو ضغطه

1. الصق ورقة الأنماط، أو انقر فتح ملف لتحميل ملف .css (حتى 10 MB).
2. اختر المسافة البادئة (مسافتان أو 4 مسافات أو علامة جدولة)، وحدّد ما إذا كنت تريد سطر فارغ بين القواعد.
3. انقر تنسيق (تجميل) للحصول على شيفرة مقروءة، أو ضغط للحصول على أصغر نسخة ممكنة.
4. عند الضغط، أبقِ خيار دمج القواعد عند الضغط مفعّلًا للحصول على أفضل نتيجة، وخيار الإبقاء على تعليقات /*! */ مفعّلًا للحفاظ على ترويسات التراخيص.
5. انسخ النتيجة أو نزّلها. يعرض سطر الحالة الحجم قبل وبعد بالبايت، ونسبة التوفير المئوية.

إذا كان هناك قوس ناقص، تتوقف الأداة وتخبرك برقم السطر الذي فيه القوس { غير المغلق أو القوس } الزائد، بدلًا من إنتاج شيفرة معطوبة.

التجميل: شيفرة CSS مقروءة ومتسقة

يعتمد تنسيق (تجميل) على مكتبة js-beautify، وهي المنسّق المدمج في كثير من محررات الشيفرة. يضع كل تصريح في سطر مستقل، ويزيح محتوى كل قاعدة وكل قاعدة @ مثل @media و@supports، ويكتب كل مُحدِّد من مجموعة المحددات في سطر خاص به، ويضيف مسافة بعد النقطتين في كل تصريح. وتُحفظ الأسطر الفارغة الموجودة (سطر واحد متتالٍ على الأكثر)، فتبقى الأقسام المنطقية لملفك واضحة. لا يغيّر المنسّق القيم ولا ترتيب القواعد ولا معنى المحددات أبدًا: كل ما يغيّره هو المسافات.

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

الضغط: CSS أصغر باستخدام csso

يعتمد ضغط على csso (CSS Optimizer)، وهو ضاغط بنيوي. فإلى جانب حذف المسافات والتعليقات، يعيد كتابة ورقة الأنماط بصيغة مكافئة وأقصر:

• تُختصر الألوان (#ff0000 تصبح red، و#ffffff تصبح #fff)؛
• تُبسّط الوحدات والأصفار (0px تصبح 0، و0.5em تصبح .5em)؛
• تُحذف التصريحات المكررة وتُدمج الخصائص المختصرة حين يكون ذلك آمنًا؛
• مع دمج القواعد عند الضغط، تُجمع القواعد ذات التصريحات المتطابقة (a{color:red} b{color:red} تصبح a,b{color:red}) وتُحذف التصريحات التي يُلغيها ما بعدها.

إعادة الهيكلة آمنة لأوراق الأنماط العادية، لكنها تنقل التصريحات من مواضعها. فإذا كانت شيفرتك تعتمد على ترتيب تتابع (cascade) دقيق جدًا، كحيل المتصفحات مثلًا، فألغِ تفعيل الخيار: عندها يكتفي csso بضغط كل قاعدة في مكانها.

تُحذف التعليقات، باستثناء التعليقات «المهمة» التي تبدأ بـ/*!، وهي شائعة الاستخدام للتراخيص. ألغِ تفعيل الإبقاء على تعليقات /*! */ لحذفها هي أيضًا.

الحجم قبل وبعد

يقارن سطر الحالة حجم الإدخال وحجم النتيجة بالبايت وفق ترميز UTF-8. عادةً ما تكون الشيفرة المجمّلة أكبر من الأصل، بينما يوفّر الضغط في الغالب ما بين 20 و50% من حجم CSS المكتوب يدويًا. تذكّر أن الخوادم تضغط الملفات أيضًا بـgzip أو Brotli، لذا يكون التوفير الفعلي في النقل أقل من الرقم الخام، لكن الضغط يظل يقلّل زمن التحليل وحجم الملفات المخزّنة مؤقتًا.