كيفية تصغير CSS مجانًا عبر الإنترنت (دليل 2026)

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

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

التصغير يزيل كل ما في ورقة الأنماط مما وُجد للبشر لا للمتصفحات:

• التعليقات (/* ... */) — تُحذف.
• المسافات البيضاء غير الضرورية — المسافات البادئة وفواصل الأسطر والمسافات حول { } : ; , — تُطوى أو تُحذف.
• الحروف الزائدة — مثلًا الفاصلة المنقوطة الأخيرة قبل قوس الإغلاق.

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

خطوة بخطوة: صغّر CSS بأداتنا المجانية

أداة مصغر CSS لدينا تعمل بالكامل في متصفحك — دون تسجيل ودون رفع. إليك العملية:

1. افتح مصغر CSS. سترى مربع إدخال ("الصق CSS...") ومنطقة إخراج.
2. ألصق CSS الخاص بك في مربع الإدخال — ورقة أنماط كاملة أو مجرد مقتطف.
3. انقر على "تصغير CSS". تُزال التعليقات، وتُطوى المسافات البيضاء، ويظهر الناتج كـ CSS مدمج في سطر واحد.
4. انسخ النتيجة واستخدمها كورقة أنماط الإنتاج.

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

مثال قبل وبعد

تلصق CSS المقروء هذا:

/* Header styles */
.site-header {
  background: #ffffff;
  padding: 16px 24px;
}

.site-header a {
  color: #2563eb;
  text-decoration: none;
}

انقر على "تصغير CSS" وستحصل على:

.site-header{background:#ffffff;padding:16px 24px}.site-header a{color:#2563eb;text-decoration:none}

القواعد نفسها، والعرض نفسه — أقل بنحو الثلث من البايتات في هذا المثال الصغير. وفي ورقة أنماط كبيرة ذات تعليقات طويلة ومسافات بادئة سخية، تتراكم الوفورات.

حالات استخدام حقيقية

• أوراق أنماط الإنتاج: طوّر بـ CSS مقروء، وصغّره للنشر. كل زائر ينزّل الملف الأصغر.
• رسائل HTML: قوالب البريد غالبًا ما تضمّن CSS داخليًا؛ والتصغير يبقي حجم الرسالة الكلي منخفضًا.
• عروض الملف الواحد: عروض بأسلوب CodePen تبقى مدمجة وسهلة اللصق.
• فحص CSS من طرف ثالث: ألصق ورقة أنماط مكتبة مصغّرة وانقر على "تجميل CSS" لتقرأها فعلًا قبل تجاوز الأنماط.
• تجارب سريعة: صغّر مقتطفًا لاختبار ما إذا كانت القاعدة تتصرف بالطريقة نفسها مضغوطة (يُفترض ذلك).

قيود صريحة يجب أن تعرفها

هذا مصغّر مباشر يعتمد على التعابير المنتظمة — سريع ويمكن التنبؤ به، لكنه ليس محلل CSS كاملًا مثل الأدوات داخل خطوط بناء الاحترافية (clean-css وLightning CSS وesbuild). ملاحظات صريحة قليلة:

• احتفظ دائمًا بالأصل. CSS المصغّر للكتابة فقط؛ احتفظ بالنسخة المقروءة كمصدر الحقيقة وأعد توليد النسخة المصغّرة عندما تتغير.
• اختبر بعد التصغير. في الغالبية الساحقة من الحالات لا يتغير شيء بصريًا، لكن أعد تحميل الصفحة دائمًا وافحص التخطيطات الأساسية بعد نشر CSS المصغّر.
• التصغير ≠ التحسين. إزالة CSS الميت (القواعد غير المستخدمة) توفر أكثر بكثير من إزالة المسافات البيضاء. لتحقيق وفورات كبيرة، راجع ما يُستخدم فعلًا — تبويب Coverage في أدوات مطوري المتصفح يعرض CSS غير المستخدم لكل صفحة.
• Gzip/Brotli أهم. الخوادم تضغط النصوص باستخدام gzip أو Brotli، مما يقلّص CSS بشكل كبير أصلًا. التصغير ما زال مفيدًا (ملف أصغر = ملف مضغوط أصغر)، لكنه طبقة واحدة من مجموعة طبقات، لا المجموعة كلها.

نصيحة سير عمل: مصدر مقروء، وناتج مصغّر

النمط الاحترافي بسيط:

1. اكتب وحافظ على styles.css — مقروءًا ومعلّقًا عليه ومنظمًا.
2. عند النشر، ألصقه في مصغر CSS واحفظ الناتج باسم styles.min.css.
3. أشر إلى الملف المصغّر في HTML الخاص بك: <link rel="stylesheet" href="styles.min.css">.
4. لا تحرر الملف المصغّر مباشرة أبدًا — حرّر المصدر وأعد التصغير.

إذا تبنيت لاحقًا أداة بناء (Vite أو webpack أو esbuild)، فيمكنها تنفيذ هذه الخطوة تلقائيًا — لكن للمواقع الصغيرة والإصلاحات السريعة، الأداة عبر الإنترنت هي كل ما تحتاجه.

تصغير أم تجميل — دليل قرار سريع

• صغّر عندما: تنشر للإنتاج، أو تضمّن CSS في رسائل بريد أو ملفات HTML منفردة، أو تقلل حجم التنزيل.
• جمّل عندما: تقرأ ورقة أنماط مضغوطة لشخص آخر، أو تصحح مشكلة تنسيق في الإنتاج، أو تتعلم كيف يعمل CSS مكتبة ما.

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

هل مصغر CSS مجاني فعلًا؟

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

هل سيكسر التصغير CSS الخاص بي؟

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

هل يمكنني تصغير CSS يحتوي على حروف خاصة أو إيموجي في المحتوى؟

نعم. سلاسل المحتوى (مثل content: "→") محفوظة — فالمصغّر يزيل التعليقات فقط ويطوي المسافات البيضاء خارج المواضع ذات المعنى.

جرّبه الآن: مصغر CSS المجاني · مصغر JS · مرمز HTML