دامج CSS
دمج ملفات CSS متعددة في ملف واحد
ملفات CSS المدخلة
CSS المدموج
أمثلة دمج CSS
دمج عدة كتل CSS في ملف واحد. استخدم التعليقات لفصل الأقسام:
إعادة التعيين والقاعدة والمكونات
يقوم الدامج بربط جميع الكتل. استخدم تحميل مثال أعلاه لتحميل المزيد من البيانات.
ما هو دامج CSS؟
مشاريع CSS في الغالب تقسم الأنماط إلى ملفات متعددة — إعادة التعيين والقاعدة والمكونات والأدوات. يدمج دامج CSS هذه في ملف واحد للإنتاج. عدد أقل من طلبات HTTP يعني أوقات تحميل أسرع. مواصفة W3C CSS تحدد اللغة؛ أدوات البناء مثل Vite وWebpack تفعل ذلك عند البناء. هذه الأداة تفعله عند الطلب في المتصفح.
الصق عدة كتل CSS أو ارفع ملفات .css متعددة. تقوم الأداة بربطها في مخرجات واحدة. تعمل بالكامل في المتصفح — لا يتم إرسال أي شيء إلى خادم. لتنسيق النتيجة استخدم منسق CSS. للضغط استخدم مضغط CSS.
كيفية استخدام هذه الأداة
لصق أو رفع CSS
الصق عدة كتل CSS في المحرر الأيسر (افصلها بتعليقات مثل /* filename.css */)، أو انقر رفع الملف لاختيار ملفات .css متعددة. استخدم تحميل مثال لتحميل بيانات نموذجية.
مراجعة المخرجات المدموجة
تعرض اللوحة اليمنى CSS المدموج. الترتيب محفوظ. للتحقق استخدم التحقق من CSS. لإضافة بادئات المورّد استخدم بادئات CSS.
نسخ أو تنزيل
استخدم نسخ أو تنزيل لحفظ CSS المدموج. لتحويل SCSS أو Less أولاً استخدم SCSS إلى CSS أو Less إلى CSS.
متى يفيد دمج CSS
المشاريع القديمة أو الصفحات المبنية يدوياً قد تحتوي على ملفات CSS متعددة. دمجها يقلل عدد الطلبات ويبسّط النشر. Bootstrap وTailwind يستخدمان خطوط أنابيب البناء؛ هذه الأداة توفر خياراً يدوياً سريعاً. لاستخراج CSS من HTML استخدم مستخرج CSS.
لتنسيق المخرجات المدموجة استخدم منسق CSS. للأنماط inline (مثلاً البريد الإلكتروني) استخدم CSS إلى Inline. للتحويل بين معالجات الأولية استخدم CSS إلى SCSS أو CSS إلى Less.
الأسئلة الشائعة
هل بياناتي خاصة؟
نعم. يتم الدمج بالكامل في المتصفح. لا يتم إرسال أي بيانات إلى أي خادم.
هل تُزال التكرارات؟
تقوم هذه الأداة بربط الملفات. لا تُزيل القواعد المكررة ولا تدمج المحددات. للتحسين المتقدم استخدم أدوات بناء مثل cssnano أو PostCSS.
ما حال @import؟
تربط الأداة النص كما هو. لا تحل روابط @import. ألصق المحتوى المستورد يدوياً عند الحاجة.
هل يمكنني رفع ملفات متعددة؟
نعم. استخدم زر رفع الملف واختر ملفات .css متعددة. تُدمج بالترتيب المختار.
هل يهم ترتيب الملفات؟
نعم. القواعد اللاحقة تُلغي السابقة عند تساوي الخصوصية. رتّب الملفات بالترتيب الذي تريد تطبيق التتالي به.