تخطي إلى المحتوى
🛠️
Whiz Tools

مصغر CSS المجاني: ضغط وتحسين كود CSS عبر الإنترنت

قم بتصغير كود CSS على الفور وتقليل حجم الملف بنسبة تصل إلى 40٪. مصغر CSS المجاني عبر الإنترنت يزيل المسافات البيضاء والتعليقات ويحسن بناء الجملة لتحسين أداء الموقع الإلكتروني.

مصغر CSS

قم بتصغير كود CSS على الفور لتقليل حجم الملف بنسبة تصل إلى 40٪ وتحسين سرعة تحميل الموقع.

0 حرف
0 حرف

حول تصغير CSS

يقوم تصغير CSS بإزالة الأحرف غير الضرورية من ملفات CSS دون تغيير الوظائف، مما يقلل حجم الملف ويحسن أداء الموقع.

  • يزيل التعليقات والمسافات البيضاء وفواصل الأسطر
  • يلغي فواصل الجمل والوحدات الصفرية غير الضرورية
  • يحسن قيم الألوان والتصريحات
  • يحسن سرعة تحميل الصفحة وترتيب محركات البحث
حاسبة التحميل...
📚

التوثيق

ما هو مُصغِّر CSS؟

مُصغِّر CSS هو أداة تُقلّص حجم ملف CSS (أوراق الأنماط المتتالية) بإزالة المحارف التي لا تحتاج إليها المتصفحات. فهو يزيل التعليقات والمسافات الزائدة وفواصل الأسطر، ويختصر بعض الأنماط الشائعة، من دون تغيير مظهر الصفحة. والنتيجة ملف أصغر يمكن للمتصفح تنزيله وتحليله بسرعة أكبر.

كيف يعمل تصغير CSS

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

تطبّق هذه الأداة التغييرات التالية:

  • إزالة التعليقات. يُحذف كل مقطع /* ... */.
  • دمج المسافات البيضاء. تُختزل سلاسل المسافات وعلامات الجدولة وفواصل الأسطر بين القواعد إلى لا شيء، أو إلى مسافة واحدة عندما تكون المسافة ذات دلالة، مثلًا بين .parent و.child في المحدد التنازلي.
  • إزالة المسافات البيضاء حول علامات الترقيم. تُزال المسافات المجاورة لـ { و} و: و; و,.
  • إزالة الفواصل المنقوطة الزائدة. تُدمج الفواصل المنقوطة المتكررة في فاصلة منقوطة واحدة، وتُحذف الفاصلة المنقوطة الأخيرة قبل } الختامية.
  • اختصار ألوان ستة عشرية. يصبح لون مؤلف من ست خانات مثل #ffffff هو #fff عندما تتطابق كل زوج من الخانات، أي الأحمر والأخضر والأزرق. ويُختصر اللون المؤلف من ثماني خانات مع قيمة ألفا، مثل #ffaa00cc، بالطريقة نفسها عندما تتطابق الأزواج الأربعة كلها.
  • إزالة الوحدة من القيم ذات الطول الصفري. تصبح 0px و0em و0rem هي 0. وتُترك القيم المئوية كما هي، لأن 0% لا تكون دائمًا قابلة للاستبدال بـ 0 المجرّدة، مثلًا في خطوة flex-basis أو @keyframes.
  • إزالة الصفر البادئ من الكسور العشرية. تصبح 0.5 هي .5.

لتجنب إفساد الملف، تُبقي الأداة ثلاثة أنواع من المحتوى دون تغيير: النص الموجود داخل علامات الاقتباس، والقيمة داخل url() غير المحاطة بعلامات اقتباس، ومحتويات الدوال الرياضية مثل calc() وclamp() وmin() وmax(). فالمسافات داخل calc(100% - 20px) مهمة للمتصفح، ولذلك تحافظ الأداة عليها تمامًا.

لا تدمج الأداة المحددات المكررة، ولا تحذف كتل القواعد الفارغة، ولا تحوّل ألوان rgb() إلى صيغة ست عشرية. وهذه تحسينات صحيحة تنفذها أدوات أخرى، لكن مُصغِّر CSS هذا يركّز على التغييرات المذكورة أعلاه.

معادلة نسبة التقليص

تعرض الأداة مقدار انخفاض حجم الملف كنسبة مئوية:

1reduction % = ((original length − minified length) / original length) × 100
2

يُقاس كلا الطولين بعدد المحارف. وتُقرَّب النتيجة إلى منزلتين عشريتين.

مثال محلول

CSS الأصلي (193 محرفًا):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

الناتج المصغَّر (129 محرفًا):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

بتطبيق المعادلة: (193 − 129) / 193 × 100 = 33.16%. اختفى التعليق، وكذلك المسافات البادئة وفواصل الأسطر، وأصبحت 0px هي 0، وأصبحت #ffffff/#000000 هي #fff/#000.

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

كيفية استخدام هذه الأداة

  1. الصق شيفرة CSS في مربع الإدخال على اليسار.
  2. يظهر الإصدار المصغَّر تلقائيًا على اليمين، من دون الحاجة إلى الضغط على زر.
  3. تحقّق من نسبة التقليص المعروضة أعلى الناتج.
  4. اختر "نسخ إلى الحافظة" لنسخ CSS المصغَّر، ثم الصقه في ملف المشروع.
  5. اختر "مسح" لمحو محتوى المربعين والبدء من جديد.

لا يُرسَل أي شيء يُكتب في الأداة إلى خادم؛ إذ يجري التصغير في المتصفح.

متى يُصغَّر CSS

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

  • المواقع الإلكترونية الكبيرة، مثل المتاجر عبر الإنترنت، حيث يعني صغر ورقة الأنماط تحميل الصفحة بسرعة أكبر.
  • تطبيقات الصفحة الواحدة المبنية بأطر مثل React أو Vue، حيث تُجمَّع CSS إلى جانب JavaScript.
  • صفحات الويب المخصصة للأجهزة المحمولة، حيث يُرجَّح أن يكون المستخدمون على اتصال أبطأ.
  • رسائل البريد الإلكتروني بصيغة HTML، التي غالبًا ما تفرض حدودًا صارمة على الحجم.

تصغير CSS وسرعة الصفحة

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

مُصغِّر CSS مقابل مُجمِّل CSS

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

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

إلى أي مدى ينخفض حجم CSS بعد تصغيره؟ باستخدام هذه الأداة، يتراوح الانخفاض عادةً بين 20% و40%، اعتمادًا على عدد التعليقات والأسطر الفارغة والمسافات البادئة الموجودة في الملف الأصلي. أما الملف الذي يحتوي منذ البداية على قدر قليل من التنسيق، فينخفض حجمه بدرجة أقل.

هل يغيّر تصغير CSS مظهر الصفحة؟ لا. يزيل التصغير فقط المحارف التي تتجاهلها المتصفحات، مثل التعليقات والمسافات البيضاء الزائدة، ويعيد كتابة بعض القيم المتكافئة، مثل تحويل #ffffff إلى #fff. ويظل مظهر الصفحة المعروض كما هو.

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

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

هل تحوّل هذه الأداة ألوان rgb() إلى صيغة ست عشرية، أو تدمج المحددات المكررة؟ لا. تختصر الألوان الست عشرية وتزيل المحارف غير الضرورية، لكنها لا تعيد كتابة قيم rgb()/hsl() ولا تدمج المحددات المتكررة. تنفذ بعض أدوات التصغير الأخرى هذه الخطوات الإضافية.

هل التصغير هو نفسه ضغط gzip؟ لا. يزيل التصغير المحارف غير اللازمة من الشيفرة المصدرية نفسها. أما ضغط Gzip (أو Brotli) فيطبقه خادم الويب عند إرسال الملف، باستخدام خوارزمية منفصلة. ويؤدي استخدام الطريقتين معًا إلى أصغر ملف عبر الشبكة.