الأدوات · CSS · مصغّر ومنسّق CSS
مصغّر ومنسّق CSS
صغّر أو نسّق كود CSS، حيًا أثناء اللصق، بالكامل داخل متصفحك.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
الصق كود CSS الخاص بك، أو ابدأ من العيّنة الموجودة في الصندوق.
اختر تصغير أو تنسيق، وحجم مسافة بادئة لوضع التنسيق.
انسخ النتيجة.
أسئلة شائعة
لا. التصغير والتنسيق كلاهما يعملان بالكامل داخل متصفحك.
لا. هذا مجزّئ حقيقي، وليس تعبيرًا نمطيًا يزيل الفراغات - يتتبّع حدود التعليقات والنصوص ودالة url()، وينسخ محتواها كما هو، بما في ذلك الفراغات. content: "a b" وurl("x?a=1 b=2") يخرجان تمامًا كما كتبتهما.
تُعرض النسبة حيًا كرقم حقيقي، مُحسوب من حجم مدخلك ومخرجك الفعليين بالبايت - وليست ادّعاءً ثابتًا. يعتمد ذلك على كمية الفراغات وعدد التعليقات في الأصل.
ما زالت الأداة تنتج أفضل نتيجة ممكنة، مع ملاحظة واضحة بأن الأقواس بدت غير متوازنة - دون أن ترمي خطأ أو ترفض العمل.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why Minify CSS, and Why a Whitespace Regex Is the Wrong Way to Do It
Minifying CSS removes bytes a browser has to wait for before it paints anything. Doing it with a find-and-replace on whitespace is how valid CSS turns into a stylesheet the browser silently ignores.
اقرأ الدليلHow to Minify CSS Without Breaking It
Paste a stylesheet, keep the mode on Minify, and copy the result. This walks through what the tool removes, the two options that keep things, and how to read the byte counts it shows.
اقرأ الدليلHow to Beautify Minified CSS So You Can Debug It
A production stylesheet is one long line. Beautify mode turns it back into one declaration per line so you can find the rule that is overriding yours. It cannot bring back comments that were already removed.
اقرأ الدليل
التعليقات