مصغر CSS

مصغر CSS أداة مجانية تزيل المحارف غير الضرورية من CSS، ثم تعرض ورقة الأنماط المصغرة مع عدد المحارف قبل التصغير وبعده.

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

يقلل تصغير CSS عدد المحارف في ورقة الأنماط عبر حذف التنسيقات التي لا تحتاج إليها المتصفحات. ويشمل ذلك عادة المسافات البادئة وفواصل الأسطر والتعليقات والمسافات الاختيارية حول علامات الترقيم.

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

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

كيف أستخدم مصغر CSS؟

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

1. ابدأ بملف CSS المصدري الذي يستخدمه موقعك أو تطبيقك.
2. تأكد من تحليله تحليلا صحيحا قبل تصغيره.
3. الصقه في حقل CSS وشغل الأداة.
4. قارن محارف CSS مع محارف CSS المصغر.
5. اختبر النتيجة على صفحة تجريبية، بما يشمل حالات التصميم المتجاوب وأنماط الطباعة والمكونات التفاعلية.

يجري تصغير CSS على الخادم. ينتقل ملف CSS الذي ترسله إلى الخادم عبر HTTPS ولا يتم تخزينه. إذا كانت ورقة الأنماط تتضمن عناوين URL سرية أو أسماء مضيفين داخلية أو مواد حساسة أخرى، فتحقق مما إذا كان إرسالها إلى أي أداة تعمل على الخادم يتوافق مع سياسة معالجة البيانات في مؤسستك.

كيف أقرأ النتيجة؟

تتضمن النتيجة ملف CSS بعد تحويله وعددين للمحارف، كي تتمكن من فحص المخرجات ورؤية مقدار الانخفاض مباشرة. يشير محارف CSS إلى طول النص المرسل، بينما يشير محارف CSS المصغر إلى طوله بعد التصغير.

تمثل هذه الأرقام أعداد المحارف المحسوبة بدالة تراعي المحارف متعددة البايتات. لذلك لا تتعامل معها على أنها توقع دقيق لحجم البيانات المنقولة عبر الشبكة. فقد يشغل محرف UTF-8 أكثر من بايت واحد، كما قد يؤدي ضغط Brotli أو gzip إلى تغيير كبير في الحجم المرسل عبر HTTP.

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

أمثلة بسيطة على تصغير CSS

تزيل النسخة المصغرة المعتادة التنسيقات مع الاحتفاظ بالقاعدة نفسها.

CSS

p { color: red; }

CSS المصغر

p{color:red}

في هذا المثال، يحتوي الإدخال القابل للقراءة على ١٧ محرفا، بينما تحتوي الصيغة المصغرة على ١٢ محرفا. ويجب أن تظل المسافات وعلامات الترقيم داخل السلاسل النصية المقتبسة جزءا من القيمة.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

CSS المصغر

.notice,.warning{color:#c00;margin:0 1rem}

ليس من الآمن حذف كل المسافات دون تمييز. فقد تمثل المسافة عامل دمج للمحددات التابعة، كما تخضع العوامل الحسابية في دوال مثل calc() لمتطلبات خاصة بالمسافات. كذلك تحتاج السلاسل النصية وعناوين URL للبيانات والمعرفات المسبوقة بمحارف هروب وقيم الخصائص المخصصة إلى معالجة تراعي بنية CSS.

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

متى لا يستحق تصغير CSS العناء؟

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

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

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

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

هل يغير تصغير CSS أولوية المحددات؟

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

هل يمكنني تصغير خصائص CSS المخصصة؟

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

هل تنشئ الأداة خريطة مصدر؟

لا تعرض الأداة نتيجة لخريطة مصدر. إذا كان تصحيح أخطاء بيئة الإنتاج يتطلب ربط CSS المصغر بملف Sass أو Less أو مصدر آخر، فأنشئ الملف المصغر وخريطة مصدره داخل المترجم أو أداة التجميع التي تعرف البنية الأصلية للملف.

هل تبقى تعليقات الترخيص في المخرجات؟

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

هل يمكن للتصغير إصلاح CSS المعطل؟

لا. يزيل التصغير المحارف غير الضرورية، لكنه لا يصلح محددا غير صالح أو خاصية غير مدعومة أو ملفا مفقودا أو تتابعا غير صحيح. عالج تحذيرات التحليل والمشكلات المرئية في المصدر أولا.

فحوصات ما قبل النشر

احفظ المخرجات المصغرة كملف إنتاج منفصل، وتأكد من سلامة عناوين URL والمحتوى المقتبس، ثم حمله على صفحة تجريبية مع إبقاء وحدة تحكم المتصفح مفتوحة. قارن صفحات ممثلة بأحجام عرض ضيقة وواسعة، ثم تأكد من أن خادمك يطبق نوع المحتوى وسياسة التخزين المؤقت وضغط HTTP المتوقعة.