منسق CSS

نسّق كود CSS أو صغّره

الإدخال

الإخراج

نبذة عن منسق CSS

يضم «منسق CSS» زرين لورقة أنماط واحدة. يشغل «تنسيق» js-beautify، المحرك الذي يقوم عليه beautifier.io: تصريح واحد في كل سطر، ومسافة بادئة من مسافتين، وسطر فارغ واحد على الأكثر بين القواعد، مع ترك التعليقات وقيم url(data:…) كما هي. ويشغل «تصغير» CSSO: تحذف التعليقات (ما عدا تعليقات الترخيص /*!) والمسافات البيضاء، وتدمج القواعد المتطابقة (فالقاعدتان a وbutton اللتان لهما التصريحات نفسها تصبحان a,button)، وتختصر الألوان والقيم الصفرية. ويعمل js-beautify وCSSO كلاهما في متصفحك. ولا يتحقق أي منهما من صحة الكود: ينسق كود CSS غير الصالح كما هو، وقد يحذف «تصغير» دون تنبيه ما لا يستطيع تحليله.

مثال

«تصغير»: تدمج قاعدتان لهما التصريحات نفسها، ويصبح #ff0000 هو red.

الإدخال

a{color:#ff0000;margin:0px 0px}
button{color:#ff0000;margin:0px 0px}
/* end */

الإخراج

a,button{color:red;margin:0}

كيفية تنسيق كود CSS أو تصغيره

1الصق ورقة أنماط في «الإدخال».
2انقر على «تنسيق» للحصول على كود CSS بمسافات بادئة، أو على «تصغير» للحصول على النسخة المضغوطة.
3قارن «الإخراج» بالأصل قبل أن تستبدله به.
4انقر على «نسخ» أو «تنزيل»؛ يسمى الملف «formatted.css» سواء استخدمت «تنسيق» أو «تصغير».

الصيغ والحدود

الإدخال: نص CSS، بما فيه قواعد @ مثل ‎@media
تنسيق: js-beautify: مسافة بادئة من مسافتين، وسطر فارغ واحد متتال على الأكثر
تصغير: CSSO: يدمج القواعد المتطابقة، ويختصر الألوان والأصفار، ويحذف المسافات البيضاء والتعليقات (ما عدا تعليقات /*!)
التحقق من الصحة: لا شيء: لا يبلغ عن أخطاء بناء الجملة

أين يعالج كود CSS الخاص بك

يجلب متصفحك المحركين، وهما مكتبتا JavaScript، عند أول نقرة؛ ويعالج كود CSS الذي تلصقه على جهازك ولا يرفع. إذا ظهر خطأ، يرسل نصه إلى سجل الأخطاء لدينا مع اسم الأداة واسم متصفحك وإصداره، بعد حذف المقاطع المقتبسة والأرقام الطويلة والعناوين منه.

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

هل يمكن أن يعطل التصغير كود CSS الخاص بي؟

لا، إذا كان كود CSS صالحا: لا يطبق CSSO إلا تغييرات تعطي النتيجة نفسها، مثل دمج القواعد المتطابقة. أما كود CSS غير الصالح فأمر آخر، لأن CSSO قد يحذف دون تنبيه الجزء الذي لا يستطيع قراءته، لذا تحقق من الإخراج.

هل يغير «تنسيق» قيمي؟

لا. لا يغير «تنسيق» إلا المسافات البيضاء: فواصل الأسطر، والمسافة البادئة من مسافتين، والمسافة بعد كل نقطتين رأسيتين. وتحفظ السلاسل النصية والتعليقات وقيم url(data:…) حرفا بحرف.

ماذا يحذف «تصغير»؟

التعليقات غير تعليقات الترخيص /*!، وفواصل الأسطر، والمسافات، والفاصلة المنقوطة الأخيرة في كل قاعدة، والوحدات في القيم الصفرية؛ كما يحول #ff0000 إلى red ويجمع القواعد التي تشترك في التصريحات نفسها، كما في المثال أعلاه.

نصائح وحيل

✓نسّق أولا ورقة أنماط مصغرة من طرف ثالث لتجد القاعدة التي تحتاجها، ثم عدّل الكود المصدري الخاص بك.
✓لتنسيق SCSS أو LESS، استخدم «منسق الكود» الذي ينسقهما كليهما عبر Prettier.