مصغّر CSS

ما الذي يغيّره المنسّق أو المضغّط في الكود؟

يغيّر المنسّق التخطيط — المسافات وفواصل الأسطر والمسافات البادئة — ليصبح HTML أو CSS أو JavaScript متسقاً في القراءة، وبعض المنسّقات يوحّد أيضاً تفاصيل تعدّها اللغة متكافئة، مثل حالة أحرف أسماء الوسوم في HTML أو علامات اقتباس السمات؛ والمضغّط يزيل ما لا يحتاجه المتصفح — التعليقات والمسافات والفواصل المنقوطة الاختيارية — وقد يعيد كتابة القيم بصيغ أقصر مكافئة مثل #fff بدلاً من #ffffff. لا يُقصد بأيٍّ منهما تغيير ما يفعله الكود، لكن راجع الفروق قبل اعتمادها: فالخيار الذي يعيد ترتيب الكود، مثل ترتيب خصائص CSS، قد يغيّر التصريح الذي يسري، وتحويل اسم الوسم إلى أحرف صغيرة يُفسد مكوّناً في إطار عمل يميّز حالة الأحرف مثل <MyComponent>.

كيفية استخدام مصغّر CSS

1. الصق ورقة الأنماط.
2. أبقِ تحسينات القيم مفعّلة أو عطّلها.
3. انسخ CSS المصغّر أو نزّله.

مزايا مصغّر CSS

• إزالة التعليقات والمسافات البيضاء والفواصل المنقوطة الأخيرة والقواعد الفارغة
• اختصار الألوان السداسية العشرية (#ffffff → #fff) والأصفار البادئة (0.5em → .5em)
• حذف الوحدات من الأطوال الصفرية خارج calc()
• الحفاظ على السلاسل النصية ومحتويات url() وتباعد calc() سليمة
• الاحتفاظ اختيارياً بتعليقات الترخيص /*! license */
• الإبلاغ عن عدد البايتات الموفَّرة

مثال على مصغّر CSS

body {
  margin: 0px;
  color: #333333;
  padding: 0.5rem;
}

body{margin:0;color:#333;padding:.5rem}

الأسئلة الشائعة حول مصغّر CSS

المراجع

• HTML Living StandardWHATWGلغة HTML، بما فيها مراجع المحارف المسماة (الكيانات) وقواعد التحليل التي تتبعها المتصفحات.
• ECMAScript® Language Specification (ECMA-262)Ecma International / TC39معيار لغة JavaScript، بما فيه قواعد RegExp ودلالاتها، وJSON.parse/JSON.stringify، وكائن Date.