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، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

أداة إزالة التشفير في لغة جافا سكريبت (JavaScript Deobfuscator)

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

مولد تراخيص

قم بإنشاء النص الكامل لترخيصات المصدر المفتوح مع إدخال اسمك والسنة المقابلة، ويشمل ذلك تراخيص MIT وApache 2.0 وGPLv3 وBSD-3 وMPL-2.0 وCC.

مولّد إعدادات Nginx

أنشئ كتل server في Nginx مع TLS وHTTP/2 وgzip والتخزين المؤقت في المتصفح وقواعد الوكيل العكسي، انطلاقًا من نموذج بسيط.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

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