كيف أُنسق CSS المُصغّر ليصبح مقروءاً؟

الصق CSS المُصغّر في صندوق الإدخال مع اختيار تجميل واختر مسافة بادئة بمقدار 2 أو 4 مسافات. تُوضع المُحدّدات والإعلانات على أسطر منفصلة. ثم اضغط نسخ أو تنزيل للحصول على ملف .css.

هل يمكنه ترتيب خصائص CSS أبجدياً؟

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

كيف أُصغّر CSS بهذه الأداة؟

اختر تصغير بدلاً من تجميل. تُزال المسافات البيضاء والتعليقات، ويظهر مقارنة للحجم تُظهر مقدار تصغير الناتج. يحفظه التنزيل باسم minified.css.

هل يتعامل مع قواعد @media والتداخل وقيم ()url؟

نعم. يتتبع المُحلّل علامات الاقتباس والأقواس، فلا تُقسّم الفواصل المنقوطة أو الأقواس داخل ()url أو السلاسل النصية الإعلانات. تُزاد المسافة البادئة للكتل المتداخلة مثل @media و @supports وتداخل CSS الأصلي.

هل تُرفع ورقة الأنماط الخاصة بي إلى أي مكان؟

لا. المُحلّل مكتوب داخل الصفحة ويُنسّق CSS في متصفحك أثناء كتابتك. لا يُرسل شيء إلى خادم، ولا تُستخدم أي مكتبة تنسيق خارجية.

هل هو مجاني فعلًا؟

نعم. كل أداة مجانية الاستخدام، بدون حساب وبدون بطاقة ائتمان. العمل يجري على جهازك بدلاً من خوادمنا، وهذا ما يبقيها مجانية التشغيل.

هل يعمل على الجوال؟

نعم. يعمل في متصفحات الجوال الحديثة على iOS وأندرويد دون تثبيت أي شيء.

🎨

مُنسِّق CSS مجانًا

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

يعمل في المتصفح الخاص بكبلا اشتراك، بلا نوافذ منبثقةلا يلزم تسجيل الدخولمجاني للأبد

يعمل دون اتصال بعد التحميل

المسافة البادئة:

ترتيب الخصائص أبجديًا

أفلت ملفًا هنا، أو انقر للتصفح

CSS · تتم معالجته على جهازك

أو اضغط Ctrl+V للصق من الحافظة

تصفح الملفات

CSS مضغوط / غير منسّق

CSS منسّق

ستظهر المخرجات هنا…

الاستخدامات الشائعة

CSS الإنتاج تصحيح الأخطاءعرض CSS المصغر من مواقع الإنتاج بصيغة قابلة للقراءة للعثور على الأنماط والهندسة العكسية.
فرض نمط CSS للفريققم بتشغيل CSS المقدم من الفريق من خلال جمال متسق بحيث تكون الفروقات حول المحتوى وليس التنسيق.
تنسيق CSS ذو البادئة من الموردغالباً ما يكون CSS ذو البادئة من المورد (مخرجات autoprefixer) يحتوي على الكثير من متغيرات -webkit و -moz و -ms. صيغها لفحصها.
تعلم من CSS احترافيادرس CSS من أنظمة التصميم الشهيرة من خلال تنسيق مخرجاتها المجمعة.
تنسيق CSS لتقارير الأخطاءعند تقديم أخطاء CSS يكون CSS المنسق أسهل كثيراً للمراجعين في القراءة والفهم.

كيف يعمل

تنسّق هذه الأداة CSS باستخدام محلّل عودي مكتوب يدويًا مدمج مباشرة في الصفحة — لا مكتبة خارجية ولا استدعاء خادم. يمر المحلّل على CSS حرفًا حرفًا، ويتعامل بشكل صحيح مع السلاسل بين علامات الاقتباس وقيم url() والقواعد @ المتداخلة والتعليقات التي قد تربك الأساليب الأبسط المعتمدة على التعبيرات النمطية.

1
تقطيع على مستوى الحرف
تمسح الدالة walkCss الإدخال الخام حرفًا حرفًا، متتبعة حالة الاقتباس وعمق الأقواس حتى لا تُعامل الفواصل المنقوطة أو الأقواس المعقوصة داخل url() أو قيم السلاسل أو التعليقات كفواصل بنيوية.
2
فصل الكتل والتعريفات
عندما يجد الماسح قوسًا معقوصًا افتتاحيًا في المستوى الأعلى، يستخرج المقدمة (المحدد أو كلمة القاعدة @) ويعالج جسم الكتلة عوديًا — والذي قد يحتوي هو نفسه على قواعد متداخلة (@media و@supports وتداخل CSS الأصلي) تُعالج في عمق عودي أكبر.
3
ترتيب الخصائص والإزاحة
تُجمع التعريفات داخل كل كتلة في مجموعة، ثم تُرتَّب اختياريًا أبجديًا حسب اسم الخاصية قبل كتابتها بعرض الإزاحة المختار (2 أو 4 مسافات). ويتخطى وضع التصغير المسافات البيضاء كليًا ويزيل التعليقات.
4
إخراج فوري داخل المتصفح
تظهر النتائج أثناء الكتابة عبر خطاف useMemo — لا يُرسل أي شيء إلى أي مكان. يمكن نسخ CSS المنسّق أو المصغّر إلى الحافظة أو تنزيله كملف .css، وتعرض اللوحة فرق الحجم مقارنة بالأصل.