منسّق CSS — تنسيق CSS أونلاين مجاناً

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

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

كيفية استخدام منسّق CSS

الصق CSS مصغّراً أو غير مرتّب.
اختر المسافة البادئة وما إذا كنت تريد ترتيب الخصائص.
انسخ ورقة الأنماط المقروءة.

مزايا منسّق CSS

تصريح واحد في كل سطر مع مسافة بادئة متسقة
محدّد واحد في كل سطر لقوائم المحدّدات (اختياري)
كتل @media و@supports و@layer و@keyframes المتداخلة
توحيد التباعد حول النقطتين والفواصل والمجمّعات (combinators) و!important
ترتيب أبجدي اختياري للخصائص
الحفاظ على التعليقات والسلاسل النصية وقيم url() وcalc()

مثال على منسّق CSS

توسيع CSS مصغّر

الإدخال:

a,a:hover{color:#1266f0;text-decoration:none}@media(max-width:600px){a{display:block}}

النتيجة:

a,
a:hover {
  color: #1266f0;
  text-decoration: none;
}

@media (max-width: 600px) {
  a {
    display: block;
  }
}

الأسئلة الشائعة حول منسّق CSS

هل تُدعم @media و@supports وقواعد @ المتداخلة؟

نعم. تُزاح الكتل المتداخلة بمستوى واحد لكل عمق، وتُوحَّد مقدمات قواعد @: مسافة بعد اسم القاعدة، وبعد النقطتين في شرط مثل (max-width: 600px)، وبعد الفواصل.

ما وظيفة خيار «ترتيب الخصائص» (Sort properties)؟

يرتّب التصريحات داخل كل قاعدة أبجدياً حسب اسم الخاصية. وتُرتَّب الخصائص المخصصة (--name) مع البقية، أما التصريحات المتكررة للخاصية نفسها (القيم الاحتياطية) فتبقى بترتيبها الأصلي. وقد يغيّر الترتيبُ النتيجةَ إذا ضبطت القاعدة خصائص متداخلة: ففي padding-left: 5px; padding: 0 تسري padding لأنها الأخيرة، لكنها تصبح الأولى بعد الترتيب فتصير الحشوة اليسرى 5px. راجع مثل هذه القواعد، أو عطّل الخيار للاحتفاظ بالترتيب الأصلي.

هل يُفسد قيم url() أو calc()؟

لا. تُحفظ السلاسل النصية ومحتويات url(…) وتعابير calc()؛ ولا يُوحَّد إلا التباعد المحيط بها.

هل يصلح CSS غير الصالح؟

لا. تُنسَّق الأقواس غير المتوازنة بأفضل جهد ممكن مع عرض تحذير، لكن لا يُحذف شيء ولا يُعاد كتابته.

المراجع

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