كيفية الاستخدام
- الصق كود CSS في صندوق الإدخال، أو افتح ملف .css، أو جرّب المثال.
- اختر تجميل للحصول على كود مقروء أو ضغط للحصول على أصغر ناتج.
- عند التجميل، اختر مسافتين أو 4 مسافات أو علامات تبويب.
- انسخ الناتج أو نزّله كملف .css. إذا كانت الأقواس أو علامات التنصيص غير متوازنة، يظهر الخطأ مع رقم السطر والعمود.
كيف تعمل الأداة
يقوم المنسق أولاً بتقسيم ورقة الأنماط إلى عناصر (tokens): السلاسل النصية بين علامتي اقتباس مفردة أو مزدوجة، وقيم url(…)، والتعليقات، والأقواس المعقوفة والفواصل المنقوطة. ولأن السلاسل النصية و url() تعتبر عنصرًا واحدًا، فإن الفاصلة المنقوطة داخل data URI أو القوس داخل content: "{ }" لا تسبب أي التباس في البنية، ويتم نسخ محتواها كما هو تمامًا.
يجعل وضع التجميل (Beautify) كل محدد في قائمة المحددات في سطر مستقل، ويضيف مسافات حول عوامل الدمج للعناصر الفرعية والأخوة والمجاورة (>، ~، +)، ويكتب كل تصريح على شكل “property: value;” في سطر مستقل. يتم إزاحة الكتل داخل @media و @supports و @layer و @container وتداخل CSS الأصلي بمستوى واحد لكل عمق. تتم إضافة الفاصلة المنقوطة الناقصة بعد آخر تصريح في الكتلة. تُترك التعليقات في أماكنها.
يقوم وضع التصغير (Minify) بإزالة التعليقات (باستثناء إشعارات الترخيص /*! … */)، ودمج المسافات البيضاء، وإزالة المسافات حول الأقواس المعقوفة والنقطتين والفاصلة المنقوطة والفواصل وعوامل دمج المحددات، وإسقاط الفاصلة المنقوطة قبل كل قوس إغلاق. يتم الاحتفاظ بالمسافات التي تغير المعنى: عامل الدمج للسليل في “.a .b”، والمسافة في “a :focus”، والمسافات داخل القيم مثل calc(100% - 2px). يتم تطبيع “! important” إلى “!important”.
لا تقوم الأداة بإعادة كتابة القيم: تُترك الألوان والوحدات والأصفار كما هي مكتوبة، ولا يتم دمج القواعد أو إعادة ترتيبها. ملفات SCSS أو Less ذات التداخل البسيط تعمل عادة، لكن بناء الجملة الخاص بها مثل // تعليقات السطر أو mixins غير مفهوم.
أمثلة
قراءة ملف إطار عمل مضغوط
الصق مقتطفًا من bootstrap.min.css في سطر واحد واختر Beautify مع مسافتين لرؤية كل قاعدة، واستعلامات الوسائط والقواعد المتداخلة الخاصة بها على أسطر منفصلة ومزاحة.
شحن ورقة أنماط مكتوبة يدويًا
قم بتصغير ورقة أنماط بحجم 12 كيلوبايت تحتوي على تعليقات وإزاحات قبل إضافتها بشكل مضمّن إلى قالب بريد إلكتروني أو رأس صفحة. يعرض الملخص عدد الأحرف قبل وبعد.
العثور على قوس مفقود
تتوقف ورقة الأنماط عن التطبيق في منتصف الطريق. يُبلغ المنسق عن “This { is never closed with a matching }” مع سطر القاعدة التي تفتقد قوس الإغلاق.
الأسئلة الشائعة
هل CSS المضغوط من هذه الأداة آمن للاستخدام في بيئة الإنتاج؟
إنها تزيل فقط التعليقات والمسافات البيضاء التي يتجاهلها CSS، لذا تعمل القواعد بالطريقة نفسها. وهي لا تقوم بالتحسينات الأعمق التي تقوم بها أدوات البناء مثل دمج القواعد أو اختصار الألوان، لذا قد يكون الناتج أكبر قليلًا من ناتجها.
لماذا تُبقى مسافة في «a :focus»؟
في المحدد، المسافة تعني علاقة سليل. «a :focus» تعني عنصرًا مركّزًا داخل رابط، بينما «a:focus» تعني رابطًا مركّزًا. حذف تلك المسافة سيغيّر العناصر المطابقة.
هل يمكنها تنسيق SCSS أو Less؟
تُنسَّق القواعد المتداخلة العادية بشكل صحيح. أما الصيغة الخاصة بالمعالجات المسبقة مثل تعليقات // والمزيجات (mixins) ذات الوسائط أو كتل @if فلا تُفهَم وقد تُنسَّق بشكل غير متوقع، لذا راجع الناتج.
هل تُحذَف تعليقات الترخيص عند الضغط؟
تُحفَظ التعليقات التي تبدأ بـ /*!، وهذا هو العرف المعتاد لإشعارات الترخيص وحقوق النشر. أما جميع التعليقات الأخرى فتُحذَف.
الخصوصية
تتم معالجة CSS الخاص بك في متصفحك فقط. لا يُرفَع أي شيء أو يُخزَّن أو يُدرَج في التحليلات.