منسق CSS
تنسيق وتجميل CSS مع تمييز الصياغة
CSS المدخل
CSS المنسق
أمثلة تنسيق CSS
CSS المضغوط صعب القراءة؛ التنسيق يضيف مسافات بادئة وفواصل أسطر. مثال:
أنماط الحاوية والزر
الإدخال المضغوط:
المخرجات المنسقة:
انقر تحميل مثال أعلاه لتحميل CSS مضغوط في المحرر.
ما هو منسق CSS؟
CSS (Cascading Style Sheets) يمنح الأسلوب لكل موقع ويب. CSS المضغوط أو سيئ التنسيق صعب القراءة والتصحيح. يضيف منسق CSS المسافات البادئة وفواصل الأسطر إلى CSS الخام أو المضغوط حتى تتضح المحددات والخصائص والتداخل. مواصفات W3C CSS تحدد اللغة.
تحلل هذه الأداة CSS وتُعيد تنسيقه بمسافات بادئة متسقة. تعمل بالكامل في المتصفح. لا يتم إرسال أي شيء إلى خادم، لذا يأمن استخدامها مع أوراق أنماط الإنتاج. لضغط CSS استخدم مضغط CSS. للتحقق استخدم التحقق من CSS.
كيفية استخدام هذه الأداة
لصق أو رفع
انسخ CSS والصقه في المحرر الأيسر. يمكنك أيضاً النقر على رفع الملف لتحميل ملف .css. زر تحميل مثال يحمّل بيانات نموذجية. سيظهر خطأ إذا كان CSS غير صالح.
مراجعة النتيجة
تتحدث اللوحة اليمنى تلقائياً. يتم تنسيق CSS الصالح بمسافات بادئة صحيحة. استخدم <strong>ضغط</strong> لإزالة المسافات البيضاء والحصول على نسخة مضغوطة للإنتاج.
نسخ أو تنزيل
استخدم نسخ لوضع النتيجة في الحافظة، أو تنزيل للحفظ كملف. لـ SCSS أو Less استخدم SCSS إلى CSS أو Less إلى CSS للتحويل أولاً.
كيف يعمل المنسق
تحلل الأداة CSS وتُعيد تنسيقه بمسافات بادئة متسقة. يتم اكتشاف المحددات والخصائص والقواعد؛ الأقواس والفواصل المنقوطة محفوظة. مواصفات W3C CSS تحدد اللغة. يضيف التنسيق فواصل أسطر ومسافات للقراءة دون تغيير السلوك. قواعد at-rules مثل @media و@keyframes و@import مدعومة. تتم المعالجة في المتصفح — لا يتم إرسال أي شيء إلى خادم.
أدوات البناء مثل Vite وWebpack وParcel تُخرج في الغالب CSS مضغوطاً. لصق هذا المخرج هنا يجعله مقروءاً. لمصادر SCSS أو Less، حوّل أولاً بـ SCSS إلى CSS أو Less إلى CSS ثم نسّق.
متى يفيد تنسيق CSS
يحتاج معظم المطورين إلى المنسق عند فحص أنماط من مواقع الإنتاج أو تصحيح CSS الجهات الخارجية أو مراجعة المخرجات المضغوطة من أدوات البناء. لصق CSS المضغوط هنا يجعل المحددات والقواعد مرئية فوراً. مخرجات Bootstrap أو Tailwind المجمّعة في الغالب مضغوطة — التنسيق يكشف البنية.
التنسيق مفيد أيضاً قبل مشاركة الأنماط مع الزملاء أو مراجعة طلبات السحب. لإضافة بادئات المورّد استخدم بادئات CSS. للتحويل إلى أنماط inline (مثلاً للبريد الإلكتروني) استخدم CSS إلى Inline. للتحقق استخدم التحقق من CSS.
الأسئلة الشائعة
هل بياناتي خاصة؟
نعم. يتم التنسيق بالكامل في المتصفح. لا يتم إرسال أي بيانات إلى أي خادم. يمكنك التأكد بفتح تبويب الشبكة في المتصفح.
هل يدعم SCSS أو Less؟
تنسّق هذه الأداة CSS العادي. لـ SCSS أو Less حوّل أولاً بـ SCSS إلى CSS أو Less إلى CSS ثم نسّق المخرجات.
ماذا يفعل الضغط؟
يحذف المسافات البيضاء وفواصل الأسطر والتعليقات من المخرجات المنسقة، مما يعطي أصغر نسخة للإنتاج. توجد أيضاً صفحة مضغط CSS مخصصة.
هل تُحفظ التعليقات؟
التنسيق يحفظ التعليقات. قد يحذفها الضغط حسب نوع المضغط. تحقق من المخرجات قبل استخدامها في الإنتاج.
ما حال خصائص CSS المخصصة؟
متغيرات CSS (--var-name) مدعومة. يتعامل المنسق مع صياغة CSS الحديثة بما فيها الخصائص المخصصة و@media و@keyframes.