مصغِّر CSS ومنسِّقه مجانًا

كيف يعمل

تستخدم هذه الأداة مقطّع CSS مكتوبًا يدويًا دون أي تبعيات ومبنيًا بالكامل بـ JavaScript — لا مكتبات خارجية ولا استدعاءات خادم. يصنّف المقطّع كل حرف ككود أو تعليق أو سلسلة مقتبسة أو قيمة url() قبل تطبيق أي تحويلات، مما يمنع قواعد المسافات البيضاء من إفساد محتوى السلاسل أو روابط data URI أو تعبيرات calc().

1. 1
   مرحلة التقطيع

   يُمسح CSS المُدخل حرفًا حرفًا ويُقسم إلى رموز محددة النوع: مقاطع كود خام، وتعليقات /* ... */، وسلاسل مقتبسة (مع الحفاظ على تسلسلات الهروب)، وكتل url(...). وهذا يضمن أن التحويلات في الخطوة التالية تمس فقط صياغة CSS الفعلية — لا محتوى سلسلة حرفية أو data URI أبدًا.
2. 2
   التصغير أو التنسيق

   في وضع التصغير، تُحذف التعليقات العادية (وتُبقى تعليقات /*! license */)، وتُدمج تتابعات المسافات البيضاء في رموز الكود إلى مسافات مفردة، وتُزال المسافات المجاورة لعلامات الترقيم حول { } : ; , > ~. وتُترك المسافات حول + و- عمدًا لتجنب إفساد تعبيرات calc(). وفي وضع التنسيق، يُصغَّر الكود أولًا إلى خط أساس نظيف، ثم يُعاد تقطيعه وإزاحته بمسافتين مع تتبع العمق واكتشاف النقطتين في التصريحات لتمييز النقطتين في property: value عن النقطتين في المحددات مثل a:hover.
3. 3
   تقدير حجم Gzip

   بعد إنتاج الإخراج، تُستخدم واجهة CompressionStream الأصلية في المتصفح لضغط النتيجة بـ gzip وقياس عدد البايتات الناتج. وهذا يعطي تقديرًا واقعيًا لحجم النقل يطابق ما يرسله خادم ويب يستخدم ضغط gzip عبر الشبكة.
4. 4
   النسخ أو التنزيل

   يُكتب CSS المعالَج إلى الحافظة عبر Clipboard API، أو يُنزَّل كـ styles.min.css (وضع التصغير) أو styles.css (وضع التجميل) باستخدام Blob بنوع MIME text/css. وتُعرض نسبة تقليل الحجم مباشرة أثناء الكتابة.

أدوات ذات صلة