发布时间：2025 年 3 月 4 日
Baseline 最初由 Chrome 团队提出，现在由 WebDX Community Group 定义。Baseline 旨在清晰传达可在浏览器之间互操作的功能。旨在帮助您了解可以在所有主要浏览器引擎中使用哪些功能，以及无法使用哪些功能。不过，您需要一种方法来确定这些特征。
幸运的是，您可以使用 Web 平台信息中心（由 web-features npm 软件包提供支持）查询哪些功能是“Baseline 新近可用”功能或“Baseline 广泛可用”功能。您还可以使用其 HTTP API 访问此信息，以便将基准数据集成到您的工具工作流中，本指南将介绍具体操作方法。
Web 平台信息中心的相关 Baseline 查询语法
Web 平台信息中心使用特定的查询语法来帮助您搜索 Web 功能支持。您可以直接在信息中心内使用此查询语法。
baseline_status:newly 搜索查询的“Baseline 新近可用”功能。
当您在页面顶部的搜索框中输入内容时，系统会显示一些可用于过滤 Web 功能的查询参数。
查询语法富有表现力，可让您灵活地过滤信息中心内显示的 Web 功能。以下屏幕截图展示了如何使用 id 查询参数缩小范围，以查找特定功能：
id 参数的值为 html，表示支持 <html> 元素，该元素（毫不意外）是基准广泛可用的。
查询语法已记录在案，但您不必了解所有语法即可查找功能的基本数据。您可以在信息中心内使用上述任一选项，但以下选项尤其有用：
baseline_status：使用此参数可按以下三个枚举值过滤功能：limited：返回浏览器支持有限的功能。如果您按此值进行过滤，则只会收到尚未达到任何基准状态的功能。newly：返回“基准”中新推出的功能。widely：返回处于“Baseline 广泛可用”阶段的功能，即已处于 Baseline 阶段至少 30 个月的功能。这些功能可供您放心使用，无需担心浏览器支持或填充问题。
baseline_date：使用YYYY-MM-DD..YYYY-MM-DD格式指定功能达到基准时的上限和下限。例如，如需查找一年内的所有功能，请使用类似2024-01-01..2025-01-01的值。id：指定功能的标识符。这些标识符在 web-features 软件包中定义。例如，Promise.try()的功能条目会映射到 IDpromise-try。group：特征的众多枚举组名称之一。如果您只想查询特定子集的 Web 平台功能，此条件会非常有用。例如，您可以过滤出值为css的 CSS 功能列表。
虽然信息中心前端非常有用，但它基于您可以直接查询的 HTTP API。例如，以下端点用于获取所有新近可用的 Baseline 功能：
https://api.webstatus.dev/v1/features?q=baseline_status:newly
JSON 响应结构
您从 HTTP API 收到的 JSON 响应对于每项功能都具有一致的格式。返回的响应在顶层包含 data 属性。此属性包含所有匹配的功能的数组。虽然这并非 JSON 响应中所有可用字段的详尽列表，但以下字段在基准方面非常有用：
baseline：包含有关给定功能的基准状态的一般信息，具有以下子字段：status：功能的基础状态。值可以是limited、newly或widely。注意：如果status的值为limited，则此子字段将是唯一的子字段。low_date：表示指定功能成为基准新近可用的日期。仅当status为newly或widely时，系统才会显示此字段。high_date：表示指定功能成为“Baseline 广泛可用”功能的日期。仅当status为widely时，此字段才可用。
feature_id：相应功能的 ID。例如，对于 CSS 网格，此值为"grid"。name：功能的格式化名称。在某些情况下，这可能与feature_id类似，但通常有所不同。例如，Promise.try()的feature_id值为"promise-try"，而同一特征的name字段为"Promise.try()"。spec：此字段包含一个名为links的子字段，该子字段是一个指向规范和其他资源的链接数组。
还有其他字段，通常包含以下信息：特定支持的浏览器在哪个版本中实现了相应功能、有关 Web 平台测试的数据，以及您可能关心或不关心的其他内容。
示例查询
现在，您已经简要了解了一些可用的查询参数，接下来可以看看一些示例查询，您可以在工具和脚本中使用这些查询来选择可能对您的工作流程有用的网络状态功能。
获取单个功能的数据
熟悉 API 的一个好方法是从获取单个 Web 功能数据的基本示例开始。
// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');
// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
// Fetch the resource:
const response = await fetch(url);
if (response.ok) {
// Convert the response to JSON:
const { data } = await response.json();
// Log data for each feature to the:
console.log(data);
}
在这种情况下，我们指定了一个值为 grid 的 id 参数，以获取 CSS 网格的功能支持信息，该功能是 Baseline 广泛可用的功能。例如，您可以使用此信息来检测功能的使用情况，并告知用户他们可以在所有现代浏览器引擎中使用该功能，而无需担心支持问题。
不过，这只是一个开始，HTTP API 可以为您做的远不止获取单个功能的数据。
获取所有“Baseline 新近可用”和“Baseline 广泛可用”功能
假设您希望有一个脚本可以提取所有“Baseline 新近可用”或“Baseline 广泛可用”的功能。例如，如果您有一个按一定时间间隔运行的脚本，并且希望获取一个更新后的列表，该列表会随着功能从有限可用状态变为基准状态而发生变化，那么此方法会很有用：
const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
此查询不会获取所有处于“Baseline 新近可用”和“Baseline 广泛可用”阶段的功能，而只会获取前 100 个。如果检索到的功能数量超过此值，则 JSON 响应的顶层会有一个 metadata 字段，其中最多可包含两个子字段：
next_page_token：一个字符串，其中包含可添加到后端GET请求的查询字符串中的令牌。当您使用它并从 webstatus.dev 后端重新提取数据时，它将返回下一批匹配的特征。注意：如果当前查询返回的结果少于 100 个，或者当前查询位于结果集的末尾，则此字段将不可用。total：一个整数，表示当前查询可用的功能总数。
这些字段对于分页很有用。有了它们，我们可以尝试以下代码来获取返回大量数据的查询的所有结果：
async function queryWebStatusDashboard (query, token) {
const urlBase = 'https://api.webstatus.dev/v1/features?q=';
let queryUrl = `${urlBase}${encodeURIComponent(query)}`;
if (token) {
queryUrl += `&page_token=${encodeURIComponent(token)}`;
}
const response = await fetch(queryUrl);
if (response.ok) {
const { data, metadata } = await response.json();
console.log(data);
// See if there's a page token in this query:
if ('next_page_token' in metadata) {
const { next_page_token } = metadata;
queryWebStatusDashboard(query, next_page_token);
} else {
console.log('All results collected');
}
}
}
// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');
获取所有“Baseline 新近可用”CSS 功能
假设您是一位特别关注 CSS 的工程师，并且想知道哪些 CSS 功能会成为“Baseline 新近可用”功能。这是 group 查询值的完美应用场景，以及在查询 webstatus.dev 时如何使用 AND 运算符：
const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
为 group 指定 css 的值时，您可以查询所有“Baseline 新近可用”功能。如果您想扩大范围，将 Baseline 广泛可用的 CSS 功能也纳入其中，可以使用上一个代码示例中的方法，并使用否定运算符进行查询，例如 -baseline_status:limited AND group:css'。
您还可以查询 snapshot 字段，该字段可用于查找属于特定 ECMAScript 功能集的 JavaScript 功能。以下代码会检查属于 ecmascript-2023 快照的所有“Baseline 新近可用”功能：
const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
获取指定日期范围内的所有基准功能
您可以查询 baseline_date 字段，以查找在特定日期范围内成为基准的所有功能：
const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
上述代码示例将查询在 2022 年的任何时间点成为 Baseline 广泛可用的 CSS 功能。baseline_date 的查询语法允许您指定开始日期和结束日期，并以 .. 分隔。
总结
本指南中的查询旨在为您提供一个起点，让您开始尝试如何查询 webstatus.dev 后端。无论有多少可用的查询参数，您都应该能够获得特定于您应用的结果。
了解如何查询 Web 平台信息中心的 HTTP API，有助于您构建可能对工作有用的工具，并随时了解您想在项目中使用的功能是否获得了足够广泛的浏览器支持。这意味着，您可以使用可安全使用的现代浏览器功能来构建 Web 应用，从而获得更愉悦的开发者体验。