منسّق CSS

جمّل CSS بـ Prettier: تصريح واحد في كل سطر ومسافات متسقة ومسافتان أو 4 أو Tab، مع تداخل مرتب لاستعلامات الوسائط. يعمل داخل متصفحك.

الإخراج

يعمل بالكامل في متصفحك. لا يتم رفع بياناتك أبدًا.

أدوات ذات صلة

عرض الكل

ما هو منسّق CSS؟

يحوّل منسّق CSS أوراق الأنماط المضغوطة أو غير المتسقة إلى CSS مقروء باستخدام Prettier: كل قاعدة وتصريح في سطر مستقل، ومسافات موحّدة حول النقطتين والمحدِّدات، وإزاحة للقواعد @ المتداخلة.

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

  1. الصق CSS في مربع الإدخال أو اضغط تحميل مثال.
  2. اختر المسافة البادئة.
  3. اضغط التنسيق (يتحدّث الناتج أيضًا أثناء الكتابة).
  4. انسخ CSS المنسّق أو نزّله.

مثال

الإدخال
a{color:red;margin:0 auto}
الإخراج
a {
  color: red;
  margin: 0 auto;
}

متى تستخدم منسّق CSS

استخدمه لقراءة CSS المضغوط من موقع، أو لتوحيد أوراق الأنماط المكتوبة يدويًا قبل المراجعة، أو لتنسيق مقاطع CSS للتوثيق. لا يفحص أسماء الخصائص أو قيمها – استخدم مدقّق CSS لذلك. وللغتي SCSS وLess اختر اللغة في مجمّل الأكواد.

كيف يعمل منسّق CSS

تُحلَّل ورقة الأنماط بمحلّل Prettier القائم على PostCSS وتُطبع وفق قواعد Prettier لـ CSS: مسافة بعد كل نقطتين، وفاصلة منقوطة في نهاية كل تصريح، والمحدِّدات في القائمة كل منها في سطر. وتُعرض الكتل غير المغلقة وسائر أخطاء الصياغة مع السطر والعمود.

حالات الاستخدام الشائعة

  • فك ضغط CSS لتصحيح موقع إنتاجي
  • توحيد التنسيق قبل مراجعة الكود
  • تنسيق مقاطع CSS لمقالات التدوين
  • تنظيف CSS المصدَّر من أدوات التصميم

ملاحظة أمنية

كل شيء يعمل محليًا داخل متصفحك؛ الكود الذي تلصقه لا يُرفع إلى أي خادم.

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

هل يعيد ترتيب الخصائص؟

لا، تبقى التصريحات بترتيبها الأصلي.

هل يمكنه تنسيق SCSS أو Less؟

استخدم مجمّل الأكواد واختر SCSS أو Less.

هل تبقى التعليقات؟

نعم، تُحفظ التعليقات.

الخطوات التالية المقترحة

استكشف المزيد من الفئات