استخدام Baseline مع Browserslist

Tony Conway

Jeremy Wagner

تاريخ النشر: 7 مايو 2025، تاريخ آخر تعديل: 17 سبتمبر 2025

Browserslist هي إحدى الأدوات الأكثر شيوعًا لضبط الحد الأدنى لإصدارات المتصفحات المتوافقة في قواعد رموز الواجهة الأمامية. يضيف المطوّرون طلب بحث browserslist إلى ملف package.json (أو نقطة إعداد أخرى في Browserslist، مثل ملف .browserslistrc)، وتعرِض Browserslist قائمة بالمتصفّحات التي يمكن استخدامها كحدّ أدنى. يمكن استخدام Browserslist مع مجموعة كبيرة من أدوات التدقيق والتعبئة والتغليف الشائعة، بما في ذلك:

• Autoprefixer
• ‫Babel باستخدام @babel/preset-env
• PostCSS باستخدام postcss-preset-env
• ESLint باستخدام eslint-plugin-compat
• ‫Stylelint باستخدام stylelint-no-unsupported-browser-features
• webpack

الاستهدافات الأساسية

عندما تقرّر استخدام Baseline، عليك مراعاة قاعدة المستخدمين وتحديد مجموعة ميزات Baseline التي تريد استهدافها:

• يتضمّن Baseline Widely available جميع ميزات الويب التي كانت مجموعة المتصفّحات الأساسية Baseline الأساسية توفّرها بالكامل قبل 30 شهرًا أو أكثر.
• تتضمّن مجموعات ميزات السنة الأساسية، مثل السنة الأساسية 2020، جميع الميزات التي كانت متاحة حديثًا في نهاية السنة المحدّدة.

استنادًا إلى قاعدة المستخدمين، قد تتمكّن من استهداف Baseline Widely available، أو قد تحتاج إلى استهداف سنة Baseline أقدم. راجِع الإحصاءات أو أدوات مراقبة تجربة المستخدم الحقيقية (RUM) لمعرفة إصدارات المتصفحات التي يستخدمها جمهورك.

كيفية استهداف "الخطة الأساسية" أو "الخطة الأساسية الجديدة" أو "الخطة الأساسية المتاحة على نطاق واسع"

تتوفّر ميزة Baseline في Browserslist من خلال بعض طلبات البحث المختلفة. إذا كنت تريد استهداف متصفّحات Baseline Newly available، جرِّب تحديد baseline newly available في إعدادات Browserslist:

{
  ...
  "browserslist": [
    "baseline newly available"
   ]
  ...
}

يمكنك أيضًا تحديد baseline widely available كطلب بحث:

{
  ...
  "browserslist": [
    "baseline widely available"
   ]
  ...
}

كيفية استهداف سنوات "خط الأساس"

إذا كنت تريد استهداف مجموعة ميزات سنة الأساس، عليك تحديد السنة في طلب بحث، مثل baseline 2024 إذا كنت تريد استهداف مجموعة ميزات 2024:

"browserslist": "baseline 2024"

يمكنك تحديد سنوات من baseline 2015 إلى السنة الحالية.

كيفية تحديد المتصفّحات التابعة

تتضمّن مجموعة المتصفّحات الأساسية Baseline كلاً من Chrome وEdge وFirefox وSafari. تستند المتصفّحات الأخرى إلى رمز المصدر المفتوح نفسه الذي يستند إليه Chrome وEdge، وهو Chromium، ومن المفترض أن تتوافق مع مجموعة الميزات نفسها التي يتضمّنها أي إصدار من Chromium يتم استخدامه. لتضمين هذه المتصفّحات في إعدادات Baseline، أضِف with downstream بعد طلب بحث Baseline. على سبيل المثال، لاستهداف المتصفّحات ذات الإصدارات الأقدم كجزء من Baseline Widely available، حدِّد baseline widely available with downstream:

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream هو استعلام صالح آخر، كما هو الحال عند إضافة with downstream إلى الأهداف السنوية:

"browserslist": "baseline 2024 with downstream"

أمثلة على طلبات البحث الأساسية أثناء التنفيذ

في أدوات الحزم

يمكن أن يكون لاستخدام طلبات Baseline التي يوفّرها Browserslist في مشروعك تأثير فوري. ‫Babel هي أداة إنشاء شائعة لتجميع حِزم JavaScript. في حال استخدام الإعدادات التلقائية لحزمة @babel/preset-env، سيتم استبدال العديد من واجهات برمجة التطبيقات وطُرق JavaScript الحديثة بالصيغة الأكثر تفصيلاً التي تتطلّبها المتصفّحات القديمة:

ومع ذلك، يؤدي استخدام طلب بحث baseline 2020 لاستهداف مجموعة ميزات 2020 في مثال المشروع نفسه إلى تقليل حجم الناتج من JavaScript بشكل كبير، لأنّه لا يلزم إجراء سوى عدد قليل من عمليات تحويل التركيب:

يمكنك تجربة ذلك بنفسك باستخدام رمز المثال في مستودع baseline-demos ضمن Google Chrome Labs.

في أدوات التدقيق

تعمل بعض أدوات التدقيق اللغوي حاليًا مع Browserslist، أو يمكن إعدادها للعمل مع Browserslist باستخدام وحدة توافق. على سبيل المثال، يمكن أن يستهلك stylelint إعدادات browserslist باستخدام الوحدة stylelint-browser-compat. اضبط ملف stylelint.config.js لاستخدام طلب البحث الأساسي الذي تختاره:

module.exports = {
  plugins: ['stylelint-browser-compat'],
  rules: {
    'plugin/browser-compat': [
      true,
      {
        browserslist: ['baseline widely available'],
      },
    ],
  },
};

سيحدّد Stylelint الآن رموز CSS التي لا تشكّل حاليًا جزءًا من Baseline Widely available:

توفّر Stylelint أيضًا مكوّنًا إضافيًا يتيح لك ضبط قواعد Baseline مباشرةً، ولكن إذا كنت تستخدم Browserslist حاليًا للتعامل مع الإعدادات، سيكون استخدام طلبات البحث المضمّنة في Baseline التي يوفّرها Browserslist حلاً مناسبًا.