Softonic

منسق CSS

خطوة 1 / 2
تنسيق CSS

تفتح ورقة أنماط الإنتاج في DevTools ويكون كل شيء في سطر واحد. يقوم هذا المنسق بتفكيك CSS المصغر إلى نموذج قابل للقراءة: إعلان واحد لكل سطر، ومسافة بادئة من مسافتين، وسطر فارغ بين القواعد. يعمل على CSS الخام، ومخرجات Sass أو PostCSS، وعلى CSS داخل كتل <style> المضمنة. يُرسل CSS الذي تلصقه إلى خادمنا لتنسيقه ويُحمَل في رابط الصفحة أثناء تنقلك بين خطوات الأداة. تُحذف التعليقات الكتلية أثناء التنسيق.

كيفية تنسيق CSS

  1. 1

    الصق ملف CSS

    سطر واحد مصغر أو منسق جزئيًا أو جميل بالفعل. المحلل اللغوي لا يهتم.

  2. 2

    تنسيق

    اضغط على زر تنسيق CSS. ينتقل كل إعلان إلى سطره الخاص بمسافة بادئة من مسافتين، ويفصل سطر فارغ بين القواعد.

  3. 3

    مراجعة

    افحص الناتج. يُحافظ على ترتيب الخصائص، لكن تُحذف التعليقات الكتلية.

  4. 4

    نسخ

    انسخ CSS المنسق إلى الحافظة وألصقه مرة أخرى في مشروعك.

قبل وبعد

الإدخال (مصغر):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

الإخراج (منسق):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

ماذا يفعل المنسق

السلوك القيمة
الإعلانات إعلان واحد لكل سطر، بمسافة بادئة من مسافتين
سطر فارغ بين القواعد 1
قوس الفتح في نفس سطر المحدد
قوس الإغلاق في سطر مستقل
ترتيب الخصائص يُحافظ عليه، لا يُعاد ترتيبه أبدًا
التعليقات الكتلية تُحذف أثناء التنسيق

ماذا يحذف المنسق

/* هذا التعليق يختفي عند التنسيق */
.button { background: #2563eb; }

تُحذف التعليقات الكتلية (/* ... */) من الناتج. إذا كنت بحاجة إليها، فاحتفظ بنسخة من الملف الأصلي قبل التنسيق.

القواعد المتداخلة (تداخل Sass/CSS الحديث)

يمنح المنسق القواعد المتداخلة مسافة بادئة وفقًا لعمقها:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

يُتسامح أيضًا مع بناء جملة Sass/Less (بدون &). تُمرَّر قواعد at الخاصة بـ Sass مثل @mixin و@include و@extend سليمة، لكن لا تُعاد صياغتها بعمق. للحصول على تنسيق Sass كامل، استخدم أداة تدعم Sass مثل Prettier.

متى لا يتم التنسيق

  • في الإنتاج: صغّر، لا تنسّق. حجم CSS المنسق أكبر بمقدار 2-3 مرات من الحجم المصغر.
  • قبل المقارنة: نسّق الجانبين. يؤدي التمييز بين ملف مصغر وملف منسق إلى ظهور اختلافات غير قابلة للقراءة.
  • داخل مسار البناء: اسمح لـ Prettier أو منسق إطار العمل الخاص بك بالتعامل مع الاتساق. استخدم هذه الأداة للتنظيف لمرة واحدة.

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

يتعامل مع CSS القياسي وCSS Nesting (مواصفات 2023). يتم تمرير بناء الجملة الخاص بـ Sass مثل @mixin و@include و@extend والمتغيرات ذات $ سليمة، لكن لا تتم إعادة تنسيقها بعمق. للحصول على تنسيق Sass كامل، استخدم أداة تدعم Sass مثل Prettier.

نعم. يتم تنفيذ التنسيق على خادمنا، لذا يُرسل CSS الذي تلصقه مع كل طلب تنسيق ويُحمَل في رابط الصفحة أثناء تنقلك بين خطوات الأداة. لا يُحفظ في أي حساب ولا يُعاد استخدامه بعد ذلك.

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

نعم. انسخ CSS من داخل وسمي <style>، ثم الصقه ونسّقه وألصقه مرة أخرى. يعمل المنسق على CSS فقط، لذا الصق محتوى CSS وليس HTML المحيط به.

يزيل المنسق التعليقات الكتلية (/* ... */) ليبقى الناتج موحدًا. إذا أردت الاحتفاظ بها، فاحفظ نسخة من CSS الأصلي قبل التنسيق.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

الأداة متاحة بلغات أخرى