تصغير أكواد CSS لتسريع الموقع
احذف التعليقات والمسافات الزائدة من CSS لتقليل حجم الملف فوراً.
ورقة أنماطك تبقى على جهازك
لا شيء يُحذف لاحقاً
آمن للواجهات غير المُطلَقة
يعمل في كل متصفح حديث
كيف تعمل
- 1
الصق CSS
ورقة أنماط أو أنماط مكوّن أو كتلة تريدها أصغر قبل الإطلاق.
- 2
افحص الأحجام
قارن المصغَّر والمضغوط، واقرأ أي تحذيرات قبل استبدال الأصل.
- 3
انسخ المخرجات
خذها إلى مخرجات بناء أو كتلة <style> أو قالب.
لماذا تستخدم هذه الأداة
ترتيب التصريحات محفوظ
لا شيء يُعاد ترتيبه، لأن التتالي يفصل التعادل بالموضع، ونقل قاعدة يغيّر ما يُصيَّر.
الاحتياطات تُترك سليمة
الخاصية المصرَّحة مرتين احتياطٌ مقصود للمتصفحات الأقدم عادةً، لا تكراراً يُحذف.
بلا دمج مختصرات غير آمن
طيّ الخصائص المطوّلة في مختصر يصفّر الجهات التي لم تذكرها، فلا يجري ذلك بصمت.
الحجم المضغوط معروض
الرقم المصغَّر إلى جانب رقم gzip، لأن الثاني وحده هو ما ينزّله المتصفح.
يُحلَّل حيث ينتمي
المتصفح محرّك CSS أصلاً، فلا حاجة إلى أي طلب، والملف يبقى في الصفحة ببساطة.
بلا حدود وبلا تسجيل
استخدمها على قاعدة واحدة أو على بناء إطار عمل كامل، بأي عدد من المرات.
الترتيب معنى، وهذا يحدّ ما يجوز للمصغِّر فعله بأمان
يحلّ CSS التصريحات المتنافسة بالأسبقية أولاً وبترتيب المستند ثانياً: فحين تتساوى قاعدتان في الوزن، تغلب المكتوبة لاحقاً. وهذا يجعل الموضع جزءاً من معنى ورقة الأنماط، ولهذا كان التحسين الجارف أخطر هنا منه في معظم اللغات. فأداةٌ تجمّع كل القواعد التي تتشارك منتقياً، أو ترتّب التصريحات لضغط أفضل، أو تدمج كتلتين تصادف أن تصرّحا بالخصائص نفسها، قد تنتج ملفاً أصغر بايتاً ببايت ومختلفاً بصرياً — لأن قاعدةً كانت تأتي أخيراً لم تعد كذلك. والتقليصات الآمنة دائماً هي التي لا تنقل شيئاً: إزالة المسافات، وإزالة التعليقات، وتقصير القيم التي معناها ثابت. أما كل ما يعيد الترتيب فيحتاج فهم تتاليك كله، وهو ما لا تفعله أداة على مستوى النصّ.
الخاصية مرتين احتياطٌ عادةً لا غلط
هذه هي الحالة بالذات التي يكسر فيها «احذف المكرَّر» صفحةً. فالتصريح بخاصية مرتين في الكتلة نفسها هو الطريقة القياسية لدعم المتصفحات الأقدم: color: #ccc يتبعها color: rgba(0, 0, 0, .5) تعني أن المتصفح الذي يفهم الثانية يستعملها والذي لا يفهمها يرتدّ إلى الأولى، لأن التصريح غير القابل للتحليل يُطرَح ولا يكون قاتلاً. والنمط نفسه يشمل display: -webkit-box قبل display: flex، وعرضاً بالبكسل قبل عرض calc()، ولوناً صلباً قبل تدرّج. فالمصغِّر الذي يرى تصريحين لخاصية واحدة ويحفظ الأخير وحده يكون أزال الدعم؛ والذي يحفظ الأول وحده يكون أزال الميزة. وكلاهما خطأ، والسلوك الصحيح ترك الزوج وشأنه.
دمج المطوّل في مختصر يصفّر ما لم تذكره
هذا أدقّ فخّ صحّة في تحسين CSS. فإن ضبطت قاعدةٌ margin-top وmargin-left، فطيّهما في تصريح margin واحد لا يترك الجهتين الأخريين كما كانتا — إذ المختصر يضبط كل خاصية في مجموعته، فتُصفَّر الجهات غير المذكورة إلى قيمها الابتدائية، ويُطرَح كل ما وُرِث أو ضبطته قاعدةٌ أسبق. وbackground أسوأ، لأنه يصفّر قائمة طويلة تشمل background-size وbackground-position، فقد يُلغي دمجٌ بصمت background-size: cover مصرَّحاً في موضع آخر. وfont يسلك المسلك نفسه مع line-height. والتوفير من هذه الدمجات صغير، والفشل تخطيطٌ يبدو سليماً في الملف وخاطئاً في المتصفح، ولهذا لا تُجريها هذه الأداة.
الفوز الكبير هو القواعد غير المستعملة، وهو أصعب مما يبدو
تصغير ورقة أنماط يقلّم خُمسها ربما. أما إزالة القواعد التي لا تستعملها الصفحة قط فقد تقلّم تسعين في المئة، لأن إطار عمل عامّ الغرض يطلق أنماطاً لكل مكوّن وكل صيغة بينما تستعمل صفحةٌ ما حفنةً. وهنا يقيم الحجم الحقيقيّ — وهو صعب فعلاً على نحو آمن، لسبب خاصّ بـCSS. فأداة التنقيح تعمل بمسح قوالبك وشفرتك عن أسماء الأصناف وإبقاء القواعد المطابقة. وهي لا تستطيع رؤية اسم صنف جُمِّع في زمن التشغيل، فـ"btn-" + variant لا تبدو شيئاً إطلاقاً، فتُحذف قاعدة btn-danger والشفرة التي تحتاجها ما تزال تعمل. وكل ما يُبنى ديناميكياً، أو تحقنه أداة طرف ثالث، أو يضيفه JavaScript بعد التحميل، عليه أن يُسرَد استثناءً، وتلك القائمة هي ما يجعل التنقيح مشروعاً لا مفتاحاً.
CSS يحجب التصيير، فحجمه يكلّف شيئاً مختلفاً
سبب أهمية الحجم ليس هو نفسه في CSS كما في السكربتات. فالمتصفح لا يرسم محتوىً قد تعيد ورقةُ أنماط معلَّقة تنسيقه، فورقة الأنماط في الترويسة حاجبةٌ للتصيير: وحتى تصل وتُحلَّل تبقى الصفحة بيضاء. وهذا يجعل ثمن وزن CSS يحطّ مباشرة على الرسم الأول، وهو الجزء الذي يلاحظه المستخدمون أكثر من التحميل، وهو أقوى حجة لإبقاء ورقة الأنماط الحرجة صغيرة. ويفسّر أيضاً لماذا كانت النصيحة القياسية تضمين القدر الصغير من CSS اللازم للمنطقة المرئية وتحميل الباقي لا تزامنياً — وهو تغيير بنيويّ يفيد أكثر بكثير من التصغير. فإن لم تستطع إلا شيئاً واحداً، فتقسيم ورقة الأنماط يتفوّق على ضغطها.
لماذا يهمّ التصغير المحلي في هذا النوع من الملفات
ورقة الأنماط أقلّ سرّيةً بديهياً من شفرة التطبيق، وهي تصف رغم ذلك أكثر مما ينتبه الناس. فأسماء الأصناف ترسم واجهتك: تسمّي مكوّنات لم تُطلَق، وصيغاً تخصّ تجربة ما تزال جارية، ولوحات لا يراها إلا المديرون، وميزات خلف راية. والتعليقات في CSS صريحة على نحو لا تكون به التعليقات في مواضع أخرى — اسم عميل، وملاحظة عن أي متصفح انكسر، وتذكير بأن قيمة حلٌّ بديل لخلل في إصدار بعينه. ولصق ورقة أنماط إنتاجية في مصغِّر مستضاف يسلّم ذلك كله مقابل تقليص حجم متاح محلياً. أما هذه الأداة فتعالج الملف في الصفحة ولا ترسل شيئاً، وهو ما يمكنك التحقق منه في تبويب الشبكة بأدوات المطوّر.
أخطاء شائعة يجب تجنّبها
- إزالة خاصية مصرَّحة مرتين في كتلة واحدة. ذلك احتياطٌ مقصود للمتصفحات الأقدم دائماً تقريباً — وإبقاء واحدة من الزوج يزيل الدعم أو الميزة.
- دمج الخصائص المطوّلة في مختصر. المختصر يضبط كل خاصية في مجموعته، فتُصفَّر الجهات التي لم تذكرها إلى قيمها الابتدائية بدل أن تُترك.
- ترك أداة تعيد ترتيب القواعد أو تجمّعها لضغط أفضل. التتالي يفصل التعادل بترتيب المستند، فقد يُصيَّر ملف أصغر تصييراً مختلفاً.
- توقّع أن يحلّ التصغير مشكلة حجم ورقة الأنماط. القواعد غير المستعملة هي الكتلة عادةً؛ والتصغير يقلّم نحو خُمس ما تقلّمه تمريرةُ إزالة CSS غير المستعمل.
- تنقيح CSS غير المستعمل دون سرد أسماء الأصناف الديناميكية. الاسم المجمَّع `"btn-" + variant` خفيّ على الماسح، فتُحذف القاعدة التي يحتاجها والشفرة ما تزال تعمل.
كيف تُقارن
| الجانب | هذه الأداة | مصغِّرات عبر الإنترنت | مسار بناء |
|---|---|---|---|
| إرسال ورقة الأنماط إلى خادم | لا يحدث أبداً | غالباً نعم | لا |
| يحفظ ترتيب التصريحات | دائماً | غالباً | غالباً |
| يبقي احتياطات المتصفحات | نعم | متفاوت | قابل للضبط |
| يزيل القواعد غير المستعملة | لا | لا | بخطوة تنقيح |
| الحجم المضغوط معروض | نعم | نادراً | بإضافة |
| السعر | مجاني | مجاني / باقات مدفوعة | مجاني |
المزايا
إزالة المسافات والتعليقات
كل ما يتجاهله المحلّل يُسقَط، بما فيه الأسطر الفارغة التي تجمّع قواعدك.
تقصير قيم آمن
الألوان تُردّ إلى أقصر صيغة مكافئة والوحدات الصفرية تُقلَّم، حيث لا يمكن أن يتغيّر المعنى.
آمن للترتيب بالتصميم
القواعد تحفظ مواضعها، فتبقى الأسبقية وترتيب المصدر يُحلّان على النحو نفسه.
الحجمان مُبلَّغان
الخام والمضغوط، لأن الضغط يطبق أصلاً معظم ما يزيله التصغير.
الصياغة الحديثة مفهومة
الخصائص المخصَّصة والتعشيش واستعلامات الحاويات والطبقات تمرّ دون تشويه.
يتحمّل أوراق الأنماط الكبيرة
بناء إطار عمل كامل يُصغَّر دون رفع ولا سقف حجم.
بلا تثبيت
بلا أداة بناء ولا بيئة تشغيل ولا اعتماديات — يعمل على صفحة الويب.
جاهز للعربية وRTL
واجهة كاملة بثماني لغات، منها العربية من اليمين إلى اليسار.
آمن افتراضياً
يُقدَّم عبر HTTPS، بلا تتبّع للمحتوى وبلا رفع إلى طرف ثالث.
من يستخدمها
مطوّرو الواجهات الأمامية
تقليص ورقة أنماط لا تمرّ بخطوة بناء.
مهندسو أداء الويب
تقليص ورقة الأنماط الحاجبة للتصيير التي تحكم الرسم الأول.
مطوّرو البريد
ضغط أنماط يجب تضمينها في قالب له حدّ حجم.
كل من يضمّن كتلة أنماط
إنزال أنماط مكوّن إلى حجم يسمح بتضمينه في ترويسة صفحة.
الأسئلة الشائعة
لا. كل شيء يعمل محلياً في متصفحك — نصّك لا يُرفع أو يُخزَّن أو يُشارَك أبداً.
نعم — مجاني تماماً، بلا حساب وبلا حدود.