تاریخ انتشار: 7 می 2025، آخرین به روز رسانی: 17 سپتامبر 2025
فهرست مرورگرها یکی از محبوب‌ترین ابزارها برای پیکربندی حداقل نسخه‌های مرورگر پشتیبانی‌شده در پایگاه‌های کد جلویی است. توسعه دهندگان یک جستجوی browserslist را به فایل package.json خود (یا سایر نقاط پیکربندی فهرست مرورگرها، مانند فایل .browserslistrc ) اضافه می کنند و فهرست مرورگرها لیستی از حداقل مرورگرهای پشتیبانی شده را نشان می دهد. فهرست مرورگرها را می‌توان با طیف گسترده‌ای از ابزارهای پرطرفدار پرکننده، پرکننده و بسته‌بندی استفاده کرد، از جمله:
- پیشوند خودکار
- Babel با استفاده از
@babel/preset-env - PostCSS با استفاده از
postcss-preset-env - ESLint با استفاده از
eslint-plugin-compat - Stylint با استفاده از
stylelint-no-unsupported-browser-features - بسته وب
اهداف پایه
هنگامی که تصمیم به استفاده از Baseline دارید، باید پایگاه کاربری خود را در نظر بگیرید و تصمیم بگیرید که کدام مجموعه ویژگی Baseline را می‌خواهید هدف قرار دهید:
- Baseline Widely available شامل تمام ویژگی های وب است که 30 ماه یا بیشتر در گذشته توسط مرورگر اصلی Baseline به طور کامل پشتیبانی می شد.
- مجموعه ویژگی‌های سال پایه، به عنوان مثال ، Baseline 2020 ، شامل همه ویژگی‌هایی است که به تازگی در پایان سال مشخص شده در دسترس بودند.
بسته به پایگاه کاربر خود، ممکن است بتوانید خط پایه را به صورت گسترده در دسترس قرار دهید، یا ممکن است لازم باشد سال پایه قدیمی تری را هدف قرار دهید. با ابزارهای تجزیه و تحلیل یا RUM خود مشورت کنید تا متوجه شوید که کاربران شما کدام نسخه مرورگر را دارند.
چگونه خط پایه را به تازگی یا به طور گسترده در دسترس قرار دهیم
پشتیبانی از Baseline در فهرست مرورگرها از طریق چند پرس و جو مختلف ساخته شده است. اگر می‌خواهید مرورگرهای تازه در دسترس خط پایه را هدف قرار دهید، سعی کنید baseline newly available در پیکربندی فهرست مرورگرهای خود مشخص کنید:
{
...
"browserslist": [
"baseline newly available"
]
...
}
همچنین می‌توانید baseline widely available قرار دهید:
{
...
"browserslist": [
"baseline widely available"
]
...
}
نحوه هدف گذاری سال های پایه
اگر می‌خواهید مجموعه ویژگی‌های سال پایه را هدف قرار دهید، سال را در یک جستجو مشخص می‌کنید، مثلاً اگر می‌خواهید مجموعه ویژگی‌های ۲۰۲۴ را هدف قرار دهید، baseline 2024 مشخص کنید:
"browserslist": "baseline 2024"
می توانید سال ها را از baseline 2015 تا سال جاری مشخص کنید.
نحوه تعیین مرورگرهای پایین دست
مجموعه مرورگر اصلی Baseline شامل کروم، اج، فایرفاکس و سافاری است. سایر مرورگرها بر اساس همان کد منبع باز Chrome و Edge-Chromium- هستند و باید از همان مجموعه ویژگی‌هایی که هر نسخه از Chromium پیاده‌سازی می‌کنند پشتیبانی کنند. برای گنجاندن این مرورگرها در پیکربندی Baseline خود، پس از جستجوی Baseline، with downstream اضافه کنید. به عنوان مثال، برای هدف قرار دادن مرورگرهای پایین دستی به عنوان بخشی از 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 یک ابزار ساخت محبوب برای بسته بندی جاوا اسکریپت است. اگر از پیش‌فرض‌های بسته @babel/preset-env استفاده می‌کنید، بسیاری از APIها و متدهای جاوا اسکریپت مدرن با نحو پرمخاطب‌تر مورد نیاز مرورگرهای قدیمی جایگزین خواهند شد:
با این حال، استفاده از یک پرس و جو از baseline 2020 برای هدف قرار دادن مجموعه ویژگی های 2020 در همان پروژه نمونه، به طور چشمگیری اندازه خروجی این جاوا اسکریپت را کاهش می دهد، زیرا تبدیل های نحوی کمتری مورد نیاز است:
این را خودتان با استفاده از کد مثال موجود در مخزن آزمایشی پایه Google Chrome Labs امتحان کنید.
در لینتر
برخی از لینترها از قبل با فهرست مرورگرها کار می کنند یا می توان با استفاده از یک ماژول سازگاری با فهرست مرورگرها کار کرد. برای مثال، stylelint می‌تواند پیکربندی فهرست browserslist را با استفاده از ماژول stylelint-browser-compat مصرف کند. فایل stylelint.config.js خود را طوری تنظیم کنید که از کوئری Baseline مورد نظر شما استفاده کند:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Styelint اکنون CSS را که در حال حاضر بخشی از Baseline به طور گسترده در دسترس نیست، پرچم‌گذاری می‌کند:
Styelint همچنین افزونه‌ای را ارائه می‌کند که به شما امکان می‌دهد مستقیماً قوانین Baseline را تنظیم کنید، اما اگر قبلاً از فهرست مرورگرها برای مدیریت پیکربندی خود استفاده می‌کنید، استفاده از کوئری‌های Baseline داخلی که Browserslist ارائه می‌دهد یک راه‌حل مناسب است.