مُصغّر CSS
مُصغّر CSS هو أداة تقوم بتقليل حجم ملفات CSS عبر حذف التعليقات والمساحات الزائدة، ويعمل بالكامل داخل المتصفح دون رفع بياناتك إلى أي خادم خارجي.
مُصغّر CSS هو أداة تعتمد على تقنيات التلاعب النصي المباشر لتقليل حجم ملفات CSS بنسبة تتراوح بين 20% و40%، مما يسرع تحميل صفحات الويب. الأداة تعمل مباشرة في المتصفح باستخدام تعابير منتظمة (regex) بدون الحاجة لأي تحليل شجري (AST)، مما يحافظ على سرعة الأداء ويحمي خصوصيتك بعدم رفع الملفات إلى الإنترنت. يمكن دمج استخدام هذه الأداة مع Html Minifier لتقليل ملفات HTML وJs Minifier لتصغير جافا سكريبت، مما يعزز تحسين سرعة المواقع بشكل شامل.
كيفية استخدام مُصغّر CSS
- قم بلصق كود CSS الخاص بك في مربع الإدخال.
- انسخ الكود المصغّر الناتج لاستخدامه في مشروعك.
كيف يعمل مُصغّر CSS
تعتمد الأداة على معالجة نصية باستخدام تعابير منتظمة (regex) في جانب العميل. الخطوات الرئيسية تشمل:
- إزالة التعليقات المحصورة بين
/* */. - تقليص كل فراغات النص إلى فراغ واحد فقط.
- حذف المسافات حول المحددات، الأقواس، النقطتين، والفواصل المنقوطة.
- إزالة الفاصلة المنقوطة الأخيرة قبل القوس المعقوف
}.
هذه الطريقة لا تستخدم تحليل شجري (AST) مما يجعل الأداة سريعة وخالية من الاعتماديات الخارجية.
مثال عملي
/* بداية ملف CSS */
body {
margin: 0px;
padding: 10px; /* حشو داخلي */
}
h1 {
color: red;
font-size: 24px;
}
بعد التصغير:
body{margin:0px;padding:10px}h1{color:red;font-size:24px}متى تستخدم مُصغّر CSS
- ك مطور تريد تقليل حجم ملفات CSS لتسريع تحميل الموقع.
- كمصمم ترغب في تحسين أداء تصميماتك عبر تقليل البيانات المنقولة.
- كأخصائي SEO تحتاج لتقليل زمن استجابة الصفحة عبر تقليل حجم المصادر.
- كطالب تتعلم تحسين أكواد CSS من خلال رؤية الفرق بين الكود الأصلي والمصغّر.
لتحسين تجربة تطوير الويب، يمكن استخدام هذه الأداة مع Html Minifier أو Js Minifier، كما يمكن استخدام Unminify CSS لفك التصغير عند الحاجة لتحليل الكود.
الأسئلة الشائعة
كيف يحافظ مُصغّر CSS على خصوصيتي؟
تعمل الأداة بالكامل على جانب العميل داخل المتصفح باستخدام JavaScript، مما يعني أن ملفات CSS لا تُرفع إلى أي خوادم خارجية، وبالتالي تحافظ على خصوصيتك بشكل كامل.
هل يؤثر التصغير على أداء ملف CSS؟
التصغير يحذف الفراغات والتعليقات فقط ولا يغير من وظائف CSS، لذلك لا يؤثر على الأداء الوظيفي بل يحسّن سرعة تحميل الملف بسبب تقليل حجمه بنسبة 20-40%.
هل يستخدم مُصغّر CSS تحليل شجري (AST)؟
لا، الأداة تستخدم معالجة نصية تعتمد على تعابير منتظمة (regex) بدلاً من تحليل شجري، ما يجعلها أسرع وأخف وزناً بدون اعتماديات خارجية.
هل يمكنني استخدام الأداة مع ملفات CSS كبيرة الحجم؟
نعم، الأداة تعمل على ملفات CSS من أي حجم، ولكن نظرًا لأنها تعتمد على تعابير منتظمة في المتصفح، قد يستغرق التصغير وقتاً أطول مع الملفات الأكبر من عدة ميغابايت.
كيف أستعيد الكود الأصلي بعد التصغير؟
لإعادة تنسيق كود CSS المصغّر يمكن استخدام أداة Unminify CSS التي تعيد ترتيب الكود وتنسيقه لسهولة القراءة.