Halaman ini diterjemahkan oleh Cloud Translation API.

Membuat alat Baseline dengan paket fitur web

Jeremy Wagner

Rick Viscomi

Dipublikasikan: 12 September 2025

Alat yang baru muncul untuk Dasar membantu Anda menentukan fitur web mana yang aman digunakan di aplikasi web Anda saat ini. Alat ini, seperti linter dan fitur IDE, menggunakan sumber data fitur platform web yang berisi data tentang dukungan fitur tersebut di browser modern.

Dasbor Status Platform Web adalah salah satu sumber data untuk fitur ini dan menyediakan HTTP API yang dapat dikueri. Mengirim kueri ke sumber data ini sesuai permintaan tidak praktis untuk semua alat. Untuk banyak kasus penggunaan alat, paket npm web-features adalah versi data fitur web yang lebih andal dan praktis yang Anda gunakan secara lokal. Panduan ini akan menunjukkan cara menggunakan paket web-features untuk mengembangkan alat Dasar Pengukuran Anda sendiri.

Mulai menggunakan paket `web-features`

Pertama, instal paket sebagai dependensi di project Anda:

npm install web-features

Setelah diinstal, impor satu atau beberapa ekspor bernama dari paket web-features ke project Anda:

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

Bergantung pada tujuan Anda, Anda mungkin tidak memerlukan semua ekspor ini. Ekspor ini memberikan informasi berikut:

features: Array objek, dengan setiap objek mewakili fitur web. Ini adalah ekspor yang paling sering Anda gunakan.
browsers: Array objek yang menjelaskan browser.
groups: Array objek yang menentukan pengelompokan fitur logis. Fitur ini berguna jika sasaran Anda adalah menargetkan subset fitur platform web, seperti fitur untuk CSS, JavaScript, dan pengelompokan yang lebih spesifik.
snapshots: Berisi versi ECMAScript dari fitur JavaScript yang sesuai, seperti ES2023, ES2022, dan versi ECMAScript lainnya.

Ekspor fitur menyediakan properti berikut untuk membuat alat Dasar:

id: ID unik untuk fitur. Misalnya, ID untuk CSS Grid adalah "grid". Catatan: ini bukan properti dalam objek data. Ini adalah kunci objek.
compat_features: Array kunci BCD individual yang disertakan dalam fitur.
name: String nama fitur yang mudah dibaca, seperti "Container Queries".
description: Deskripsi singkat fitur.
group: Grup tempat fitur berada. Ini sesuai dengan data grup yang ditemukan dalam ekspor groups.
baseline: Status Dasar Pengukuran fitur. Ini dapat berupa salah satu dari tiga nilai:
1. false: Status fitur adalah Ketersediaan terbatas.
2. "low": Fitur ini Baru tersedia di Baseline.
3. "high": Fitur ini tersedia Luas dan sesuai Standar.
4. baseline_high_date: Tanggal fitur menjadi tersedia secara luas di Baseline. Catatan: ini tidak tersedia jika fitur tidak tersedia secara luas di Baseline.
5. baseline_low_date: Tanggal fitur menjadi Tersedia di Baseline Baru. Catatan: fitur ini tidak tersedia untuk fitur yang memiliki ketersediaan Terbatas.

Contoh berikut adalah objek data lengkap untuk fitur subgrid 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"
    }
  }
}

Ekspor groups menyediakan data tentang pengelompokan fitur dengan struktur berikut:

id: ID unik untuk grup. Misalnya, fitur CSS memiliki ID"css". Catatan: ini bukan properti dalam objek grup. Ini adalah kunci objek itu sendiri.
name: Nama grup yang mudah dibaca.
parent: ID grup induk grup. Opsi ini tidak tersedia jika grup tidak memiliki induk.

Contoh

Contoh berikut menunjukkan cara menggunakan web-features package untuk mendapatkan data yang Anda butuhkan untuk membuat alat Dasar.

Mencari status Dasar untuk fitur tertentu

import { features } from 'web-features';

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

Contoh ini menunjukkan kasus penggunaan paling langsung untuk paket web-features, tempat Anda menentukan ID fitur untuk mendapatkan data Dasar yang tersedia di properti status.baseline. Properti ini memberi tahu Anda jika suatu fitur memiliki ketersediaan Terbatas, Baru tersedia, atau Tersedia luas. Dalam dua kasus terakhir, Anda juga memiliki akses ke tanggal yang menjelaskan kapan fitur mencapai nilai minimum tertentu.

Mencari status Dasar untuk kunci BCD tertentu

BCD adalah singkatan dari browser-compat-data, sebuah project yang dikelola oleh MDN untuk mencatat dukungan fitur di berbagai browser. Kunci BCD sesuai dengan fitur terperinci, seperti nilai properti CSS tertentu atau subfitur perilaku yang ditentukan oleh spesifikasi.

Project web-features mengelompokkan kunci BCD terkait ke dalam array compat_features untuk setiap fitur. Terkadang Anda memerlukan status Dasar dari satu kunci BCD, bukan status Dasar keseluruhan untuk seluruh fitur. Misalnya, jika Anda membuat linter CSS dan perlu mengetahui apakah pasangan nilai properti kompatibel di seluruh browser utama, data tingkat fitur terlalu kasar. Hal ini terjadi karena paket menggabungkan setiap fitur di semua kunci BCD yang membentuknya, dan beberapa kunci memiliki dukungan browser yang lebih baik daripada yang lain.

Untuk mencari status Dasar dari kunci BCD, periksa properti status.by_compat_key dari objek fitur (tersedia di web-features 3.6.0 dan yang lebih baru):

import { features } from 'web-features';

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

Misalnya, output getBaselineStatus('outline', 'css.properties.outline') adalah:

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

Mengurutkan fitur menurut status Dasarnya

Contoh ini melakukan iterasi melalui setiap fitur dalam objek fitur dan mengurutkan setiap fitur ke dalam array berdasarkan status Dasarnya.

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

Contoh ini menggambarkan cara menggunakan properti status.baseline di alat Anda. Misalnya, Anda dapat menggunakan pendekatan ini di aplikasi web untuk menampilkan daftar semua fitur web berdasarkan status Dasarnya.

Menemukan semua fitur dalam grup

Sejauh ini, semua contoh yang ditampilkan menggunakan ekspor features, tetapi ekspor groups mengatur semua fitur secara logis dalam grup. Artinya, Anda dapat, misalnya, menemukan semua fitur yang merupakan bagian dari Transisi Tampilan:

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

Persimpangan antara ekspor features dan group memungkinkan Anda mempersempit penelusuran fitur web berdasarkan grup tempat fitur tersebut berada.

Menggabungkan semuanya

Anda dapat menggunakan pencarian untuk membuat alat yang berguna, misalnya untuk membuat linter CSS.

Linter CSS mengevaluasi aturan @, pseudo-elemen, properti, dan pasangan nilai properti. Untuk linter Baseline, cari status setiap token berdasarkan kunci BCD-nya, bukan berdasarkan fitur induknya.

Parser seperti CSSTree melakukan tokenisasi CSS, memecah stylesheet menjadi pohon sintaksis abstrak (AST). Contoh berikut menunjukkan aturan CSS yang menggunakan pemilih class generik dan deklarasi gaya:

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

AST akan terlihat seperti ini:

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

Saat Anda menemukan deklarasi properti saat menjelajahi AST, petakan nama properti tersebut ke kunci BCD yang sesuai untuk memeriksa status Dasarnya. BCD mengategorikan properti CSS di bawah objek css.properties, sehingga kunci BCD yang sesuai adalah css.properties.word-break.

Kemudian, temukan fitur yang terkait dengan kunci BCD tersebut dan cari statusnya.

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

Status Dasar untuk properti word-break adalah sebagai berikut:

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

Status Dasar "high" menunjukkan bahwa properti tersedia secara luas, sehingga linter Anda tidak perlu mengeluarkan peringatan. Selanjutnya, periksa nilai properti.

AST menunjukkan bahwa nilai properti ini adalah auto-phrase. Untuk mendapatkan kunci BCD yang sesuai, tambahkan nilai ke kunci BCD properti induk: css.properties.word-break.auto-phrase.

Catatan: Metode ini hanya berfungsi untuk nilai yang disebutkan dalam spesifikasi properti. Jenis nilai generik seperti angka atau nama warna tidak memiliki kunci BCD sendiri. Jika web-features tidak menampilkan data untuk kunci BCD tertentu, tidak ada yang perlu divalidasi, jadi abaikan saja.

Dalam hal ini, web-features menunjukkan bahwa status pasangan nilai properti word-break: auto-phrase bukan Baseline:

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

Gunakan informasi dalam contoh linter ini untuk memperingatkan developer bahwa pasangan nilai properti ini bukan Baseline. Peringatan ini memastikan bahwa developer mengetahui bahwa fitur tersebut tidak akan berfungsi seperti yang diharapkan di seluruh mesin browser utama.

Contoh dunia nyata

Contoh sebelumnya menunjukkan penggunaan dasar paket web-features. Sudah ada sejumlah alat yang memanfaatkan data ini. Contoh:

eslint-css menggunakan paket web-features dalam use-baseline aturannya untuk melakukan linting fitur tertentu.
Kartu infografis di Visual Studio Code menggunakan paket web-features untuk menampilkan informasi Dasar untuk fitur CSS dan fitur HTML.
MDN menggunakan data web-features di banner di sebagian besar halaman fitur (misalnya, abs()) untuk mengomunikasikan status Dasar mereka.

Ada lebih banyak contoh di luar sana tentang cara sumber data ini dapat digunakan untuk membuat alat Dasar Pengukuran—dan kami berharap proyek Anda menjadi salah satunya.

Membuat alat Baseline dengan paket fitur web Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Mulai menggunakan paket web-features

Contoh

Mencari status Dasar untuk fitur tertentu

Mencari status Dasar untuk kunci BCD tertentu

Mengurutkan fitur menurut status Dasarnya

Menemukan semua fitur dalam grup

Menggabungkan semuanya

Contoh dunia nyata

Membuat alat Baseline dengan paket fitur web

Mulai menggunakan paket `web-features`