CSS Academy · درس

Autoprefixer وcssnano

أضف بادئات المورّدين تلقائيًا باستخدام Autoprefixer، وصغّر مخرجات CSS باستخدام cssnano.

Autoprefixer وcssnano درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هو Autoprefixer؟

إن Autoprefixer إضافة لـ PostCSS تضيف تلقائيًا بادئات المورّدين (-webkit- و-moz- و-ms-) إلى خصائص CSS استنادًا إلى المتصفحات التي تحتاج إلى دعمها، وذلك باستخدام بيانات من Can I Use.

آلية عمل Autoprefixer

تكتب CSS قياسيًا من دون بادئات. يقرأ Autoprefixer إعدادات Browserslist ويضيف البادئات المطلوبة للمتصفحات المستهدفة أثناء عملية البناء.

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

إعداد Browserslist

يستخدم Autoprefixer أداة Browserslist لتحديد المتصفحات المستهدفة. حدّد الإعداد في .browserslistrc أو package.json:

# .browserslistrc
> 1%
last 2 versions
not dead

يحتاج CSS الحديث إلى عدد قليل من البادئات

اعتبارًا من عام 2024، لا يحتاج معظم CSS الحديث، مثل Grid وFlexbox والخصائص المخصّصة والتحويلات، إلى بادئات أو يحتاج إلى عدد قليل منها. يكون Autoprefixer مفيدًا بالدرجة الأكبر للخصائص الحديثة جدًا مثل appearance وuser-select وواجهات API الأحدث.

إضافة Autoprefixer إلى PostCSS

ضمّن autoprefixer في إعداد PostCSS:

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

ما هو cssnano؟

إن cssnano إضافة لـ PostCSS تصغّر CSS من خلال إزالة المسافات البيضاء والتعليقات والتصريحات الزائدة، وتطبيق تحسينات آمنة، لإنتاج أصغر ملف CSS ممكن.

الإعدادات المسبقة لـ cssnano

يوفّر cssnano إعدادات مسبقة للتحسين:

default: تصغيرات آمنة، مثل إزالة المسافات البيضاء والتعليقات والتكرارات
advanced: تحسينات قوية قد تغيّر درجة التخصيص، لذا استخدمها بحذر

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

ما الذي يفعله cssnano؟

تشمل تحسينات cssnano ما يلي:

إزالة المسافات البيضاء والتعليقات
تحويل الألوان إلى أقصر صيغة (#ffffff → #fff)
دمج القواعد المتطابقة
إزالة الخصائص الزائدة
اختصار القيم الصفرية (0px → 0)

دمج الإضافتين في الإعدادات

إعداد PostCSS للإنتاج مع الإضافتين معًا:

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

خرائط المصدر مع التصغير

أنشئ دائمًا خرائط مصدر عند استخدام cssnano في عمليات البناء الخاصة بالتطوير. فهي تربط الناتج المصغّر بملف CSS المصدر لتسهيل تصحيح الأخطاء في أدوات المطوّرين.

بدائل cssnano

تشمل أدوات تصغير CSS الأخرى: clean-css وlightningcss، وهي أداة سريعة جدًا مبنية على Rust، وأدوات التصغير المضمّنة في أدوات البناء، مثل أداة تصغير CSS الداخلية في Vite، التي تستخدم esbuild.

تحقق سريع

ما الذي يحدّد بادئات المورّدين التي يضيفها Autoprefixer إلى CSS؟

مراجعة

يضيف Autoprefixer بادئات المورّدين تلقائيًا استنادًا إلى المتصفحات المستهدفة في Browserslist، مما يلغي الحاجة إلى كتابة البادئات يدويًا. ويصغّر cssnano CSS من خلال إزالة المسافات البيضاء والتعليقات وتطبيق تحسينات آمنة. استخدمهما معًا في مسارات PostCSS الخاصة بالإنتاج. يحتاج CSS الحديث إلى بادئات أقل من السابق — لذا تحقّق من المتصفحات التي تستهدفها فعليًا.

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

هل درس «Autoprefixer وcssnano» مجاني؟

نعم — نص درس «Autoprefixer وcssnano» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Autoprefixer وcssnano»؟

أضف بادئات المورّدين تلقائيًا باستخدام Autoprefixer، وصغّر مخرجات CSS باستخدام cssnano. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «Autoprefixer وcssnano»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy