أداة تنسيق/تقليص CSS
أداة لتجميل وتصغير ملفات CSS عبر الإنترنت. تدعم أكثر من 15 خيارًا للضغط، وتبسيط الألوان، وتحسين القيم، ودمج المحددات، وتوحيد الخصائص، وتحميل الملفات. تتم جميع عمليات المعالجة محليًّا في متصفحك، ولا يتم تحميل أي بيانات إلى الخوادم.
أدخل كود CSS
نتيجة الإخراج
ما المقصود بتنسيق/تقليص حجم ملفات CSS؟
تنسيق CSS (CSS Beautification) refers to adding indentation, line breaks, and other formatting to compressed CSS code to restore readability. تقليص حجم ملفات CSS refers to removing unnecessary characters from CSS code that don't affect rendering, reducing file size.
مبادئ التنسيق
يقوم تنسيق CSS بتنفيذ العمليات التالية:
- فصل المُحدد — Each selector on its own line
- فصل الممتلكات — Each property on its own line with indentation
- التباعد — Supports 2 spaces, 4 spaces, or Tab indentation
- محاذاة الدعامة —
{after selector,}on its own line - الحفاظ على التعليقات — Optionally keep or remove comments
مبادئ التصغير
تؤدي عملية تقليص حجم ملفات CSS إلى إزالة العناصر التالية:
- مسافة بيضاء — Multiple consecutive spaces merged to one, or completely removed
- فواصل الأسطر — All line breaks removed, output as single line
- تعليقات CSS — All
/* تعليق */removed - الفاصلة المنقوطة الأخيرة —
اللون: أحمر؛}→{لون: أحمر} - قواعد فارغة — Empty selectors
{}removed - تبسيط الألوان —
أبيض→#fff - تبسيط الوحدات —
0px→0 - دمج المُحددات — Properties of same selectors combined
- دمج العقارات — Selectors with same properties combined
نتائج الضغط
Typically, CSS files can be reduced by 20%~40% after minification. Using "Extreme Minify" mode (with selector merging, property merging, etc.) can achieve even higher compression rates.
حالات الاستخدام الشائعة
- نشر الإنتاج — Minify CSS before deployment to improve page load speed
- تصحيح الأخطاء والصيانة — Format minified CSS for easier reading and modification
- توفير النطاق الترددي — Reduce server traffic and CDN costs
- تحسين محركات البحث (SEO) — Page load speed is a Google ranking factor
- مراجعة الكود — Formatted code is easier for team collaboration and review
الأوضاع المحددة مسبقًا
- التنسيق — Only format, add indentation and line breaks, no minification
- تصغير عادي — Remove comments and whitespace, keep line breaks
- تصغير كامل — Remove comments, whitespace, line breaks, single line output
- تقليص متطرف — Enable all compression options including selector merging, property merging, value simplification, etc. for smallest file size
الأسئلة الشائعة (FAQ)
هل يؤثر تقليص حجم ملفات CSS على وظائف الصفحة؟
لا. لا يؤدي تقليص حجم ملفات CSS إلا إلى إزالة الأحرف التي لا تؤثر على العرض (المسافات البيضاء، وفواصل الأسطر، والتعليقات)، دون تعديل المحددات وقيم الخصائص. ويعمل الكود المُقلص تمامًا مثل الكود الأصلي. ويُعد دمج المحددات ودمج الخصائص من عمليات التحسين الآمنة.
هل يمكن استعادة ملف CSS المُصغَّر؟
نعم. باستخدام ميزة «التنسيق» في هذه الأداة، يمكنك إعادة إضافة المسافات البادئة وفواصل الأسطر إلى كود CSS المُصغر المكون من سطر واحد لاستعادة سهولة القراءة. ومع ذلك، لا يمكن استعادة التعليقات المحذوفة، ولن يتم فصل المُحددات والخصائص المدمجة تلقائيًا.
هل يتم تحميل بياناتي على خادم؟
لا. تتم جميع العمليات محليًّا في متصفحك. ولا يتم تحميل كود CSS الخاص بك أبدًا إلى أي خادم، مما يضمن أمن البيانات وخصوصيتها.
ما الفرق بين دمج المُحددات ودمج الخصائص؟
Selector merging combines multiple rules with the same selector into one rule, e.g., .a{color:red}.a{font-size:12px} → .a{color:red;font-size:12px}. Property merging combines different selectors with the same property values, e.g., .a{color:red}.b{color:red} → .a,.b{color:red}.
ما هي نسبة الضغط المعتادة؟
عادةً ما تتراوح النسبة بين 20% و40%. ويكون معدل الضغط أعلى في الكود الذي يحتوي على تعليقات كثيرة، ومسافات بادئة عميقة، وخصائص مكررة. ويمكن تحقيق أقصى معدل ضغط باستخدام وضع «Extreme Minify»، لكن ذلك قد يؤثر على سهولة قراءة الكود وقابليته للصيانة.
هل يُعد تبسيط قيم الألوان آمنًا؟
Yes. Color value simplification only simplifies hex colors that can be shortened, such as أبيض → #fff, #aa0000 → #a00. Colors that cannot be simplified (like #abc123) remain unchanged. RGB/RGBA simplification converts rgba(255,0,0,1) to color names like red.