الرئيسية / أدوات المطورين / مصغر CSS

مصغر CSS

صغر شيفرة CSS لتقليل حجم الملف، أو جملها لسهولة القراءة. مجاني.

كيفية الاستخدام

  1. الصق شيفرة CSS في مربع الإدخال — أو ارفع ملف .css مباشرة.
  2. بدّل الخيارات: إزالة التعليقات وحذف المسافات غير الضرورية وتقصير رموز الألوان إن أردت أقصى ضغط.
  3. انقر على «تصغير CSS» وراقب تقلص المخرجات — تعرض الأداة الحجم الأصلي مقابل المصغّر والنسبة المئوية الموفرة.
  4. انسخ CSS المصغّرة أو نزّلها، ثم اربطها في HTML بدلًا من الأصلية.

الأسئلة الشائعة

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

نعم — كل أداة على هذا الموقع مجانية 100% دون حدود ودون تسجيل ودون علامات مائية.

هل بياناتي خاصة؟

بالتأكيد. تتم كل المعالجة محليًا في متصفحك. لا تُرفع ملفاتك أبدًا إلى أي خادم.

ماذا يزيل التصغير فعلًا؟

يزيل التصغير كل ما لا يحتاجه المتصفح: التعليقات والمسافات وفواصل الأسطر والفواصل المنقوطة الزائدة والوحدات المتكررة (0px تصبح 0). ويمكنه أيضًا تقصير ألوان الست عشري (#ffffff تصبح #fff) ودمج القواعد المكررة. تُعرض أنماطك بشكل مطابق — فقط الملف يصغر.

كم سيصغر ملف CSS؟

عادة 20–40% لـ CSS المكتوبة يدويًا ذات التعليقات والتنسيق السخي. ويمكن أن تتقلص أوراق الأنماط ذات التعليقات الكثيرة أو المتباعدة بنسبة 50% أو أكثر. وتعرض الأداة وفوراتك الدقيقة حتى تستطيع التحقق.

هل CSS المصغّرة ما زالت قابلة للتحرير؟

تقنيًا نعم، وعمليًا لا — فهي تصبح سطرًا واحدًا طويلًا غير مقروء. احتفظ دائمًا بملف المصدر الأصلي وعامل النسخة المصغّرة كمنتج بناء. حرّر المصدر، وأعد التصغير، وأعد النشر.

التصغير مقابل gzip — هل أحتاج إلى كليهما؟

نعم، فهما يتراكمان. التصغير يزيل الأحرف غير الضرورية؛ وضغط gzip/Brotli (الذي يقوم به خادمك) يضغط ما تبقى. ويقطعان معًا حجم نقل CSS عادة بنسبة 70–85%. صغّر أولًا، ثم دع الخادم يضغط.

الدليل الكامل لتصغير CSS

كل كيلوبايت من CSS يؤخر أول رسم لصفحتك — وأوراق الأنماط غير المصغّرة تُشحن بتعليقات ومسافات بادئة ومسافات موجودة للبشر فقط. يحذف التصغير كل ذلك في أجزاء من الثانية، مجانًا، دون أي تغيير مرئي. يشرح هذا الدليل ما يحدث خلف الكواليس، وكيف يناسب التصغير استراتيجية الأداء، والأخطاء التي يجب تجنبها.

ما يغيّره التصغير (وما لا يغيّره)

التصغير تحويل آمن وميكانيكي: يزيل التعليقات ويدمج المسافات ويحذف آخر فاصلة منقوطة في كل كتلة قواعد ويجرّد الوحدات من القيم الصفرية ويقصّر الألوان وقد يدمج المحددات المتطابقة المجاورة. وهو لا يعيد ترتيب القواعد أبدًا بطرق تغيّر التتالي، ولا يعيد تسمية فئاتك أبدًا، ولا يغيّر بكسلًا واحدًا معروضًا. وإذا بدت CSS المصغّرة مختلفة في المتصفح، فالمصغّر فيه خطأ — أو أن CSS الأصلية اعتمدت على شيء هش مثل فاصلة منقوطة مفقودة كان التنسيق يخفيها.

أين يناسب التصغير أداء الويب

CSS تحجب العرض: المتصفحات لن ترسم المحتوى حتى تنزّل أوراق الأنماط وتحلّلها. وعلى اتصال جوال بطيء، قد تكلف ورقة أنماط غير مصغّرة بحجم 200 كيلوبايت ثانية كاملة. ويوفّر التصغير عادة 20–40%، ومع ضغط Brotli يصل التخفيض الإجمالي إلى 70–85%. وهو من أعلى التحسينات عائدًا في تطوير الويب لأنه مؤتمت بالكامل — أعدّه مرة واحدة في بنائك وانسَه. ومن مكاسب أداء CSS الأخرى التي تقرن به: إزالة CSS غير المستخدمة وتقسيم CSS الحرجة فوق الطية مضمّنة وتأجيل أوراق الأنماط غير الحرجة.

التصغير مقابل الطباعة الجميلة مقابل خرائط المصدر

يجب أن يحتفظ سير عملك بثلاثة منتجات: المصدر (مقروء ومعلّق وتحت إدارة الإصدارات) والبناء المصغّر (ما ينزّله المستخدمون) واختياريًا خريطة مصدر (.css.map) تتيح لأدوات مطوري المتصفح إظهار المصدر الأصلي أثناء تصحيح الملف المصغّر. تنتج هذه الأداة المخرج المصغّر؛ وللمشاريع المستمرة، ادمج التصغير في بنائك (Vite وwebpack وPostCSS كلها تفعله بإضافة واحدة) بدلًا من التصغير يدويًا عند كل نشر.

أخطاء شائعة

الحيل والمرشحات: حيل IE القديمة قد تربك المصغّرات الساذجة — اختبر في المتصفحات المستهدفة. التعليقات المهمة: ترويسات الترخيص (مثل /*! ... */) تُحفظ عرفًا؛ تحقق من أن مصغّرك يحتفظ بها إن كان مطلوبًا قانونيًا. مجموعة الأحرف: إذا احتوت CSS على أحرف غير ASCII (سلاسل محتوى وأسماء خطوط)، تأكد من بقاء إعلان @charset "UTF-8" كأول بايتات على الإطلاق. لا تصغّر مرتين — فهو متساوق لكن بلا جدوى، والمعالجة المزدوجة تشوّه أحيانًا الحالات الحدّية.

ملاحظة خصوصية

قد تحتوي أوراق أنماطك على أسماء فئات كاشفة أو تعليقات عن ميزات غير معلنة. التصغير هنا يعمل 100% في متصفحك — فشيفرتك لا تلمس خادمًا أبدًا.

دليل خطوة بخطوة: جديد على هذه الأداة؟ اقرأ الدليل الكامل لتصغير CSS عبر الإنترنت — مع أمثلة عملية.