שימוש ב-Baseline עם Browserslist

Tony Conway

Jeremy Wagner

פורסם: 7 במאי 2025, עדכון אחרון: 17 בספטמבר 2025

‫Browserslist הוא אחד הכלים הפופולריים ביותר להגדרת גרסאות דפדפן מינימליות שנתמכות בבסיסי קוד של חזית האתר. המפתחים מוסיפים שאילתת browserslist לקובץ package.json (או לנקודת הגדרה אחרת של Browserslist, כמו קובץ .browserslistrc), ו-Browserslist חושף רשימה של דפדפנים נתמכים מינימליים. אפשר להשתמש ב-Browserslist עם מגוון רחב של כלים פופולריים ל-linting, ל-polyfill ול-packaging, כולל:

• Autoprefixer
• ‫Babel באמצעות @babel/preset-env
• ‫PostCSS באמצעות postcss-preset-env
• ‫ESLint באמצעות eslint-plugin-compat
• ‫Stylelint באמצעות stylelint-no-unsupported-browser-features
• webpack

יעדים בסיסיים

כשמחליטים להשתמש ב-Baseline, צריך להביא בחשבון את בסיס המשתמשים ולהחליט לאיזה סט תכונות של Baseline רוצים לטרגט:

• התכונות הבסיסיות שזמינות באופן נרחב כוללות את כל תכונות האינטרנט שנתמכו באופן מלא על ידי קבוצת דפדפני הליבה של Baseline לפני 30 חודשים או יותר.
• ערכות התכונות של שנת הבסיס, לדוגמה Baseline 2020, כוללות את כל התכונות שהיו זמינות לאחרונה בסוף השנה שצוינה.

בהתאם לבסיס המשתמשים שלכם, יכול להיות שתוכלו לטרגט את הגרסה העדכנית של Baseline Widely available, או שתצטרכו לטרגט גרסה ישנה יותר של Baseline. כדי להבין אילו גרסאות של דפדפנים יש למשתמשים שלכם, אפשר לעיין בכלי הניתוח או בכלי RUM.

איך לטרגט את ההגדרה 'בסיסי' או 'זמין באופן נרחב'

התמיכה ב-Baseline מוטמעת ב-Browserslist באמצעות כמה שאילתות שונות. אם רוצים לטרגט דפדפנים חדשים שזמינים ב-Baseline, כדאי לציין baseline newly available בהגדרות של Browserslist:

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

אפשר גם לציין את baseline widely available כשאילתה:

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

איך לטרגט שנים בסיסיות

אם רוצים לטרגט קבוצת תכונות של שנת בסיס, מציינים את השנה בשאילתה, למשל baseline 2024 אם רוצים לטרגט את קבוצת התכונות של 2024:

"browserslist": "baseline 2024"

אפשר לציין שנים משנת baseline 2015 ועד השנה הנוכחית.

איך מציינים דפדפנים במורד הזרם

הסט הבסיסי של דפדפני ליבה כולל את Chrome,‏ Edge,‏ Firefox ו-Safari. דפדפנים אחרים מבוססים על אותו קוד פתוח כמו Chrome ו-Edge – Chromium – והם אמורים לתמוך באותה קבוצת תכונות כמו הגרסה של Chromium שהם מטמיעים. כדי לכלול את הדפדפנים האלה בהגדרת הבסיס, מוסיפים את with downstream אחרי שאילתת הבסיס. לדוגמה, כדי לטרגט דפדפנים במורד הזרם כחלק מהתכונה 'תאימות בסיסית רחבה', מציינים baseline widely available with downstream:

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream היא שאילתה תקפה נוספת, כמו גם הוספת with downstream ליעדים השנתיים:

"browserslist": "baseline 2024 with downstream"

דוגמאות לשאילתות בסיסיות בפעולה

בכלים ליצירת חבילות התקנה

שימוש בשאילתות הבסיסיות שמוצעות על ידי Browserslist בפרויקט יכול להניב תוצאות מיידיות. ‫Babel הוא כלי פופולרי לבנייה של חבילות Javascript. אם משתמשים בערכי ברירת המחדל של חבילת @babel/preset-env, הרבה ממשקי API ושיטות מודרניים של JavaScript יוחלפו בתחביר מפורט יותר שנדרש בדפדפנים ישנים יותר:

עם זאת, אם משתמשים בשאילתה baseline 2020 כדי לטרגט את קבוצת התכונות של 2020 באותו פרויקט לדוגמה, גודל הפלט של ה-JavaScript הזה יקטן באופן משמעותי, כי נדרשות פחות טרנספורמציות של תחביר:

אתם יכולים לנסות את זה בעצמכם באמצעות קוד לדוגמה במאגר baseline-demos של Google Chrome Labs.

בכלי Linter

חלק מכלי ה-linting כבר פועלים עם 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 מציע.