Trang này được dịch bởi Cloud Translation API.

Tạo các công cụ Baseline bằng gói web-features

Jeremy Wagner

Rick Viscomi

Xuất bản: Ngày 12 tháng 9 năm 2025

Công cụ mới nổi cho Baseline giúp bạn xác định những tính năng web an toàn để sử dụng trong các ứng dụng web của mình ngay hôm nay. Những công cụ này (chẳng hạn như linter và các tính năng của IDE) sử dụng một nguồn dữ liệu gồm các tính năng của nền tảng web. Nguồn dữ liệu này chứa dữ liệu về khả năng hỗ trợ của các tính năng đó trong các trình duyệt hiện đại.

Trang tổng quan về trạng thái của nền tảng web là một nguồn dữ liệu cho các tính năng này và cung cấp một API HTTP có thể truy vấn. Việc truy vấn nguồn dữ liệu này theo yêu cầu là không thực tế đối với tất cả các công cụ. Đối với nhiều trường hợp sử dụng công cụ, gói npm web-features là phiên bản đáng tin cậy và thiết thực hơn của dữ liệu tính năng web mà bạn sử dụng cục bộ. Hướng dẫn này sẽ cho bạn biết cách sử dụng gói web-features để phát triển các công cụ Cơ sở của riêng bạn.

Bắt đầu với gói `web-features`

Trước tiên, hãy cài đặt gói này dưới dạng một phần phụ thuộc trong dự án của bạn:

npm install web-features

Sau khi cài đặt, hãy nhập một hoặc nhiều thành phần xuất có tên từ gói web-features vào dự án của bạn:

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

Tuỳ thuộc vào mục tiêu của mình, bạn có thể không cần tất cả các báo cáo xuất này. Các tệp xuất này cung cấp những thông tin sau:

features: Một mảng các đối tượng, trong đó mỗi đối tượng đại diện cho một tính năng trên web. Đây là dữ liệu xuất mà bạn sẽ sử dụng thường xuyên nhất.
browsers: Một mảng gồm các đối tượng mô tả trình duyệt.
groups: Một mảng gồm các đối tượng xác định một nhóm tính năng theo logic. Những thông tin này sẽ hữu ích nếu mục tiêu của bạn là nhắm đến một nhóm nhỏ các tính năng của nền tảng web, chẳng hạn như các tính năng cho CSS, JavaScript và các nhóm cụ thể hơn.
snapshots: Chứa các phiên bản ECMAScript của các tính năng JavaScript tương ứng, chẳng hạn như ES2023, ES2022 và các phiên bản ECMAScript khác.

Tính năng xuất cung cấp các thuộc tính sau để tạo công cụ Đường cơ sở:

id: Giá trị nhận dạng duy nhất của đối tượng. Ví dụ: giá trị nhận dạng cho Lưới CSS là "grid". Lưu ý: đây không phải là một thuộc tính trong đối tượng dữ liệu. Đó là khoá đối tượng.
compat_features: Một mảng gồm các khoá BCD riêng lẻ có trong tính năng này.
name: Chuỗi tên của tính năng mà con người có thể đọc được, chẳng hạn như "Container Queries".
description: Nội dung mô tả ngắn về tính năng.
group: Nhóm chứa tính năng này. Điều này tương ứng với dữ liệu nhóm có trong tệp xuất groups.
baseline: Trạng thái Cơ sở của tính năng. Đây có thể là một trong 3 giá trị:
1. false: Trạng thái của tính năng này là Có giới hạn.
2. "low": Tính năng này mới có trong Baseline.
3. "high": Tính năng này được cung cấp rộng rãi theo Baseline.
4. baseline_high_date: Ngày tính năng này trở thành Baseline Widely Available. Lưu ý: bạn không thể sử dụng tính năng này nếu tính năng đó chưa được cung cấp rộng rãi theo Baseline.
5. baseline_low_date: Ngày tính năng này trở thành Baseline Newly available (Mới có trong đường cơ sở). Lưu ý: tính năng này không áp dụng cho các tính năng có phạm vi cung cấp hạn chế.

Ví dụ sau đây là đối tượng dữ liệu đầy đủ cho tính năng lưới phụ 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"
    }
  }
}

Tệp xuất groups cung cấp dữ liệu về các nhóm tính năng theo cấu trúc sau:

id: Giá trị nhận dạng duy nhất của nhóm. Ví dụ: các tính năng CSS có mã nhận dạng là"css". Lưu ý: đây không phải là một thuộc tính trong đối tượng nhóm. Đó chính là khoá đối tượng.
name: Tên nhóm mà con người có thể đọc được.
parent: Mã nhận dạng của nhóm mẹ của nhóm. Không dùng được nếu nhóm không có nhóm mẹ.

Ví dụ

Các ví dụ sau đây cho thấy cách sử dụng web-features package để lấy dữ liệu cần thiết nhằm tạo công cụ Baseline.

Tra cứu trạng thái Cơ sở của một tính năng cụ thể

import { features } from 'web-features';

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

Ví dụ này minh hoạ trường hợp sử dụng trực tiếp nhất cho gói web-features, trong đó bạn chỉ định mã nhận dạng của một đối tượng để nhận dữ liệu Cơ sở của đối tượng đó có trong thuộc tính status.baseline. Thuộc tính này cho biết một tính năng có phạm vi cung cấp Hạn chế, Mới cung cấp hay Cung cấp rộng rãi. Trong hai trường hợp sau, bạn cũng có quyền truy cập vào những ngày mô tả thời điểm tính năng đạt đến một ngưỡng Baseline nhất định.

Tra cứu trạng thái Cơ sở cho một khoá BCD cụ thể

BCD là viết tắt của browser-compat-data, một dự án do MDN duy trì để lập danh mục hỗ trợ cho các tính năng trên nhiều trình duyệt. Khoá BCD tương ứng với một tính năng chi tiết, chẳng hạn như một giá trị thuộc tính CSS cụ thể hoặc một tính năng phụ về hành vi do quy cách xác định.

Dự án web-features nhóm các khoá BCD có liên quan vào mảng compat_features cho từng tính năng. Đôi khi, bạn cần trạng thái Cơ bản của một khoá BCD, thay vì trạng thái Cơ bản tổng thể cho toàn bộ tính năng. Ví dụ: nếu bạn tạo một trình kiểm tra CSS và cần biết liệu một cặp giá trị thuộc tính có tương thích trên các trình duyệt chính hay không, thì dữ liệu ở cấp tính năng là quá thô. Điều này xảy ra vì gói tổng hợp từng tính năng trên tất cả các khoá BCD cấu thành của gói đó và một số khoá có khả năng hỗ trợ trình duyệt tốt hơn những khoá khác.

Để tra cứu trạng thái Cơ bản của một khoá BCD, hãy kiểm tra thuộc tính status.by_compat_key của đối tượng tính năng (có trong web-features 3.6.0 trở lên):

import { features } from 'web-features';

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

Ví dụ: đầu ra của getBaselineStatus('outline', 'css.properties.outline') là:

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

Sắp xếp các tính năng theo trạng thái Cơ sở

Ví dụ này lặp lại qua mọi tính năng trong đối tượng features và sắp xếp từng tính năng vào một mảng theo trạng thái Đường cơ sở.

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;
});

Ví dụ này minh hoạ cách sử dụng thuộc tính status.baseline trong công cụ của bạn. Ví dụ: bạn có thể sử dụng phương pháp này trong một ứng dụng web để hiển thị danh sách tất cả các tính năng web theo trạng thái Baseline.

Tìm tất cả các đối tượng trong một nhóm

Cho đến nay, tất cả các ví dụ được trình bày đều sử dụng chế độ xuất features, nhưng chế độ xuất groups sắp xếp tất cả các tính năng một cách hợp lý trong các nhóm. Ví dụ: bạn có thể tìm thấy tất cả các tính năng thuộc hiệu ứng Chuyển cảnh:

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;
});

Giao điểm giữa các chỉ số xuất features và group cho phép bạn thu hẹp phạm vi tìm kiếm các tính năng trên web theo nhóm mà chúng thuộc về.

Kết hợp kiến thức đã học

Bạn có thể sử dụng các lệnh tra cứu này để tạo các công cụ hữu ích, chẳng hạn như tạo một trình kiểm tra CSS.

Trình kiểm tra CSS đánh giá các quy tắc, phần tử giả, thuộc tính và cặp giá trị thuộc tính. Đối với Baseline linter, hãy tra cứu trạng thái của từng mã thông báo theo khoá BCD, chứ không phải theo tính năng gốc.

Một trình phân tích cú pháp như CSSTree sẽ mã hoá CSS, chia một biểu định kiểu thành một cây cú pháp trừu tượng (AST). Ví dụ sau đây cho thấy một quy tắc CSS sử dụng bộ chọn lớp chung và một khai báo kiểu:

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

AST sẽ có dạng như sau:

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

Khi bạn tìm thấy một khai báo thuộc tính trong quá trình duyệt qua AST, hãy liên kết tên thuộc tính đó với khoá BCD tương ứng để kiểm tra trạng thái Baseline của thuộc tính. BCD phân loại các thuộc tính CSS trong đối tượng css.properties, vì vậy khoá BCD tương ứng là css.properties.word-break.

Sau đó, hãy tìm tính năng được liên kết với khoá BCD đó và tra cứu trạng thái của tính năng.

// 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];

Trạng thái Đường cơ sở cho tài sản word-break như sau:

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

Trạng thái "high" Cơ bản cho biết thuộc tính này có sẵn ở nhiều nơi, nên trình kiểm tra mã nguồn không cần đưa ra cảnh báo. Tiếp theo, hãy xem xét giá trị của thuộc tính.

AST cho thấy giá trị của thuộc tính này là auto-phrase. Để lấy khoá BCD tương ứng, hãy thêm giá trị vào khoá BCD của thuộc tính mẹ: css.properties.word-break.auto-phrase.

Lưu ý: Phương thức này chỉ hoạt động đối với các giá trị mà tên quy cách của thuộc tính. Các loại giá trị chung chung như số hoặc tên màu không có khoá BCD riêng. Nếu web-features không trả về dữ liệu cho một khoá BCD nhất định, thì không có gì để xác thực, vì vậy hãy bỏ qua khoá đó.

Trong trường hợp này, web-features cho biết trạng thái của cặp giá trị-thuộc tính word-break: auto-phrase không phải là Baseline:

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

Sử dụng thông tin trong ví dụ về linter này để cảnh báo nhà phát triển rằng cặp giá trị thuộc tính này không phải là Baseline. Cảnh báo này đảm bảo rằng nhà phát triển biết rằng tính năng này sẽ không hoạt động như mong đợi trên các công cụ trình duyệt chính.

Ví dụ thực tế

Các ví dụ trước cho thấy cách sử dụng cơ bản của gói web-features. Hiện đã có một số công cụ tận dụng dữ liệu này. Ví dụ:

eslint-css sử dụng gói web-features trong quy tắc use-baseline để kiểm tra các tính năng cụ thể.
Thẻ thông tin khi di chuột trong Visual Studio Code sử dụng gói web-features để hiện thông tin về Đường cơ sở cho các tính năng CSS và các tính năng HTML.
MDN sử dụng dữ liệu web-features trong biểu ngữ trên hầu hết các trang tính năng (ví dụ: abs()) để thông báo trạng thái Đường cơ sở của các tính năng đó.

Có nhiều ví dụ khác về cách sử dụng nguồn dữ liệu này để tạo các công cụ cơ sở và chúng tôi hy vọng dự án của bạn sẽ là một trong số đó!

Tạo các công cụ Baseline bằng gói web-features Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Bắt đầu với gói web-features

Ví dụ

Tra cứu trạng thái Cơ sở của một tính năng cụ thể

Tra cứu trạng thái Cơ sở cho một khoá BCD cụ thể

Sắp xếp các tính năng theo trạng thái Cơ sở

Tìm tất cả các đối tượng trong một nhóm

Kết hợp kiến thức đã học

Ví dụ thực tế

Tạo các công cụ Baseline bằng gói web-features

Bắt đầu với gói `web-features`