منسّق CSS ومجمّله

الصق شفرة CSS عادية أو مضغوطة ثم جمّلها بمسافات بادئة واضحة أو اضغطها للإنتاج. تدعم الأداة جميع خصائص CSS الحديثة بما فيها المتغيرات والاستعلامات الشرطية.

الميزات

التبديل بين التجميل والضغط
ترتيب الخصائص
إزالة التكرارات

طريقة الاستخدام

1. الصق شفرة CSS في مربع الإدخال على اليسار.

2. انقر على تنسيق للتجميل، أو تصغير للضغط.

3. انسخ النتيجة المنسّقة من اللوحة اليمنى.

حول هذه الأداة

من الصعب مراجعة CSS المصغّر أو المعدّل يدويًا، فالسطر الطويل الواحد يخفي القواعد المكررة والفواصل المنقوطة الناقصة والتجاوزات. يعيد هذا المنسّق بناء ورقة الأنماط بتعريف واحد في كل سطر ومسافة بادئة ثابتة من مسافتين أو أربع مسافات أو علامات جدولة، مع الحفاظ على السلاسل النصية والتعليقات والكتل المتداخلة مثل @media و@supports. أما التصغير فيفعل العكس لبيئة الإنتاج، إذ يزيل التعليقات والمسافات غير الضرورية لتقليل حجم النقل. يمكنك لصق الشيفرة أو سحب ملف .css، ثم نسخ النتيجة أو تنزيلها. التنسيق يغيّر الشكل فقط، فيبقى ترتيب القواعد ومعناها كما هما تمامًا، ويتصرف التتالي كما كان.

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

هل سيغيّر التنسيق سلوك CSS لديّ؟
لا. يغيّر المنسّق المسافات وفواصل الأسطر فقط. تُحفظ المحددات والتعريفات وترتيبها، فتعمل الخصوصية والتتالي كما كانا تمامًا.
كم يوفّر تصغير CSS؟
إزالة التعليقات والمسافات تقلّص ورقة الأنماط المكتوبة يدويًا عادة بنسبة 15–30%. أما تقديمها بضغط gzip أو Brotli فيوفّر أكثر بكثير، لذا استخدم الاثنين معًا في الإنتاج.
هل يدعم @media و@supports والقواعد المتداخلة؟
نعم. تُزاح قواعد @ والكتل المتداخلة حسب مستواها، ويُنسَّق محتواها مثل أي قاعدة أخرى، فتبقى استعلامات الوسائط سهلة التصفح.
هل تُحفظ التعليقات؟
عند التنسيق تُحفظ تعليقات الكتل وتوضع في أسطر مستقلة. وعند التصغير تُزال، إذ لا يحتاجها المتصفح.
هل يفحص المنسّق CSS بحثًا عن أخطاء؟
لا يتحقق من أسماء الخصائص أو قيمها. ينسّق ما يتلقاه، لذلك يبقى خطأ مطبعي مثل colr: red في الناتج، فاستخدم محررك أو أداة تدقيق مثل Stylelint لاكتشاف الأخطاء.

أدوات ذات صلة