مصغّر ومنسّق CSS

طريقة الاستخدام

1. ألصق ورقة الأنماط في CSS. تبقى url() والنصوص كما هي تماماً.
2. أبقِ الوضع على تصغير لجعل CSS أصغر، أو اختر تنسيقاً لجعله سهل القراءة.
3. قارن البايتات قبل التغيير والبايتات بعد التغيير لترى مقدار التوفير.
4. انسخ النتيجة، أو نزّلها باسم styles.css.

ما يحذفه التصغير وما يبقيه

يبدأ التعليق في CSS بالرمز /* وينتهي بالرمز */ ويُحذف، إلا الإشعار الذي يبدأ بالرمز /*!، فتبقيه الأداة لما يحمله من ترخيص أو نسبة للمؤلف. وتعرّف مواصفة CSS Syntax (باللغة الإنجليزية) التعليق، وتقرأ الأداة النصوص ورموز url() بالقواعد نفسها، فيُنسخ محتواها كما هو.

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

a { color : red ; }  يصبح  a{color:red}

الألوان والأصفار والاختصارات التي لا تُجرى

اللون السداسي الذي تتكرر أزواج خاناته يُكتب بثلاث خانات أو أربع: فيصبح #ffffff الرمز #fff، ويصبح #aabbccdd الرمز #abcd. وتُكتب الحروف بالحروف الصغيرة. ولا يُغيَّر لون في المحدِّد أبداً، لأن المحدِّد مثل #aabbcc يسمّي معرّفاً.

الطول 0px في بداية القيمة يصبح 0. وداخل دالة مثل calc()، وفي خاصية مخصصة تبدأ بشرطتين، يُترك الطول كما هو، لأن الصفر المجرد لا يُقرأ طولاً في كل سياق. ولا يغيّر التنسيق أي لون أو طول.

• تُحسب الأحجام بعدد بايتات UTF-8، وهكذا يرسل الخادم الملف، فالحرف الذي عليه علامة، مثل é، يأخذ بايتين.
• اختبر الصفحة بعد التصغير، لأن حيلة نادرة لمتصفح قديم قد تعتمد على مسافة تزيلها الأداة.

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