דף זה תורגם על ידי Cloud Translation API.

יצירת כלים של Baseline באמצעות חבילת תכונות האינטרנט

Jeremy Wagner

Rick Viscomi

תאריך פרסום: 12 בספטמבר 2025

כלים חדשים ל-Baseline עוזרים לכם לקבוע אילו תכונות אינטרנט בטוחות לשימוש באפליקציות האינטרנט שלכם היום. הכלים האלה, כמו כלי ניתוח קוד ותכונות של סביבת פיתוח משולבת (IDE), משתמשים במקור נתונים של תכונות פלטפורמת אינטרנט שמכיל נתונים על התמיכה שלהן בדפדפנים מודרניים.

לוח הבקרה של סטטוס פלטפורמת האינטרנט הוא אחד ממקורות הנתונים של התכונות האלה, והוא מספק API של HTTP שאפשר להריץ עליו שאילתות. לא מעשי להריץ שאילתות במקור הנתונים הזה לפי דרישה בכל הכלים. במקרים רבים של שימוש בכלי פיתוח, חבילת web-features npm היא גרסה אמינה ופרקטית יותר של נתוני תכונות אינטרנט שבהם אתם משתמשים באופן מקומי. במדריך הזה נסביר איך להשתמש בחבילת web-features כדי לפתח כלים משלכם לבדיקת תאימות.

תחילת העבודה עם חבילת `web-features`

קודם כול, מתקינים את החבילה כתלות בפרויקט:

npm install web-features

אחרי ההתקנה, מייבאים לפרויקט ייצוא אחד או יותר עם שם מהחבילה web-features:

import { features, groups, browsers, snapshots } from 'web-features';

יכול להיות שלא תצטרכו את כל הייצוא הזה, בהתאם למטרות שלכם. הייצוא הזה כולל את הפרטים הבאים:

‫features: מערך של אובייקטים, שכל אחד מהם מייצג תכונת אינטרנט. זהו הייצוא שבו תשתמשו הכי הרבה.
‫browsers: מערך של אובייקטים שמתארים דפדפנים.
‫groups: מערך של אובייקטים שמגדיר קיבוץ לוגי של תכונות. ההגדרות האלה שימושיות אם רוצים לטרגט קבוצת משנה של תכונות בפלטפורמת האינטרנט, כמו תכונות של CSS,‏ JavaScript וקיבוצים ספציפיים יותר.
‫snapshots: מכיל את גרסאות ECMAScript של תכונות JavaScript תואמות, כמו ES2023,‏ ES2022 וגרסאות אחרות של ECMAScript.

הייצוא של התכונות מספק את המאפיינים הבאים ליצירת כלים לבדיקת קו בסיס:

‫id: המזהה הייחודי של התכונה. לדוגמה, המזהה של CSS Grid הוא "grid". הערה: זה לא מאפיין באובייקט הנתונים. זהו מפתח האובייקט.
‫compat_features: מערך של מפתחות BCD בודדים שכלולים בתכונה.
‫name: המחרוזת הקריאה לאנשים של שם התכונה, כמו "Container Queries".
‫description: תיאור קצר של התכונה.
‫group: הקבוצה שאליה התכונה שייכת. הנתונים האלה תואמים לנתוני הקבוצה שנמצאים בייצוא groups.
‫baseline: סטטוס הבסיס של התכונה. הערך יכול להיות אחד משלושת הערכים הבאים:
1. ‫false: הסטטוס של התכונה הוא זמינות מוגבלת.
2. ‫"low: התכונה זמינה כעת בגרסת Baseline.
3. ‫"high: התכונה זמינה באופן נרחב.
4. baseline_high_date: התאריך שבו התכונה הפכה לזמינה באופן נרחב ב-Baseline. הערה: האפשרות הזו לא זמינה אם התכונה לא זמינה באופן נרחב.
5. baseline_low_date: התאריך שבו התכונה הפכה לזמינה ב-Baseline Newly. הערה: האפשרות הזו לא זמינה לתכונות עם זמינות מוגבלת.

בדוגמה הבאה מוצג אובייקט הנתונים המלא של התכונה CSS subgrid:

"subgrid": {
  "caniuse": "css-subgrid",
  "compat_features": [
    "css.properties.grid-template-columns.subgrid",
    "css.properties.grid-template-rows.subgrid"
  ],
  "description": "The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.",
  "description_html": "The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.",
  "group": "grid",
  "name": "Subgrid",
  "spec": "https://drafts.csswg.org/css-grid-2/#subgrids",
  "status": {
    "baseline": "low",
    "baseline_low_date": "2023-09-15",
    "support": {
      "chrome": "117",
      "chrome_android": "117",
      "edge": "117",
      "firefox": "71",
      "firefox_android": "79",
      "safari": "16",
      "safari_ios": "16"
    }
  }
}

הייצוא groups מספק נתונים על קיבוצי תכונות במבנה הבא:

‫id: המזהה הייחודי של הקבוצה. לדוגמה, למאפייני CSS יש מזהה מסוג 'css'. הערה: זו לא מאפיין באובייקט groups. זהו מפתח האובייקט עצמו.
‫name: השם של הקבוצה שקריא לאנשים.
‫parent: המזהה של קבוצת האב של הקבוצה. האפשרות הזו לא זמינה אם לקבוצה אין הורה.

דוגמאות

בדוגמאות הבאות מוסבר איך להשתמש ב-web-features package כדי לקבל את הנתונים שדרושים ליצירת כלים לבניית תצורת בסיס.

חיפוש הסטטוס של תכונה ספציפית ב-Baseline

import { features } from 'web-features';

function getBaselineStatus (featureId) {
  return features[featureId]?.status.baseline;
}

בדוגמה הזו מוצג תרחיש השימוש הכי ישיר בחבילת web-features, שבו מציינים מזהה של תכונה כדי לקבל את נתוני הבסיס שלה שזמינים בנכס status.baseline. במאפיין הזה אפשר לראות אם התכונה זמינה באופן מוגבל, זמינה לאחרונה או זמינה באופן נרחב. בשני המקרים האחרונים, יש לכם גם גישה לתאריכים שמתארים מתי התכונה הגיעה לסף מסוים של Baseline.

חיפוש הסטטוס של תצורת הבסיס למפתח BCD ספציפי

המונח BCD מייצג את browser-compat-data, פרויקט שמתוחזק על ידי MDN כדי לקטלג את התמיכה בתכונות בדפדפנים שונים. מפתח BCD מתאים לתכונה ספציפית, כמו ערך מסוים של מאפיין CSS או תכונת משנה התנהגותית שמוגדרת במפרט.

הפרויקט web-features מקבץ מפתחות BCD קשורים במערך compat_features לכל תכונה. לפעמים צריך את סטטוס הבסיס של מפתח BCD אחד, ולא את סטטוס הבסיס הכולל של התכונה כולה. לדוגמה, אם אתם יוצרים כלי לבדיקת קוד CSS ואתם צריכים לדעת אם זוג של מאפיין וערך תואם לדפדפנים נפוצים, הנתונים ברמת התכונה לא מספיקים. הסיבה לכך היא שהחבילה צוברת כל תכונה על פני כל מפתחות ה-BCD המרכיבים אותה, ולחלק מהמפתחות יש תמיכה טובה יותר בדפדפן מאשר לאחרים.

כדי לחפש את סטטוס הבסיס של מפתח BCD, בודקים את המאפיין status.by_compat_key של אובייקט התכונה (זמין ב-web-features 3.6.0 ואילך):

import { features } from 'web-features';

function getBaselineStatus (featureId, bcdKey) {
  return features[featureId]?.status.by_compat_key[bcdKey];
}

לדוגמה, הפלט של getBaselineStatus('outline', 'css.properties.outline') הוא:

{
  "baseline": "low",
  "baseline_low_date": "2023-03-27",
  "support": {
    "chrome": "94",
    "chrome_android": "94",
    "edge": "94",
    "firefox": "88",
    "firefox_android": "88",
    "safari": "16.4",
    "safari_ios": "16.4"
  }
}

מיון התכונות לפי סטטוס הבסיס להשוואה

בדוגמה הזו, המערכת מבצעת איטרציה בכל תכונה באובייקט התכונות וממיינת כל אחת מהן למערך לפי סטטוס הבסיס שלה.

import { features } from "web-features";

const webFeatures = Object.values(features);

const widelyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'high';
});

const newlyAvailable = webFeatures.filter(feature => {
  return feature.status.baseline === 'low';
});

const limitedAvailability = webFeatures.filter(feature => {
  return feature.status.baseline === false;
});

בדוגמה הזו מוסבר איך לעבוד עם הנכס status.baseline בכלי שלכם. לדוגמה, אפשר להשתמש בגישה הזו באפליקציית אינטרנט כדי להציג רשימה של כל התכונות של האינטרנט לפי סטטוס הבסיס שלהן.

חיפוש כל התכונות בקבוצה

עד עכשיו, בכל הדוגמאות שהוצגו נעשה שימוש בייצוא features, אבל בייצוא groups כל התכונות מאורגנות באופן הגיוני בתוך קבוצות. לדוגמה, תוכלו למצוא את כל התכונות שקשורות למעברי תצוגה:

import { features, groups } from 'web-features';

const groupKeys = Object.keys(groups);
const featuresData = Object.values(features);

const viewTransitionsGroup = groupKeys.find(groupKey => {
  return groupKey === 'view-transitions';
});

const viewTransitionsFeatures = featuresData.filter(feature => {
  return feature.group === viewTransitionsGroup;
});

החיתוך בין הייצוא של features לבין הייצוא של group מאפשר לצמצם את החיפוש של תכונות אינטרנט לפי הקבוצה שאליה הן שייכות.

סיכום של כל המידע

אפשר להשתמש בחיפושים כדי ליצור כלים שימושיים, למשל כדי ליצור כלי לבדיקת תחביר CSS.

כלי CSS Linters מבצעים הערכה של כללי at, רכיבים פסאודו, מאפיינים וצמדים של מאפיינים וערכים. ב-Baseline linter, מחפשים את הסטטוס של כל טוקן לפי מפתח ה-BCD שלו, ולא לפי תכונת ההורה שלו.

כלי ניתוח כמו CSSTree מבצעים טוקניזציה של CSS, ומחלקים גיליון סגנונות לעץ תחביר מופשט (AST). בדוגמה הבאה מוצג כלל CSS שמשתמש בסלקטור כללי של מחלקה ובהצהרת סגנון:

.foo {
  word-break: auto-phrase;
}

עץ ה-AST ייראה בערך כך:

{
  "type": "StyleSheet",
  "children": [
    {
      "type": "Rule",
      "prelude": {
        "type": "SelectorList",
        "children": [
          {
            "type": "Selector",
            "children": [
              {
                "type": "ClassSelector",
                "name": "foo"
              }
            ]
          }
        ]
      },
      "block": {
        "type": "Block",
        "children": [
          {
            "type": "Declaration",
            "important": false,
            "property": "word-break",
            "value": {
              "type": "Value",
              "children": [
                {
                  "type": "Identifier",
                  "name": "auto-phrase"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

כשמוצאים הצהרה על מאפיין במהלך הסריקה של ה-AST, ממפים את שם המאפיין למפתח ה-BCD התואם כדי לבדוק את סטטוס הבסיס שלו. ‫BCD מסווג מאפייני CSS באובייקט css.properties, ולכן מפתח ה-BCD התואם הוא css.properties.word-break.

לאחר מכן, מחפשים את התכונה שמשויכת למפתח ה-BCD הזה ובודקים את הסטטוס שלה.

// Assuming we only know the BCD key and not the feature ID.
const bcdKey = 'css.properties.word-break';
const [featureId, feature] = Object.entries(features).find(([id, feature]) =>
  feature.compat_features?.includes(bcdKey)
) || [];
const status = feature?.status.by_compat_key[bcdKey];

סטטוס הבסיס של נכס word-break הוא:

{
  "baseline": "high",
  "baseline_high_date": "2018-03-30",
  "baseline_low_date": "2015-09-30",
  "support": {
    "chrome": "44",
    "chrome_android": "44",
    "edge": "12",
    "firefox": "15",
    "firefox_android": "15",
    "safari": "9",
    "safari_ios": "9"
  }
}

הסטטוס "high" Baseline מציין שהנכס זמין באופן נרחב, ולכן אין צורך שאמצעי הבדיקה יציגו אזהרה. בשלב הבא, בודקים את ערך המאפיין.

ה-AST מראה שהערך של המאפיין הזה הוא auto-phrase. כדי לקבל את מפתח ה-BCD המתאים, מוסיפים את הערך למפתח ה-BCD של נכס האב: css.properties.word-break.auto-phrase.

הערה: השיטה הזו פועלת רק לגבי ערכים שמופיעים בשמות המפרטים של הנכס. לסוגי ערכים כלליים כמו מספרים או שמות של צבעים אין מפתחות BCD משלהם. אם הפונקציה web-features לא מחזירה נתונים עבור מפתח BCD נתון, אין מה לאמת, ולכן אפשר להתעלם ממנה.

במקרה הזה, web-features מראה שהסטטוס של זוג המאפיין-ערך word-break: auto-phrase הוא לא Baseline:

{
  "baseline": false,
  "support": {
    "chrome": "119",
    "chrome_android": "119",
    "edge": "119"
  }
}

השתמשו במידע בדוגמה הזו של כלי ה-linter כדי להזהיר את המפתח שצמד המאפיין-ערך הזה לא תואם ל-Baseline. האזהרה הזו מבטיחה שהמפתח יידע שהאפליקציה לא תפעל כצפוי במנועי הדפדפן העיקריים.

דוגמאות מהחיים האמיתיים

בדוגמאות הקודמות מוצגים שימושים בסיסיים בחבילה web-features. כבר יש מספר כלים שמנצלים את הנתונים האלה. לדוגמה:

‫eslint-css משתמש בחבילת web-features בכלל use-baseline כדי לבצע בדיקת קוד (linting) לתכונות ספציפיות.
כרטיסי ה-Hover ב-Visual Studio Code משתמשים בחבילה web-features כדי להציג מידע על Baseline לגבי תכונות CSS ותכונות HTML.
ב-MDN נעשה שימוש בנתוני web-features בבאנרים ברוב דפי התכונות (לדוגמה, abs()) כדי להציג את סטטוס הבסיס.

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

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

תחילת העבודה עם חבילת web-features

דוגמאות

חיפוש הסטטוס של תכונה ספציפית ב-Baseline

חיפוש הסטטוס של תצורת הבסיס למפתח BCD ספציפי

מיון התכונות לפי סטטוס הבסיס להשוואה

חיפוש כל התכונות בקבוצה

סיכום של כל המידע

דוגמאות מהחיים האמיתיים

יצירת כלים של Baseline באמצעות חבילת תכונות האינטרנט

תחילת העבודה עם חבילת `web-features`