Using the following features is discouraged, even if they're still implemented in browsers, because standards bodies and/or browser implementers have agreed that they should not be used.
12 |
13 |
14 | {% for feature in allFeatures %}
15 | {% if feature.discouraged %}
16 |
Origin trials let you try experimental features on your production website and give feedback to browser vendors. This feature currently has the following origin trials available:
The following features are missing from just one browser engine.
12 | This view shows the most recently updated features first. To see the features that have been blocked for the longest time first, see Features missing in just one browser engine (oldest first).
13 |
14 |
15 | {% for feature in missingOneBrowserFeatures %}
16 |
17 | {% include "feature_short.njk" %}
18 |
19 | {% endfor %}
20 |
21 |
22 |
--------------------------------------------------------------------------------
/site/one-missing-engine-oldest.njk:
--------------------------------------------------------------------------------
1 | ---
2 | title: Features missing in just one browser engine (oldest first)
3 | layout: layout.njk
4 | ---
5 |
6 |
7 | {% include "feature_list_views.njk" %}
8 |
9 |
{{ title }}
10 |
11 |
The following features are missing from just one browser engine.
12 | This view shows the features that have been blocked for the longest time first. To see the most recently updated features first, see Features missing in just one browser engine.
13 |
14 |
15 | {% for feature in missingOneBrowserFeatures | reverse %}
16 |
These features are not yet available across all browsers.
12 |
Consider the browser support data below as well as your users' browser versions before using these features in production. Provide your essential content and functionality to as many users as possible by using progressive enhancements.
13 |
14 |
15 | {% for feature in limitedAvailabilityFeatures %}
16 |
17 | {% include "feature_short.njk" %}
18 |
19 | {% endfor %}
20 |
21 |
22 |
--------------------------------------------------------------------------------
/additional-data/scripts/update-wpt.js:
--------------------------------------------------------------------------------
1 | import fs from "fs/promises";
2 | import path from "path";
3 |
4 | const INPUT_URL = "https://raw.githubusercontent.com/captainbrosset/wpt-to-web-features/refs/heads/main/wpt-web-features.json";
5 | const OUTPUT_FILE = path.join(import.meta.dirname, "../wpt.json");
6 |
7 | async function main() {
8 | // Fetch the input data.
9 | console.log(`Fetching data from ${INPUT_URL}`);
10 | const response = await fetch(INPUT_URL);
11 | if (!response.ok) {
12 | throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
13 | }
14 | const data = await response.json();
15 |
16 | // We only care about the keys.
17 | const webFeaturesThatHaveWPTs = Object.keys(data);
18 |
19 | // Write the data to the output file.
20 | console.log(`Writing the data to ${OUTPUT_FILE}`);
21 | await fs.writeFile(OUTPUT_FILE, JSON.stringify(webFeaturesThatHaveWPTs, null, 2));
22 | }
23 |
24 | main();
25 |
--------------------------------------------------------------------------------
/site/_includes/feature_list_views.njk:
--------------------------------------------------------------------------------
1 |
17 | {% else %}
18 | No MDN documentation found.
19 | {% if not feature.discouraged %}
20 | You can search for the feature on MDN. If you believe that MDN has no documentation about this feature, you can open an issue on MDN's GitHub repository.
21 | {% endif %}
22 | {% endif %}
23 |
These features recently became available across all browsers, making them Baseline newly available. To learn more, see Baseline.
12 |
Consider the browser support data below as well as your users' browser versions before using these features in production. Provide your essential content and functionality to as many users as possible by using progressive enhancements.
13 |
14 |
15 | {% for feature in newlyAvailableFeatures %}
16 |
The Web platform features explorer website is a project from the W3C WebDX Community Group (WebDX CG). Its goal is to provide a visualization of the data from the web-features repository, which the WebDX CG maintains.
10 |
11 |
In addition to displaying the web-features data, this website also links the data to other resources, such as browser-compat-data, MDN documentation, specifications, vendor positions, origin trials, and more.
12 |
13 |
The website also displays Baseline information for each web feature. To learn more about Baseline, see What is Baseline?.
Here are a few other pages on this website that might be of interest. They are not in the top-level navigation menu because they are either work in progress or just experiments.
20 |
21 |
bcd-mapping: the list of unmapped BCD keys, and % of completion.
22 |
browse: a directory of the features, organized by web development tasks.
23 |
groups: a directory of the features, organized by web-feature groups.
24 |
ids: the list of all features, with their IDs, and BCD keys, to help find existing features.
25 |
timeline: experimental timeline showing the number of baseline features over time.
32 |
33 |
86 |
87 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Web platform features explorer
2 |
3 | The web platform features explorer website visualizes the web platform data that's maintained in the [web-platform-dx/web-features](https://github.com/web-platform-dx/web-features/) repository.
4 |
5 | View the live website at https://web-platform-dx.github.io/web-features-explorer/.
6 |
7 | ## Goals of the website
8 |
9 | * To test and visualize the data that's in the web-features repo.
10 | * To connect the data to other relevant sources of information about web features.
11 | * To provide web developers with useful ways to stay up to date with the web and explore features.
12 |
13 | ## Architecture
14 |
15 | ### Data
16 |
17 | The data that the website is based on comes from the [web-features](https://www.npmjs.com/package/web-features) NPM package. The site uses the **next** version if the package, which provide the data from the latest commit on the web-features repo.
18 |
19 | In addition, the site uses the [@mdn/browser-compat-data](https://www.npmjs.com/package/browser-compat-data) NPM package to get various other pieces of information, such as links to MDN documentation and links to bug trackers.
20 |
21 | ### Pages
22 |
23 | The web pages are built by using the [Eleventy static site generator](https://www.11ty.dev/).
24 |
25 | ## Local development
26 |
27 | To run the website locally, clone the repository, make sure the dependencies are updated, and then build the site.
28 |
29 | ### Update the dependencies
30 |
31 | To ensure you have the latest data:
32 |
33 | 1. Run `npx npm-check-updates -u`
34 |
35 | 1. Run `npm update web-features`
36 |
37 | 1. `npm install`
38 |
39 | ### Build the site
40 |
41 | To build the site:
42 |
43 | 1. Run `npm run build` to generate the site
44 |
45 | 1. Check the `docs` folder for the resulting build files.
46 |
47 | The source template files used to build the site are in the `site` folder.
48 |
49 | ### Run and edit the site locally
50 |
51 | To run the website on a local development server:
52 |
53 | 1. Run `npm run serve`.
54 |
55 | 1. Open a web browser and go to `http://localhost:8080`.
56 |
57 | 1. Modify a source file, wait for the build to run automatically, and for the changes to appear in the browser.
58 |
59 | ## Production environment
60 |
61 | The website is deployed to production using [GitHub Pages](https://pages.github.com/). The static HTML pages are generated in the [gh-pages branch](https://github.com/web-platform-dx/web-features-explorer/tree/gh-pages) on a regular basis by the GitHub Actions script found in `.github/workflows/generate-site.yaml`.
62 |
63 | The dependencies are also automatically updated every day by using the GitHub Actions script in `.github/workflows/bump-deps.yaml`.
64 |
--------------------------------------------------------------------------------
/site/monthly-updates.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layout.njk
3 | pagination:
4 | data: perMonth
5 | size: 1
6 | alias: month
7 | permalink: "release-notes/{{ month.date | slugify }}/"
8 | eleventyComputed:
9 | title: "{{ month.date }} release notes"
10 | ---
11 |
12 |
13 |
25 | {% include "baseline.njk" %}
26 | {% if feature.expectedBaselineHighDate %}
27 |
This feature is expected to reach Baseline Widely Available status on: {{ feature.expectedBaselineHighDate }}
28 | {% endif %}
29 | {% if not feature.status.baseline and feature.hasNegativeStandardPosition %}
30 |
This feature received a negative standards position from at least one browser vendor. It's very unlikely to ever become Baseline in this current form.
31 | {% endif %}
32 |
33 |
34 | {% include "docs.njk" %}
35 |
36 | {% include "specs.njk" %}
37 |
38 |
78 | {% endif %}
79 | {% endfor %}
80 |
81 | ]]>
82 |
83 | {%- endif %}
84 | {%- endfor %}
85 |
86 |
--------------------------------------------------------------------------------
/additional-data/scripts/update-origin-trials.js:
--------------------------------------------------------------------------------
1 | // This script updates the origin-trials.json file with the latest Chrome Origin Trials data.
2 |
3 | // The format of the origin-trials.json file is the following: top-level keys are web-features IDs,
4 | // their values are arrays.
5 | // {
6 | // "": []
7 | // }
8 | // The array for a feature is empty if there aren't any known origin trials for the feature.
9 | // Each known feature origin trial is an object as follows:
10 | // {
11 | // "browser": "",
12 | // "name": "",
13 | // "start": "",
14 | // "end": "",
15 | // "feedbackUrl": "",
16 | // "registrationUrl": ""
17 | // }
18 |
19 | // For Chrome, the script fetches the latest Chrome Origin Trials data by using the chromestatus.com
20 | // API, and updates the origin-trials.json file by mapping spec URLs between the features and the
21 | // OT.
22 |
23 | // Other browsers are not supported yet.
24 | // For Edge, see https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/trials
25 | // For Firefox, see https://wiki.mozilla.org/Origin_Trials
26 |
27 | import { features } from "web-features";
28 | import fs from "fs/promises";
29 | import trials from "../origin-trials.json" with { type: "json" };
30 | import path from "path";
31 |
32 | const OUTPUT_FILE = path.join(import.meta.dirname, "../origin-trials.json");
33 |
34 | async function getChromeAPIData(url) {
35 | const response = await fetch(url);
36 | const text = await response.text();
37 |
38 | if (text.startsWith(")]}'")) {
39 | return JSON.parse(text.substring(5));
40 | }
41 | return null;
42 | }
43 |
44 | async function getChromeOTs() {
45 | console.log("Retrieving all Chrome Origin Trials...");
46 | const chromeOTsData = await getChromeAPIData("https://chromestatus.com/api/v0/origintrials");
47 |
48 | const ots = [];
49 |
50 | if (chromeOTsData) {
51 | // For each OT in the fetched data.
52 | for (const ot of chromeOTsData.origin_trials) {
53 | // Check if the OT is still current.
54 | if (ot.status !== "ACTIVE") {
55 | continue;
56 | }
57 |
58 | // For each active OT, let's retrieve more data from chromestatus.
59 | const chromeStatusUrl = ot.chromestatus_url;
60 | const chromeStatusId = chromeStatusUrl.substring(chromeStatusUrl.lastIndexOf("/") + 1);
61 | console.log(`Retrieving the spec URL for Chrome OT ${ot.display_name}...`);
62 | const chromeStatusData = await getChromeAPIData(`https://chromestatus.com/api/v0/features/${chromeStatusId}`)
63 | if (!chromeStatusData) {
64 | continue;
65 | }
66 |
67 | ot.spec = chromeStatusData.spec_link;
68 | ots.push(ot);
69 | }
70 | }
71 |
72 | return ots;
73 | }
74 |
75 | function findChromeOTForFeature(featureId, chromeOTs) {
76 | const feature = features[featureId];
77 | const specs = Array.isArray(feature.spec) ? feature.spec : [feature.spec];
78 |
79 | for (const ot of chromeOTs) {
80 | // Currently, we match features to OTs by spec URL.
81 | // Later, it would be great if chromestatus entries had a mapping to web-feature IDs.
82 | if (specs.some(spec => spec === ot.spec)) {
83 | return {
84 | browser: "Chrome",
85 | name: ot.display_name,
86 | start: ot.start_milestone,
87 | end: ot.end_milestone,
88 | feedbackUrl: ot.feedback_url,
89 | registrationUrl: `https://developer.chrome.com/origintrials/#/register_trial/${ot.id}`
90 | };
91 | }
92 | }
93 | return null;
94 | }
95 |
96 | async function main() {
97 | // Reset the trials data.
98 | // This makes sure we have the latest features, and that old and new trials are
99 | // removed and added.
100 | for (const id in features) {
101 | trials[id] = [];
102 | }
103 |
104 | const chromeOTs = await getChromeOTs();
105 |
106 | for (const featureId in trials) {
107 | // We only support Chrome for now.
108 | const chromeOT = findChromeOTForFeature(featureId, chromeOTs);
109 | if (chromeOT) {
110 | console.log(`Adding Chrome Origin Trial for feature ${featureId}: ${chromeOT.name}`);
111 | trials[featureId].push(chromeOT);
112 | }
113 | }
114 |
115 | // Sort the trials by ID.
116 | const ordered = {};
117 | Object.keys(trials)
118 | .sort()
119 | .forEach(function (id) {
120 | ordered[id] = trials[id];
121 | });
122 |
123 | // Store the updated trials back in the file.
124 | await fs.writeFile(OUTPUT_FILE, JSON.stringify(ordered, null, 2));
125 | }
126 |
127 | main();
128 |
--------------------------------------------------------------------------------
/additional-data/scripts/update-state-of.js:
--------------------------------------------------------------------------------
1 | import fs from "fs/promises";
2 | import path from "path";
3 | import { execSync } from "child_process";
4 | import { glob } from 'glob';
5 | import { fileURLToPath } from 'url';
6 |
7 | const __dirname = path.dirname(fileURLToPath(import.meta.url));
8 |
9 | const REPO = "https://github.com/Devographics/surveys";
10 | const TEMP_FOLDER = "surveys";
11 | const OUTPUT_FILE = path.join(import.meta.dirname, "../state-of-surveys.json");
12 | const SURVEYS_TO_INCLUDE = ["state_of_css", "state_of_html", "state_of_js"];
13 | const SURVEY_DOMAINS = {
14 | state_of_css: "stateofcss.com/en-US",
15 | state_of_html: "stateofhtml.com/en-US",
16 | state_of_js: "stateofjs.com/en-US",
17 | };
18 | const SURVEY_NAMES = {
19 | state_of_css: "State of CSS",
20 | state_of_html: "State of HTML",
21 | state_of_js: "State of JS",
22 | };
23 |
24 | function extractWebFeatureReferences(data) {
25 | const webFeatureRefs = [];
26 |
27 | function walk(object, objectPath = []) {
28 | if (!object) {
29 | return;
30 | }
31 |
32 | if (Array.isArray(object)) {
33 | for (let i = 0; i < object.length; i++) {
34 | walk(object[i], [...objectPath, i]);
35 | }
36 | return;
37 | }
38 |
39 | if (typeof object !== "object") {
40 | return;
41 | }
42 |
43 | if (object.webFeature) {
44 | webFeatureRefs.push({ objectPath, object });
45 | }
46 |
47 | for (const key in object) {
48 | walk(object[key], [...objectPath, key]);
49 | }
50 | }
51 |
52 | walk(data);
53 |
54 | return webFeatureRefs;
55 | }
56 |
57 | function extractSurveyTitleAndLink(path) {
58 | const survey = path[2];
59 | const edition = path[3];
60 | const year = edition.slice(-4);
61 | const question = path[4];
62 | const subQuestion = path[5];
63 |
64 | let link = `https://${year}.${SURVEY_DOMAINS[survey]}/${question}/#${subQuestion}`
65 |
66 | // Some quirks of State of surveys.
67 | link = link.replace("reading_list/reading_list", "features/reading_list");
68 | link = link.replace("/reading_list/#reading_list", "/features/#reading_list");
69 | link = link.replace("en-US/web_components/", "en-US/features/web_components/");
70 | link = link.replace("en-US/mobile_web_apps", "en-US/features/mobile-web-apps");
71 | link = link.replace("/interactivity", "/features/interactivity");
72 |
73 | if (survey in SURVEY_DOMAINS) {
74 | return {
75 | name: `${SURVEY_NAMES[survey]} ${year}`,
76 | link,
77 | question,
78 | subQuestion,
79 | };
80 | }
81 |
82 | return null;
83 | }
84 |
85 | async function main() {
86 | // Create a temp folder for the survey data.
87 | console.log(`Creating temporary folder`);
88 | const tempFolder = path.join(__dirname, TEMP_FOLDER);
89 | await fs.mkdir(tempFolder, { recursive: true });
90 |
91 | // Clone the surveys repo.
92 | console.log(`Cloning ${REPO} into ${tempFolder}`);
93 | execSync(`git clone --depth 1 ${REPO} ${tempFolder}`);
94 |
95 | // Find all of the *.json files in sub-folders using glob.
96 | console.log(`Searching for JSON files in ${tempFolder}`);
97 | const files = glob.sync(`${tempFolder}/**/*.json`);
98 |
99 | const features = {};
100 | for (const file of files) {
101 | if (!SURVEYS_TO_INCLUDE.some((survey) => file.includes(survey))) {
102 | continue;
103 | }
104 |
105 | let data = null;
106 |
107 | console.log(`Reading ${file}`);
108 | try {
109 | const content = await fs.readFile(file, "utf-8");
110 | data = JSON.parse(content);
111 | } catch (e) {
112 | console.error(`Error reading ${file}: ${e.message}`);
113 | continue;
114 | }
115 |
116 | console.log(`Extracting web feature references from ${file}`);
117 | const refs = extractWebFeatureReferences(data);
118 | for (const ref of refs) {
119 | const { objectPath, object } = ref;
120 | const { name, link, question, subQuestion } = extractSurveyTitleAndLink(objectPath);
121 | const featureId = object.webFeature.id;
122 |
123 | if (!features[featureId]) {
124 | features[featureId] = [];
125 | }
126 |
127 | // Find if there's already a reference to the exact same survey link.
128 | if (features[featureId].some((ref) => ref.link === link)) {
129 | continue;
130 | }
131 |
132 | features[featureId].push({ name, link, question, subQuestion, path: objectPath.join(".") });
133 | }
134 | }
135 |
136 | console.log("------------------");
137 | console.log("Web feature references found in the survey data:");
138 | console.log(features);
139 |
140 | // Delete the folder.
141 | console.log(`Deleting temporary folder ${tempFolder}`);
142 | await fs.rm(tempFolder, { recursive: true });
143 |
144 | // Write the data to the output file.
145 | console.log(`Writing the data to ${OUTPUT_FILE}`);
146 | await fs.writeFile(OUTPUT_FILE, JSON.stringify(features, null, 2));
147 | }
148 |
149 | main();
150 |
--------------------------------------------------------------------------------
/additional-data/scripts/update-use-counters.js:
--------------------------------------------------------------------------------
1 | // This script updates the use-counters.json file with the latest usage data about web features.
2 |
3 | // The use-counters.json file is structured as follows.
4 | //
5 | // Top-level keys are web-features IDs, and their values are objects with ...
6 | // {
7 | // "": {
8 | // ...
9 | // }
10 | // }
11 | //
12 |
13 | import { features } from "web-features";
14 | import fs from "fs/promises";
15 | import useCounters from "../use-counters.json" with { type: "json" };
16 | import path from "path";
17 |
18 | const OUTPUT_FILE = path.join(import.meta.dirname, "../use-counters.json");
19 |
20 | // UC names can be derived from web-feature IDs, but not the other way around.
21 | // The chromestatus API we use to get the list of use-counters returns UC names.
22 | // So, this function first converts all web-feature IDs to expected UC names,
23 | // and then reverses the map. This way, when we query the API, we can lookup
24 | // the UC names the API returns and get the web-feature IDs from them.
25 | let UCNAMES_TO_WFIDS = {};
26 | function prepareUseCounterMapping() {
27 | // See the rule which Chromium uses at:
28 | // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/mojom/use_counter/metrics/webdx_feature.mojom;l=35-47;drc=af140c76c416302ecadb5e7cf3f989d6293ba5ec
29 | // In short, uppercase the first letter in each sequence of letters and remove hyphens.
30 | Object.keys(features).forEach(id => {
31 | const expectedUCName = id
32 | .replace(/[a-z]+/g, (m) => m[0].toUpperCase() + m.substring(1))
33 | .replaceAll("-", "");
34 | UCNAMES_TO_WFIDS[expectedUCName] = id;
35 | });
36 | }
37 | prepareUseCounterMapping();
38 |
39 | async function getWebFeaturesThatMapToUseCounters() {
40 | // Get the latest chromium source file which contains all use counters.
41 | const response = await fetch("https://raw.githubusercontent.com/chromium/chromium/refs/heads/main/third_party/blink/public/mojom/use_counter/metrics/webdx_feature.mojom");
42 | const sourceText = await response.text();
43 |
44 | // Parse the source text to extract all use counters.
45 | // The lines that we are interested in look like this:
46 | // kSomeUseCounterName = number,
47 | const useCounterLines = sourceText.match(/k([A-Z][a-zA-Z0-9_]+) = (\d+),\n/g);
48 | if (!useCounterLines) {
49 | throw new Error("Failed to parse use counters from the source file.");
50 | }
51 |
52 | const ret = {};
53 |
54 | for (const line of useCounterLines) {
55 | // Extract the use counter ID and name from the line.
56 | const match = line.match(/k([A-Z][a-zA-Z0-9_]+) = (\d+),/);
57 | if (!match) {
58 | console.warn(`Failed to parse line: ${line}`);
59 | continue;
60 | }
61 | const ucName = match[1];
62 | const ucId = parseInt(match[2], 10);
63 |
64 | // Some useCounters are drafts. This happens when the
65 | // corresponding web-feature is not yet in web-features.
66 | // In theory, we ignore them, but we also check if there
67 | // is a feature by that name anyway.
68 | if (ucName.startsWith("DRAFT_")) {
69 | // Check, just in case, if the feature is now in web-features.
70 | const wfid = UCNAMES_TO_WFIDS[ucName.replace("DRAFT_", "")];
71 | if (features[wfid]) {
72 | console.warn(
73 | `Use-counter ${ucName} is a draft, but the feature ${wfid} exists in web-features.`
74 | );
75 | }
76 |
77 | console.log(`Ignoring use-counter: ${ucName} since it's a draft.`);
78 | continue;
79 | }
80 |
81 | // Some useCounters are obsolete. We ignore them.
82 | if (ucName.startsWith("OBSOLETE_")) {
83 | console.log(`Ignoring use-counter: ${ucName} since it's an obsolete counter.`);
84 | continue;
85 | }
86 |
87 | const webFeatureId = UCNAMES_TO_WFIDS[ucName];
88 | if (!webFeatureId) {
89 | console.warn(`No web-feature ID found for use-counter: ${ucName}`);
90 | continue;
91 | }
92 |
93 | ret[webFeatureId] = { ucId, ucName };
94 | }
95 |
96 | return ret;
97 | }
98 |
99 | async function getFeatureUsageInPercentageOfPageLoads(ucId) {
100 | const response = await fetch(`https://chromestatus.com/data/timeline/webfeaturepopularity?bucket_id=${ucId}`);
101 | const data = await response.json();
102 | // The API returns data for a few months, but it seems like the older the data, the less granular it is.
103 | // We don't care much for historical data here, so just return the last day.
104 | return data.length ? data[data.length - 1].day_percentage : null;
105 | }
106 |
107 | async function main() {
108 | // First, add any missing feature IDs to the useCounters object.
109 | for (const id in features) {
110 | if (!useCounters[id]) {
111 | useCounters[id] = {};
112 | }
113 | }
114 |
115 | // Now find the use-counters that map to web-features.
116 | const wfToUcMapping = await getWebFeaturesThatMapToUseCounters();
117 |
118 | // For each, get the usage stats.
119 | for (const wfId in wfToUcMapping) {
120 | console.log(`Getting usage for ${wfId}...`);
121 | const { ucId } = wfToUcMapping[wfId];
122 | const usage = await getFeatureUsageInPercentageOfPageLoads(ucId);
123 | if (usage) {
124 | useCounters[wfId] = {
125 | percentageOfPageLoad: usage,
126 | chromeStatusUrl: `https://chromestatus.com/metrics/webfeature/timeline/popularity/${ucId}`
127 | };
128 | }
129 | }
130 |
131 | // Sort the useCounters by ID.
132 | const ordered = {};
133 | Object.keys(useCounters)
134 | .sort()
135 | .forEach(function (id) {
136 | ordered[id] = useCounters[id];
137 | });
138 |
139 | // Store the updated positions back in the file.
140 | await fs.writeFile(OUTPUT_FILE, JSON.stringify(ordered, null, 2));
141 | }
142 |
143 | main();
144 |
--------------------------------------------------------------------------------
/additional-data/scripts/update-standard-positions.js:
--------------------------------------------------------------------------------
1 | // This script updates the standard-positions.json file with the positions and concerns
2 | // found in the GitHub issues of the vendors that have a URL in the standard-positions.json file.
3 |
4 | // The standard-positions.json file is structured as follows.
5 | //
6 | // Top-level keys are web-features IDs, and their values are objects with two keys: "mozilla" and "webkit":
7 | // {
8 | // "": {
9 | // "mozilla": {}
10 | // "webkit": {}
11 | // }
12 | // }
13 | //
14 | // Each mozilla and webkit object can be one of the following:
15 | // - An empty object, which means that the feature has no vendor URL yet.
16 | // - An object like { "url": "", "position": "", "concerns": [] }, which
17 | // means that the feature has a vendor URL, and the position and concerns might be known.
18 | // - Optionally, the object can contain a "not" key with an array of issue URLs that should be ignored.
19 | // This is useful because we match the feature with the vendor issue by comparing the spec URLs, and
20 | // vendor issues might sometimes be about subparts of a spec that's relevant to another feature.
21 |
22 | // This script is not run automatically yet. Run it manually when you want to update the positions.
23 | // Always check the new position URLs added by the script (for mozilla only for now) to make sure they are correct.
24 | // Add "not" entries if any of the URLs are not relevant to a feature.
25 |
26 | import { features } from "web-features";
27 | import fs from "fs/promises";
28 | import positions from "../standard-positions.json" with { type: "json" };
29 | import path from "path";
30 |
31 | const OUTPUT_FILE = path.join(import.meta.dirname, "../standard-positions.json");
32 | const MOZILLA_DATA_FILE =
33 | "https://raw.githubusercontent.com/mozilla/standards-positions/refs/heads/gh-pages/merged-data.json";
34 | const WEBKIT_DATA_FILE =
35 | "https://raw.githubusercontent.com/WebKit/standards-positions/main/summary.json";
36 |
37 | let mozillaData = null;
38 | let webkitData = null;
39 |
40 | async function getMozillaData() {
41 | if (!mozillaData) {
42 | const response = await fetch(MOZILLA_DATA_FILE);
43 | mozillaData = await response.json();
44 | }
45 |
46 | return mozillaData;
47 | }
48 |
49 | async function getMozillaPosition(url) {
50 | const data = await getMozillaData();
51 |
52 | const issueId = url.split("/").pop();
53 | const issue = data[issueId];
54 | if (!issue) {
55 | return { position: "", concerns: [] };
56 | }
57 |
58 | return {
59 | position: issue.position || "",
60 | concerns: issue.concerns,
61 | };
62 | }
63 |
64 | async function getWebkitData() {
65 | if (!webkitData) {
66 | const response = await fetch(WEBKIT_DATA_FILE);
67 | webkitData = await response.json();
68 | }
69 |
70 | return webkitData;
71 | }
72 |
73 | async function getWebkitPosition(url) {
74 | const data = await getWebkitData();
75 |
76 | for (const position of data) {
77 | if (position.id === url) {
78 | return {
79 | position: position.position || "",
80 | concerns: position.concerns || [],
81 | };
82 | }
83 | }
84 |
85 | return { position: "", concerns: [] };
86 | }
87 |
88 | async function getPosition(company, url) {
89 | switch (company) {
90 | case "webkit":
91 | return await getWebkitPosition(url);
92 | case "mozilla":
93 | return await getMozillaPosition(url);
94 | }
95 | }
96 |
97 | function doesFeatureHaveSpec(feature, url) {
98 | const featureSpecs = Array.isArray(feature.spec)
99 | ? feature.spec
100 | : [feature.spec];
101 | return featureSpecs.some((spec) => spec === url);
102 | }
103 |
104 | async function findNewMozillaURLs() {
105 | // Attempt to find new vendor URLs, by matching on spec URLs.
106 | const mozData = await getMozillaData();
107 |
108 | for (const issueId in mozData) {
109 | const issue = mozData[issueId];
110 | if (!issue.position) {
111 | continue;
112 | }
113 |
114 | // Go over our features, and try to find a match,
115 | // by comparing spec urls.
116 | for (const featureId in features) {
117 | // Skip the features for which we already have the URL.
118 | if (positions[featureId].mozilla.url) {
119 | continue;
120 | }
121 | const matches = doesFeatureHaveSpec(features[featureId], issue.url);
122 | const issueUrl = `https://github.com/mozilla/standards-positions/issues/${issueId}`;
123 | const isWrongIssue =
124 | positions[featureId].mozilla.not &&
125 | positions[featureId].mozilla.not.includes(issueUrl);
126 | if (matches && !isWrongIssue) {
127 | positions[featureId].mozilla.url = issueUrl;
128 | }
129 | }
130 | }
131 | }
132 |
133 | async function findNewWebkitURLs() {
134 | // Attempt to find new vendor URLs, by matching on spec URLs.
135 | const webkitData = await getWebkitData();
136 |
137 | for (const issue of webkitData) {
138 | if (!issue.position) {
139 | continue;
140 | }
141 |
142 | // Go over our features, and try to find a match,
143 | // by comparing spec urls.
144 | for (const featureId in features) {
145 | // Skip the features for which we already have the URL.
146 | if (positions[featureId].webkit.url) {
147 | continue;
148 | }
149 | const matches = doesFeatureHaveSpec(features[featureId], issue.url);
150 | const isWrongIssue =
151 | positions[featureId].webkit.not &&
152 | positions[featureId].webkit.not.includes(issue.id);
153 | if (matches && !isWrongIssue) {
154 | positions[featureId].webkit.url = issue.id;
155 | }
156 | }
157 | }
158 | }
159 |
160 | async function main() {
161 | // First, add any missing feature ID to the positions object.
162 | for (const id in features) {
163 | if (!positions[id]) {
164 | positions[id] = {
165 | mozilla: {},
166 | webkit: {},
167 | };
168 | }
169 | }
170 |
171 | // Try to add new mozilla vendor position urls to web-features.
172 | await findNewMozillaURLs();
173 | // Do the same for webkit.
174 | await findNewWebkitURLs();
175 |
176 | // Finally, update the positions and concerns for the features that have vendor URLs.
177 | for (const featureId in positions) {
178 | for (const company in positions[featureId]) {
179 | if (positions[featureId][company].url) {
180 | console.log(
181 | `Updating position for ${company} in feature ${featureId}...`
182 | );
183 | const data = await getPosition(
184 | company,
185 | positions[featureId][company].url
186 | );
187 | positions[featureId][company].position = data.position;
188 | positions[featureId][company].concerns = data.concerns;
189 | }
190 | }
191 | }
192 |
193 | // Sort the positions by ID.
194 | const ordered = {};
195 | Object.keys(positions)
196 | .sort()
197 | .forEach(function (id) {
198 | ordered[id] = positions[id];
199 | });
200 |
201 | // Store the updated positions back in the file.
202 | await fs.writeFile(OUTPUT_FILE, JSON.stringify(ordered, null, 2));
203 | }
204 |
205 | main();
206 |
--------------------------------------------------------------------------------
/additional-data/interop.json:
--------------------------------------------------------------------------------
1 | {
2 | "2021": {
3 | "interop-2021-aspect-ratio": [
4 | "aspect-ratio"
5 | ],
6 | "interop-2021-flexbox": [
7 | "flexbox"
8 | ],
9 | "interop-2021-grid": [
10 | "grid"
11 | ],
12 | "interop-2021-position-sticky": [
13 | "sticky-positioning"
14 | ],
15 | "interop-2021-transforms": [
16 | "transforms2d",
17 | "transforms3d"
18 | ]
19 | },
20 | "2022": {
21 | "interop-2021-aspect-ratio": [
22 | "aspect-ratio"
23 | ],
24 | "interop-2022-cascade": [
25 | "cascade-layers"
26 | ],
27 | "interop-2022-color": [
28 | "color-mix",
29 | "hsl",
30 | "hwb",
31 | "lab",
32 | "oklab",
33 | "rgb",
34 | "color-function"
35 | ],
36 | "interop-2022-contain": [
37 | "contain",
38 | "contain-layout",
39 | "contain-paint",
40 | "contain-size"
41 | ],
42 | "interop-2022-dialog": [
43 | "dialog"
44 | ],
45 | "interop-2021-flexbox": [
46 | "flexbox"
47 | ],
48 | "interop-2022-forms": [],
49 | "interop-2021-grid": [
50 | "grid"
51 | ],
52 | "interop-2022-scrolling": [
53 | "overscroll-behavior",
54 | "scroll-snap",
55 | "scroll-behavior"
56 | ],
57 | "interop-2021-position-sticky": [
58 | "sticky-positioning"
59 | ],
60 | "interop-2022-subgrid": [
61 | "subgrid"
62 | ],
63 | "interop-2021-transforms": [
64 | "transforms2d",
65 | "transforms3d"
66 | ],
67 | "interop-2022-text": [
68 | "font-variant",
69 | "font-variant-alternates",
70 | "font-variant-caps",
71 | "font-variant-east-asian",
72 | "font-variant-ligatures",
73 | "font-variant-numeric",
74 | "font-variant-position",
75 | "ic"
76 | ],
77 | "interop-2022-viewport": [
78 | "viewport-units"
79 | ],
80 | "interop-2022-webcompat": []
81 | },
82 | "2023": {
83 | "interop-2023-cssborderimage": [
84 | "border-image"
85 | ],
86 | "interop-2023-color": [
87 | "color-mix",
88 | "hsl",
89 | "hwb",
90 | "lab",
91 | "oklab",
92 | "rgb",
93 | "color-function",
94 | "gradient-interpolation"
95 | ],
96 | "interop-2023-container": [
97 | "container-queries"
98 | ],
99 | "interop-2023-contain": [
100 | "contain",
101 | "contain-layout",
102 | "contain-paint",
103 | "contain-size",
104 | "content-visibility",
105 | "contain-intrinsic-size"
106 | ],
107 | "interop-2023-mathfunctions": [
108 | "trig-functions",
109 | "exp-functions"
110 | ],
111 | "interop-2023-pseudos": [
112 | "dir-pseudo",
113 | "nth-child-of",
114 | "user-pseudos"
115 | ],
116 | "interop-2023-property": [
117 | "registered-custom-properties"
118 | ],
119 | "interop-2023-flexbox": [
120 | "flexbox"
121 | ],
122 | "interop-2023-fonts": [
123 | "supports",
124 | "font-palette"
125 | ],
126 | "interop-2023-forms": [],
127 | "interop-2023-grid": [
128 | "grid"
129 | ],
130 | "interop-2023-has": [
131 | "has"
132 | ],
133 | "interop-2023-inert": [
134 | "inert"
135 | ],
136 | "interop-2023-cssmasking": [
137 | "clip-path"
138 | ],
139 | "interop-2023-mediaqueries": [
140 | "media-queries",
141 | "media-query-range-syntax"
142 | ],
143 | "interop-2023-modules": [
144 | "import-maps",
145 | "js-modules-workers"
146 | ],
147 | "interop-2023-motion": [
148 | "motion-path"
149 | ],
150 | "interop-2023-offscreencanvas": [
151 | "offscreen-canvas"
152 | ],
153 | "interop-2023-events": [
154 | "mouse-events",
155 | "pointer-events-api"
156 | ],
157 | "interop-2022-scrolling": [
158 | "overscroll-behavior",
159 | "scroll-snap",
160 | "scroll-behavior"
161 | ],
162 | "interop-2022-subgrid": [
163 | "subgrid"
164 | ],
165 | "interop-2021-transforms": [
166 | "transforms2d",
167 | "transforms3d"
168 | ],
169 | "interop-2023-url": [
170 | "url"
171 | ],
172 | "interop-2023-webcodecs": [
173 | "webcodecs"
174 | ],
175 | "interop-2023-webcompat": [],
176 | "interop-2023-webcomponents": [
177 | "constructed-stylesheets",
178 | "form-associated-custom-elements"
179 | ]
180 | },
181 | "2024": {
182 | "interop-2024-accessibility": [],
183 | "interop-2024-nesting": [
184 | "nesting"
185 | ],
186 | "interop-2023-property": [
187 | "registered-custom-properties"
188 | ],
189 | "interop-2024-dsd": [
190 | "declarative-shadow-dom"
191 | ],
192 | "interop-2024-font-size-adjust": [
193 | "font-size-adjust"
194 | ],
195 | "interop-2024-websockets": [],
196 | "interop-2024-indexeddb": [
197 | "indexeddb"
198 | ],
199 | "interop-2024-layout": [
200 | "flexbox",
201 | "grid",
202 | "subgrid"
203 | ],
204 | "interop-2023-events": [
205 | "mouse-events",
206 | "pointer-events-api"
207 | ],
208 | "interop-2024-popover": [
209 | "popover"
210 | ],
211 | "interop-2024-relative-color": [
212 | "relative-color"
213 | ],
214 | "interop-2024-video-rvfc": [
215 | "request-video-frame-callback"
216 | ],
217 | "interop-2024-scrollbar": [
218 | "scrollbar-gutter",
219 | "scrollbar-width"
220 | ],
221 | "interop-2024-starting-style-transition-behavior": [
222 | "starting-style",
223 | "transition-behavior"
224 | ],
225 | "interop-2024-dir": [],
226 | "interop-2024-text-wrap": [
227 | "text-wrap",
228 | "text-wrap-balance"
229 | ],
230 | "interop-2023-url": [
231 | "url"
232 | ]
233 | },
234 | "2025": {
235 | "interop-2025-backdrop-filter": [
236 | "backdrop-filter"
237 | ],
238 | "interop-2025-core-web-vitals": [
239 | "largest-contentful-paint"
240 | ],
241 | "interop-2025-anchor-positioning": [
242 | "anchor-positioning"
243 | ],
244 | "interop-2025-details": [
245 | "details"
246 | ],
247 | "interop-2024-layout": [
248 | "flexbox",
249 | "grid",
250 | "subgrid"
251 | ],
252 | "interop-2025-modules": [
253 | "json-modules"
254 | ],
255 | "interop-2025-navigation": [
256 | "navigation"
257 | ],
258 | "interop-2023-events": [
259 | "pointer-events-api",
260 | "mouse-events"
261 | ],
262 | "interop-2025-remove-mutation-events": [
263 | "mutation-events"
264 | ],
265 | "interop-2025-scope": [
266 | "scope"
267 | ],
268 | "interop-2025-scrollend": [
269 | "scrollend"
270 | ],
271 | "interop-2025-storageaccess": [
272 | "storage-access"
273 | ],
274 | "interop-2025-textdecoration": [
275 | "text-decoration"
276 | ],
277 | "interop-2025-urlpattern": [
278 | "urlpattern"
279 | ],
280 | "interop-2025-view-transitions": [
281 | "view-transitions",
282 | "view-transition-class"
283 | ],
284 | "interop-2025-webassembly": [
285 | "wasm-string-builtins"
286 | ],
287 | "interop-2025-webcompat": [
288 | "appearance",
289 | "zoom",
290 | "list-style"
291 | ],
292 | "interop-2025-webrtc": [
293 | "webrtc-encoded-transform"
294 | ],
295 | "interop-2025-writingmodes": [
296 | "writing-mode"
297 | ]
298 | }
299 | }
--------------------------------------------------------------------------------
/update-timeline-stats.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Process baseline data from the web-features package to create
3 | * data tables for visualization purpose.
4 | *
5 | * Some notes:
6 | * - Timeline stats do not include features that have not shipped anywhere
7 | * because these aren't associated with any date in web-features (32 features
8 | * as of January 2025).
9 | * - Process drops occurrences of '≤' in dates, because it's hard to deal with
10 | * uncertainties in stats.
11 | */
12 |
13 | import { features, browsers } from "web-features";
14 | import fs from "node:fs/promises";
15 | import path from "node:path";
16 |
17 | const OUTPUT_TIMELINE = path.join(import.meta.dirname, "site", "assets", "timeline-number.json");
18 | const OUTPUT_DURATIONS = path.join(import.meta.dirname, "site", "assets", "timeline-durations.json");
19 | const FIRST_NEWLY_AVAILABLE_YEAR = "2015";
20 |
21 | async function main() {
22 | // Convert features to an array and pretend all dates are exact
23 | const simplifiedFeatures = Object.entries(features)
24 | .map(([id, feature]) => Object.assign({ id }, feature))
25 | .filter(feature => feature.kind === "feature")
26 | .map(feature => {
27 | if (feature.status.baseline_low_date &&
28 | feature.status.baseline_low_date.startsWith("≤")) {
29 | feature.status.baseline_low_date = feature.status.baseline_low_date.slice(1);
30 | feature.simplified = true;
31 | }
32 | if (feature.status.baseline_high_date &&
33 | feature.status.baseline_high_date.startsWith("≤")) {
34 | feature.status.baseline_high_date = feature.status.baseline_high_date.slice(1);
35 | feature.simplified = true;
36 | }
37 | for (const [browser, version] of Object.entries(feature.status.support)) {
38 | if (version.startsWith("≤")) {
39 | feature.status.support[browser] = version.slice(1);
40 | feature.simplified = true;
41 | }
42 | }
43 | return feature;
44 | });
45 |
46 | // Compute first implementation dates and prepare full list of release dates
47 | let dates = new Set();
48 | for (const feature of simplifiedFeatures) {
49 | feature.status.first_implementation_date =
50 | Object.entries(feature.status.support)
51 | .map(([browser, version]) =>
52 | browsers[browser].releases.find(r => r.version === version))
53 | .map(release => release.date)
54 | .sort()
55 | .reverse()
56 | .pop();
57 | if (feature.status.baseline_high_date) {
58 | dates.add(feature.status.baseline_high_date);
59 | }
60 | if (feature.status.baseline_low_date) {
61 | dates.add(feature.status.baseline_low_date);
62 | }
63 | if (feature.status.first_implementation_date) {
64 | dates.add(feature.status.first_implementation_date);
65 | }
66 | }
67 | dates = [...dates].sort();
68 | const years = [...new Set(dates.map(d => d.slice(0, 4)))].sort();
69 |
70 | // Prepare timeline data
71 | let timeline = dates.map(d => Object.assign({
72 | date: d,
73 | high: [],
74 | low: [],
75 | first: []
76 | }));
77 |
78 | // Fill timeline data with features
79 | for (const feature of simplifiedFeatures) {
80 | let status = feature.status.baseline;
81 | if (feature.discouraged) {
82 | status = "discouraged";
83 | }
84 | else if (feature.status.baseline === undefined) {
85 | throw new Error(`${feature.name} (id: ${feature.id}) still has an undefined baseline status!`);
86 | }
87 | else if (!feature.status.baseline) {
88 | status = "limited";
89 | }
90 |
91 | if (feature.status.baseline_high_date) {
92 | timeline
93 | .find(t => t.date === feature.status.baseline_high_date)
94 | .high
95 | .push(feature.id);
96 | }
97 | if (feature.status.baseline_low_date) {
98 | timeline
99 | .find(t => t.date === feature.status.baseline_low_date)
100 | .low
101 | .push(feature.id);
102 | }
103 | if (feature.status.first_implementation_date) {
104 | timeline
105 | .find(t => t.date === feature.status.first_implementation_date)
106 | .first
107 | .push(feature.id);
108 | }
109 | }
110 |
111 | // Each time in the timeline contains features that shipped, became newly
112 | // or widely available, at that time. To visualize the overall growth of
113 | // the platform in terms of number of features over time, let's compile a
114 | // cumulative view.
115 | timeline = timeline.map(getCumul);
116 |
117 | // A feature that is widely available is also newly available.
118 | // A feature that is newly available is also implemented somewhere.
119 | // Let's count features only once
120 | timeline = timeline.map(t => Object.assign({
121 | date: t.date,
122 | high: t.high,
123 | low: t.low - t.high,
124 | first: t.first - t.low
125 | }));
126 |
127 | // Export the result to a JSON file
128 | await fs.writeFile(OUTPUT_TIMELINE, JSON.stringify(timeline, null, 2), "utf8");
129 |
130 | // Compile durations from first implementation to newly available,
131 | // and from newly available to widely available (the latter one is mostly
132 | // un-interesting for now, since it's basically always 30 months).
133 | // Note 2015 durations would not mean much because that is when Edge appears
134 | // and thus when "newly available" starts to mean something.
135 | let durations = compileDurations(simplifiedFeatures, years);
136 | durations = durations
137 | .filter(y => y.year > FIRST_NEWLY_AVAILABLE_YEAR)
138 | .filter(y => y.first2low.length > 0)
139 | .map(y => Object.assign({
140 | year: y.year,
141 | min: y.first2low[0],
142 | q1: getQuantile(y.first2low, 0.25),
143 | median: getQuantile(y.first2low, 0.50),
144 | q3: getQuantile(y.first2low, 0.75),
145 | max: y.first2low[y.first2low.length - 1],
146 | nb: y.first2low.length
147 | }));
148 | await fs.writeFile(OUTPUT_DURATIONS, JSON.stringify(durations, null, 2), "utf8");
149 | }
150 |
151 | main();
152 |
153 |
154 | /**********************************************************
155 | * A few helper functions
156 | **********************************************************/
157 | function getCumul(time, idx, list) {
158 | return {
159 | date: time.date,
160 | high: list.slice(0, idx + 1).reduce((tot, d) => tot + d.high.length, 0),
161 | low: list.slice(0, idx + 1).reduce((tot, d) => tot + d.low.length, 0),
162 | first: list.slice(0, idx + 1).reduce((tot, d) => tot + d.first.length, 0)
163 | };
164 | }
165 |
166 | function compileDurations(features, years) {
167 | const durations = years.map(y => Object.assign({
168 | year: y,
169 | first2low: [],
170 | low2high: []
171 | }));
172 | for (const feature of features) {
173 | if (feature.status.baseline_low_date) {
174 | const year = feature.status.baseline_low_date.slice(0, 4);
175 | const duration = Math.floor(
176 | (new Date(feature.status.baseline_low_date) - new Date(feature.status.first_implementation_date)) / 86400000
177 | );
178 | durations.find(y => y.year === year).first2low.push(duration);
179 | }
180 | if (feature.status.baseline_high_date) {
181 | const year = feature.status.baseline_high_date.slice(0, 4);
182 | const duration = Math.floor(
183 | (new Date(feature.status.baseline_high_date) - new Date(feature.status.baseline_low_date)) / 86400000
184 | );
185 | durations.find(y => y.year === year).low2high.push(duration);
186 | }
187 | }
188 |
189 | for (const year of durations) {
190 | year.first2low.sort((d1, d2) => d1 - d2);
191 | year.low2high.sort((d1, d2) => d1 - d2);
192 | }
193 | return durations;
194 | }
195 |
196 | function getQuantile(arr, q) {
197 | const pos = (arr.length - 1) * q;
198 | const floor = Math.floor(pos);
199 | const rest = pos - floor;
200 | if (arr[floor + 1] !== undefined) {
201 | return arr[floor] + rest * (arr[floor + 1] - arr[floor]);
202 | }
203 | else {
204 | return arr[floor];
205 | }
206 | };
207 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/site/timeline.njk:
--------------------------------------------------------------------------------
1 | ---
2 | title: Web features timeline
3 | layout: layout.njk
4 | ---
5 |
6 |
7 |
8 |
Timeline
9 |
10 |
This page visualizes the evolution of web platform features over time.
11 |
12 |
13 |
Number of web features
14 |
The following chart plots the number of web features over time per Baseline type. Keep in mind that support data in web-features only covers browsers in the core browser set (Chrome, Edge, Firefox, Safari). For example, the graph contains no information about feature support in Internet Explorer (started in 1995).
15 |
16 |
Several dates are highlighted in the chart to ease reading:
17 |
18 |
23 June 2003: First version of Safari and first date in the graph.
19 |
9 November 2004: First version of Firefox.
20 |
11 December 2009: First version of Chrome.
21 |
29 July 2015: First version of Edge (actual version number is 12). By definition, there can be no Baseline Newly Available features before that date.
22 |
29 January 2018: 30 months later. Also by definition, there can be no Baseline Widely Available features before that date.
23 |
15 January 2020: Edge switches to Chromium, creating a surge of Baseline Newly Available features.
24 |
15 July 2022: 30 months later, a corresponding surge of Baseline Widely Available features appears.
Note: Features that have not shipped anywhere are not associated with any date in web-features and do not appear in the chart. As of January 2025, ~30 features (out of 1000+ features) are in that category.
32 |
33 |
Replacing the values with percentages yields the following chart. It shows the evolution of the distribution of features between Baseline Widely Available, Baseline Newly Available, and features available somewhere. how interoperability progresses over time and how the web platform grows. The graph starts on 29 January 2018, when first Baseline Widely Available features appear.
34 |
35 |
36 |
37 |
38 |
39 |
Duration from first implementation to Baseline Newly Available
40 |
The following chart shows the evolution of the duration needed for a feature to go from first implementation available to Baseline Newly Available, from year to year.
41 |
42 |
The chart is a box plot. For each year, it showcases the first quartile, the median and the last quartile (the box), along with the minimum and maximum durations (the whiskers).
Note: ~50 features in web-features have support dates that start with ≤ to indicate that support started before these dates (all of these dates are before mid-2020). This nuance is dropped to compute statistics. This makes features appear later than they should when looking at the evolution of the number of web features, and reduces the duration from first implementation to newly available. Impact should remain minimal.
49 |
50 |
Note: What about going from first implementation to Baseline Widely Available? Given the current definition of widely available, this would yield the same chart with additional ~910 days (30 months) to the durations.
51 |
52 |
53 |
54 |
Web platform features per year
55 |
The following table lists web platform features by years when they reached Baseline Newly Available status.
56 |
57 |
