สร้างเครื่องมือ Baseline ด้วยแพ็กเกจฟีเจอร์ของเว็บ

Jeremy Wagner
Rick Viscomi

เผยแพร่: 12 กันยายน 2025

เครื่องมือใหม่สำหรับ Baseline จะช่วยให้คุณทราบว่าฟีเจอร์ใดของเว็บที่ใช้ในเว็บแอปพลิเคชันได้อย่างปลอดภัยในปัจจุบัน เครื่องมือเหล่านี้ เช่น Linter และฟีเจอร์ IDE ใช้แหล่งข้อมูลของฟีเจอร์แพลตฟอร์มเว็บที่มีข้อมูลเกี่ยวกับการรองรับในเบราว์เซอร์สมัยใหม่

แดชบอร์ดสถานะแพลตฟอร์มเว็บเป็นแหล่งข้อมูลหนึ่งสำหรับฟีเจอร์เหล่านี้ และมี HTTP API ที่ค้นหาได้ การค้นหาแหล่งข้อมูลนี้ตามความต้องการไม่เหมาะกับเครื่องมือบางอย่าง สำหรับกรณีการใช้งานเครื่องมือหลายอย่าง web-featuresแพ็กเกจ npm เป็นข้อมูลฟีเจอร์เว็บเวอร์ชันที่น่าเชื่อถือและใช้งานได้จริงมากกว่าที่คุณใช้ในเครื่อง คู่มือนี้จะแสดงวิธีใช้แพ็กเกจ web-features เพื่อพัฒนาเครื่องมือ Baseline ของคุณเอง

เริ่มต้นใช้งานแพ็กเกจ web-features

ก่อนอื่น ให้ติดตั้งแพ็กเกจเป็นทรัพยากร Dependency ในโปรเจ็กต์

npm install web-features

เมื่อติดตั้งแล้ว ให้นำเข้าการส่งออกที่มีชื่ออย่างน้อย 1 รายการจากแพ็กเกจ 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": ฟีเจอร์นี้เป็นฟีเจอร์พื้นฐานที่เพิ่งพร้อมใช้งาน
    3. "high": ฟีเจอร์นี้พร้อมใช้งานใน Baseline
    4. baseline_high_date: วันที่ฟีเจอร์นี้พร้อมใช้งานในวงกว้างตามเกณฑ์พื้นฐาน หมายเหตุ: ตัวเลือกนี้จะใช้ไม่ได้หากฟีเจอร์นี้ยังไม่พร้อมใช้งานในวงกว้าง
    5. baseline_low_date: วันที่ที่ฟีเจอร์นี้กลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่ หมายเหตุ: ฟีเจอร์นี้ใช้ไม่ได้กับฟีเจอร์ที่มีความพร้อมใช้งานแบบจำกัด

ตัวอย่างต่อไปนี้คือออบเจ็กต์ข้อมูลแบบเต็มสำหรับฟีเจอร์กริดย่อย CSS

"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" หมายเหตุ: นี่ไม่ใช่พร็อพเพอร์ตี้ภายในออบเจ็กต์กลุ่ม ซึ่งก็คือคีย์ของออบเจ็กต์นั่นเอง
  • name: ชื่อกลุ่มที่อ่านแล้วเข้าใจได้
  • parent: รหัสของกลุ่มหลักของกลุ่ม ฟีเจอร์นี้จะใช้ไม่ได้หากกลุ่มไม่มีกลุ่มหลัก

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีใช้ web-features package เพื่อรับข้อมูลที่จำเป็นในการสร้างเครื่องมือพื้นฐาน

ค้นหาสถานะของ Baseline สำหรับฟีเจอร์ที่เฉพาะเจาะจง

import { features } from 'web-features';

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

ตัวอย่างนี้แสดงกรณีการใช้งานที่ตรงที่สุดสำหรับแพ็กเกจ web-features ซึ่งคุณระบุรหัสของฟีเจอร์เพื่อรับข้อมูลพื้นฐานของฟีเจอร์นั้นในพร็อพเพอร์ตี้ status.baseline พร็อพเพอร์ตี้นี้จะบอกว่าฟีเจอร์นั้นมีให้บริการแบบจำกัด เพิ่งพร้อมให้บริการ หรือพร้อมให้บริการอย่างกว้างขวาง ใน 2 กรณีหลัง คุณยังเข้าถึงวันที่ที่อธิบายถึงเวลาที่ฟีเจอร์ถึงเกณฑ์พื้นฐานที่กำหนดได้ด้วย

ค้นหาสถานะของ 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"
  }
}

จัดเรียงฟีเจอร์ตามสถานะ Baseline

ตัวอย่างนี้จะวนซ้ำฟีเจอร์ทุกรายการในออบเจ็กต์ฟีเจอร์และจัดเรียงแต่ละรายการลงในอาร์เรย์ตามสถานะพื้นฐาน

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 ในเครื่องมือ เช่น คุณอาจใช้วิธีนี้ในเว็บแอปพลิเคชันเพื่อแสดงรายการฟีเจอร์ทั้งหมดของเว็บตามสถานะ 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

Linters ของ CSS จะประเมินกฎ @, องค์ประกอบเสมือน, พร็อพเพอร์ตี้ และคู่พร็อพเพอร์ตี้-ค่า สำหรับ Linter พื้นฐาน ให้ค้นหาสถานะของโทเค็นแต่ละรายการตามคีย์ BCD ไม่ใช่ตามฟีเจอร์หลัก

ตัวแยกวิเคราะห์ เช่น CSSTree จะสร้างโทเค็น CSS โดยแบ่งสไตล์ชีตออกเป็น Abstract Syntax Tree (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 ที่เกี่ยวข้องเพื่อตรวจสอบสถานะ Baseline 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" สถานะพื้นฐานแสดงว่าพร็อพเพอร์ตี้พร้อมใช้งานอย่างแพร่หลาย ดังนั้น Linter จึงไม่จำเป็นต้องออกคำเตือน จากนั้นตรวจสอบค่าของพร็อพเพอร์ตี้

AST แสดงว่ามูลค่าของพร็อพเพอร์ตี้นี้คือ auto-phrase หากต้องการรับคีย์ BCD ที่เกี่ยวข้อง ให้เพิ่มค่าลงในคีย์ BCD ของพร็อพเพอร์ตี้ระดับบน css.properties.word-break.auto-phrase

ในกรณีนี้ web-features แสดงว่าสถานะของword-break: auto-phraseคู่พร็อพเพอร์ตี้-ค่าไม่ใช่พื้นฐาน

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

ใช้ข้อมูลในตัวอย่าง Linter นี้เพื่อเตือนนักพัฒนาซอฟต์แวร์ว่าคู่พร็อพเพอร์ตี้-ค่านี้ไม่ใช่ Baseline คำเตือนนี้ช่วยให้นักพัฒนาแอปทราบว่าฟีเจอร์นี้จะไม่ทํางานตามที่คาดไว้ในเครื่องมือเบราว์เซอร์หลักๆ

ตัวอย่างในชีวิตจริง

ตัวอย่างก่อนหน้านี้แสดงการใช้งานพื้นฐานของแพ็กเกจ web-features ปัจจุบันมีเครื่องมือหลายอย่างที่ใช้ประโยชน์จากข้อมูลนี้อยู่แล้ว เช่น

นอกจากนี้ ยังมีตัวอย่างเพิ่มเติมเกี่ยวกับวิธีใช้แหล่งข้อมูลนี้เพื่อสร้างเครื่องมือ Baseline และเราหวังว่าโปรเจ็กต์ของคุณจะเป็นหนึ่งในนั้น