वेब-फ़ीचर पैकेज की मदद से, बेसलाइन टूल बनाना

Jeremy Wagner

Rick Viscomi

पब्लिश होने की तारीख: 12 सितंबर, 2025

Baseline के लिए उपलब्ध नए टूल की मदद से, यह तय किया जा सकता है कि आपके वेब ऐप्लिकेशन में आज कौनसी वेब सुविधाओं का इस्तेमाल करना सुरक्षित है. लिंटर और IDE की सुविधाओं जैसे ये टूल, वेब प्लैटफ़ॉर्म की सुविधाओं के डेटा सोर्स का इस्तेमाल करते हैं. इसमें मॉडर्न ब्राउज़र में इन सुविधाओं के काम करने से जुड़ा डेटा होता है.

Web Platform Status Dashboard, इन सुविधाओं के लिए एक डेटा सोर्स है. साथ ही, यह क्वेरी किए जा सकने वाले एचटीटीपी एपीआई उपलब्ध कराता है. सभी टूल के लिए, इस डेटा सोर्स से ज़रूरत के हिसाब से क्वेरी करना सही नहीं है. टूलिंग के कई इस्तेमाल के मामलों के लिए, web-features npm पैकेज, वेब फ़ीचर के डेटा का ज़्यादा भरोसेमंद और व्यावहारिक वर्शन है. इसका इस्तेमाल स्थानीय तौर पर किया जाता है. इस गाइड में, web-features पैकेज का इस्तेमाल करके, अपने बेसलाइन टूल डेवलप करने का तरीका बताया गया है.

web-features पैकेज का इस्तेमाल शुरू करना

सबसे पहले, अपने प्रोजेक्ट में पैकेज को डिपेंडेंसी के तौर पर इंस्टॉल करें:

npm install web-features

इंस्टॉल हो जाने के बाद, web-features पैकेज से एक या उससे ज़्यादा नेम एक्सपोर्ट को अपने प्रोजेक्ट में इंपोर्ट करें:

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

अपने लक्ष्यों के हिसाब से, हो सकता है कि आपको इन सभी एक्सपोर्ट की ज़रूरत न हो. इन एक्सपोर्ट में यह जानकारी शामिल होती है:

• features: ऑब्जेक्ट का कलेक्शन. इसमें हर ऑब्जेक्ट, वेब सुविधा को दिखाता है. यह एक्सपोर्ट करने का ऐसा तरीका है जिसका इस्तेमाल अक्सर किया जाता है.
• browsers: ब्राउज़र के बारे में बताने वाले ऑब्जेक्ट का कलेक्शन.
• groups: यह ऑब्जेक्ट का ऐसा कलेक्शन है जो सुविधाओं के लॉजिकल ग्रुप को तय करता है. अगर आपका लक्ष्य वेब प्लैटफ़ॉर्म की सुविधाओं के किसी सबसेट को टारगेट करना है, तो ये आपके काम आ सकते हैं. जैसे, सीएसएस, JavaScript, और ज़्यादा खास ग्रुपिंग के लिए सुविधाएं.
• snapshots: इसमें JavaScript की सुविधाओं के ECMAScript वर्शन होते हैं. जैसे, ES2023, ES2022, और ECMAScript के अन्य वर्शन.

सुविधाओं के एक्सपोर्ट से, बेसलाइन टूल बनाने के लिए ये प्रॉपर्टी मिलती हैं:

• id: यह सुविधा के लिए यूनीक आइडेंटिफ़ायर होता है. उदाहरण के लिए, सीएसएस ग्रिड का आइडेंटिफ़ायर "grid" है. ध्यान दें: यह डेटा ऑब्जेक्ट की प्रॉपर्टी नहीं है. यह ऑब्जेक्ट की कुंजी है.
• compat_features: यह सुविधा में शामिल अलग-अलग बीसीडी कुंजियों का कलेक्शन है.
• name: यह सुविधा के नाम की ऐसी स्ट्रिंग होती है जिसे आसानी से पढ़ा जा सकता है. जैसे, "Container Queries".
• description: सुविधा के बारे में कम शब्दों में जानकारी.
• group: वह ग्रुप जिसमें सुविधा शामिल है. यह groups एक्सपोर्ट में मौजूद ग्रुप डेटा से मेल खाता है.
• baseline: सुविधा का बेसलाइन स्टेटस. यह इनमें से कोई एक वैल्यू हो सकती है:
  1. false: इस सुविधा का स्टेटस, 'सीमित तौर पर उपलब्ध' है.
  2. "low": यह सुविधा, Baseline के लिए नई है.
  3. "high": यह सुविधा, Baseline Widely में उपलब्ध है.
  4. baseline_high_date: वह तारीख जब यह सुविधा, बेसलाइन के तौर पर बड़े पैमाने पर उपलब्ध हुई. ध्यान दें: अगर यह सुविधा, Baseline Widely available के तौर पर उपलब्ध नहीं है, तो इसका इस्तेमाल नहीं किया जा सकता.
  5. baseline_low_date: वह तारीख जब यह सुविधा, नई सुविधा के तौर पर उपलब्ध हुई. ध्यान दें: यह सुविधा, सीमित तौर पर उपलब्ध सुविधाओं के लिए नहीं है.

यहां सीएसएस सबग्रिड सुविधा के लिए, पूरे डेटा ऑब्जेक्ट का उदाहरण दिया गया है:

"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" है. ध्यान दें: यह groups ऑब्जेक्ट की प्रॉपर्टी नहीं है. यह ऑब्जेक्ट की कुंजी होती है.
• name: ग्रुप का ऐसा नाम जिसे आसानी से पढ़ा जा सके.
• parent: ग्रुप के पैरंट ग्रुप का आईडी. अगर ग्रुप में कोई अभिभावक नहीं है, तो यह सुविधा उपलब्ध नहीं होती.

उदाहरण

यहां दिए गए उदाहरणों में, web-features package का इस्तेमाल करके, बेसलाइन टूलिंग बनाने के लिए ज़रूरी डेटा पाने का तरीका बताया गया है.

किसी सुविधा के लिए, बेसलाइन का स्टेटस देखना

import { features } from 'web-features';

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

इस उदाहरण में, web-features पैकेज के इस्तेमाल का सबसे सीधा तरीका दिखाया गया है. इसमें, किसी सुविधा का आईडी तय करके, web-features प्रॉपर्टी में उपलब्ध उसका बेसलाइन डेटा पाया जाता है.status.baseline इस प्रॉपर्टी से पता चलता है कि कोई सुविधा सीमित तौर पर उपलब्ध है, हाल ही में उपलब्ध हुई है या बड़े पैमाने पर उपलब्ध है. इन दोनों मामलों में, आपके पास उन तारीखों का ऐक्सेस भी होता है जिनसे पता चलता है कि सुविधा कब किसी खास बेसलाइन थ्रेशोल्ड तक पहुंची.

किसी खास बीसीडी कुंजी के लिए, बेसलाइन का स्टेटस देखना

बीसीडी का मतलब browser-compat-data है. यह एक ऐसा प्रोजेक्ट है जिसे MDN मैनेज करता है. इसका मकसद, अलग-अलग ब्राउज़र में सुविधाओं के काम करने की जानकारी को कैटलॉग करना है. बीसीडी कुंजी, किसी खास सुविधा से जुड़ी होती है. जैसे, सीएसएस प्रॉपर्टी की कोई खास वैल्यू या स्पेसिफ़िकेशन में बताई गई व्यवहार से जुड़ी कोई सब-सुविधा.

web-features, हर सुविधा के लिए compat_features ऐरे में, बीसीडी से जुड़ी कुंजियों को ग्रुप करता है. कभी-कभी, आपको पूरी सुविधा के लिए बेसलाइन स्टेटस के बजाय, किसी एक बीसीडी कुंजी का बेसलाइन स्टेटस चाहिए होता है. उदाहरण के लिए, अगर आपको सीएसएस लिंटर बनाना है और यह जानना है कि कोई प्रॉपर्टी-वैल्यू पेयर, मुख्य ब्राउज़र पर काम करता है या नहीं, तो फ़ीचर-लेवल का डेटा बहुत कम काम का होता है. ऐसा इसलिए होता है, क्योंकि पैकेज में शामिल हर सुविधा को, उससे जुड़ी सभी बीसीडी कुंजियों के हिसाब से एग्रीगेट किया जाता है. साथ ही, कुछ कुंजियों के लिए ब्राउज़र सपोर्ट, अन्य कुंजियों के मुकाबले बेहतर होता है.

बीसीडी कुंजी के बेसलाइन स्टेटस का पता लगाने के लिए, सुविधा ऑब्जेक्ट की 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"
  }
}

सुविधाओं को उनके बेसलाइन स्टेटस के हिसाब से क्रम से लगाएं

इस उदाहरण में, features ऑब्जेक्ट में मौजूद हर सुविधा को दोहराया जाता है. साथ ही, हर सुविधा को उसके बेसलाइन स्टेटस के हिसाब से एक ऐरे में क्रम से लगाया जाता है.

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 एक्सपोर्ट के इंटरसेक्शन से, वेब सुविधाओं को उनके ग्रुप के हिसाब से खोजा जा सकता है.

जानकारी को एक जगह इकट्ठा किया जा रहा है

लुकअप का इस्तेमाल करके, काम के टूल बनाए जा सकते हैं. उदाहरण के लिए, सीएसएस लिंटर बनाने के लिए.

सीएसएस लिंटर, ऐट-रूल, सूडो-एलिमेंट, प्रॉपर्टी, और प्रॉपर्टी-वैल्यू पेयर का आकलन करते हैं. अपने बेसलाइन लिंटर के लिए, हर टोकन की स्थिति को उसकी बीसीडी कुंजी के हिसाब से देखें, न कि उसकी पैरंट सुविधा के हिसाब से.

CSSTree जैसे पार्सर, सीएसएस को टोकन में बदल देते हैं. साथ ही, स्टाइलशीट को ऐब्स्ट्रैक्ट सिंटैक्स ट्री (एएसटी) में बदल देते हैं. यहां दिए गए उदाहरण में, सीएसएस का एक ऐसा नियम दिखाया गया है जिसमें सामान्य क्लास सिलेक्टर और स्टाइल डेक्लेरेशन का इस्तेमाल किया गया है:

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

एएसटी कुछ ऐसा दिखेगा:

{
  "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"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

ध्यान दें: आउटपुट को पढ़ने में आसान बनाने के लिए, इसे छोटा कर दिया गया है. ESLint के कोड एक्सप्लोरर का इस्तेमाल करके, इस उदाहरण के लिए पूरा एएसटी देखा जा सकता है.

जब आपको एएसटी की जांच करते समय प्रॉपर्टी का एलान दिखे, तो उस प्रॉपर्टी के नाम को उसकी बीसीडी कुंजी से मैप करें. इससे आपको प्रॉपर्टी के बेसलाइन स्टेटस की जानकारी मिलेगी. बीसीडी, सीएसएस प्रॉपर्टी को css.properties ऑब्जेक्ट के तहत कैटगरी में रखता है. इसलिए, इससे जुड़ी बीसीडी कुंजी css.properties.word-break है.

इसके बाद, उस बीसीडी कुंजी से जुड़ी सुविधा ढूंढें और उसका स्टेटस देखें.

// 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" बेसलाइन स्टेटस से पता चलता है कि प्रॉपर्टी ज़्यादातर डिवाइसों पर उपलब्ध है. इसलिए, आपके लिंटर को चेतावनी जारी करने की ज़रूरत नहीं है. इसके बाद, प्रॉपर्टी की वैल्यू देखें.

एएसटी से पता चलता है कि इस प्रॉपर्टी की वैल्यू auto-phrase है. बीसीडी की से जुड़ी वैल्यू पाने के लिए, पैरंट प्रॉपर्टी की बीसीडी की में वैल्यू जोड़ें: css.properties.word-break.auto-phrase.

ध्यान दें: यह तरीका सिर्फ़ उन वैल्यू के लिए काम करता है जिनके बारे में प्रॉपर्टी के स्पेसिफ़िकेशन में बताया गया है. नंबर या रंग के नाम जैसे सामान्य वैल्यू टाइप के अपने बीसीडी कुंजी नहीं होती हैं. अगर web-features किसी बीसीडी कुंजी के लिए डेटा नहीं दिखाता है, तो पुष्टि करने के लिए कुछ भी नहीं है. इसलिए, इसे अनदेखा करें.

इस मामले में, web-features से पता चलता है कि word-break: auto-phrase प्रॉपर्टी-वैल्यू पेयर की स्थिति, बेसलाइन नहीं है:

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

लिंटर के इस उदाहरण में दी गई जानकारी का इस्तेमाल करके, डेवलपर को यह चेतावनी दें कि यह प्रॉपर्टी-वैल्यू पेयर, बेसलाइन नहीं है. इस चेतावनी से डेवलपर को यह पता चलता है कि यह सुविधा, मुख्य ब्राउज़र इंजन पर उम्मीद के मुताबिक काम नहीं करेगी.

असल दुनिया से जुड़े उदाहरण

पिछले उदाहरणों में, web-features पैकेज के बुनियादी इस्तेमाल के बारे में बताया गया है. कई टूल पहले से ही इस डेटा का इस्तेमाल कर रहे हैं. उदाहरण के लिए:

• eslint-css, कुछ खास सुविधाओं के लिए लिंट करने के लिए, अपने use-baseline नियम में web-features पैकेज का इस्तेमाल करता है.
• Visual Studio Code में मौजूद होवरकार्ड, web-features पैकेज का इस्तेमाल करते हैं. इससे सीएसएस सुविधाओं और एचटीएमएल सुविधाओं के लिए, बेसलाइन की जानकारी दिखती है.
• MDN, ज़्यादातर सुविधा वाले पेजों (उदाहरण के लिए, abs()) पर बैनर में web-features डेटा का इस्तेमाल करता है, ताकि लोगों को उनकी बेसलाइन स्थिति के बारे में बताया जा सके.

इस डेटा सोर्स का इस्तेमाल करके, बेसलाइन टूल बनाने के और भी उदाहरण मौजूद हैं. हमें उम्मीद है कि आपका प्रोजेक्ट भी उनमें से एक होगा!