### Install browser-compat-data using npm or yarn

Source: https://github.com/mdn/browser-compat-data/blob/main/README.md

Install the package as a node module using either npm or yarn.

```bash
npm install @mdn/browser-compat-data
# ...or...
yarn add @mdn/browser-compat-data
```

--------------------------------

### Constructor Example: ImageData

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/api.md

Represents the ImageData constructor, following the naming convention for constructors.

```json
{
  "api": {
    "ImageData": {
      "__compat": {},
      "ImageData": {
        "__compat": {
          "description": "`ImageData()` constructor",
          "support": {}
        }
      }
    }
  }
}
```

--------------------------------

### Simple Support Statement Example

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md

Shows a basic support statement for Internet Explorer with a single entry.

```json
{
  "support": {
    "ie": { "version_added": "6" }
  }
}
```

--------------------------------

### Specification Extending Another Specification (SVG/CSS Example)

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/spec_links.md

This example demonstrates linking to specifications where SVG and CSS both define a property.

```text
- https://drafts.csswg.org/css-inline/#baseline-shift-property
- https://w3c.github.io/svgwg/svg2-draft/text.html#BaselineShiftProperty
```

--------------------------------

### Mirroring Data Example

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md

Illustrates how to use the 'mirror' string to indicate that support data should be inherited from an upstream browser.

```json
{
  "support": {
    "chrome": {
      "version_added": "66"
    },
    "chrome_android": "mirror" 
  }
}
```

--------------------------------

### Simple Support Statement: Version Added (Preview)

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/public.schema.md

Indicates support starting from a preview or beta release using 'version_added'.

```json
{
  "version_added": "preview"
}
```

--------------------------------

### Full __compat Object Example

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md

Demonstrates a complete __compat object with all common properties and various support statement formats for a specific API feature.

```jsonc
{
  "api": {
    "Document": {
      "fake_event": {
        // ↓↓↓↓↓↓
        "__compat": {
          "description": "`fake` event", // A friendly description of the feature
          "mdn_url": "https://developer.mozilla.org/docs/Web/API/Document/fake_event", // The associated MDN article
          "spec_url": [
            // The spec URL(s) for the feature if applicable, may be one or many
            "https://example.com/a-fake-spec#fake-event",
            "https://example.com/a-fake-spec#onfake",
          ],
          "support": {
            // The support data for each browser
            "chrome": {
              // Supported since Chrome 57 on
              "version_added": "57",
            },
            "chrome_android": "mirror", // Mirrors from the upstream browser -- in this case, it is Chrome Desktop, so the data becomes "57"
            "edge": {
              // Supported since Edge 12, with a note about a difference in behavior
              "version_added": "12",
              "notes": "Before Edge 79, the event interface included additional proprietary properties.",
            },
            "firefox": {
              // Added in Firefox 59, then removed in Firefox 80 (AKA supported from 59 until 79)
              "version_added": "59",
              "version_removed": "80",
            },
            "firefox_android": {
              // Support is known to be in at least Firefox Android 50, but it could have been added earlier
              "version_added": "≤50",
            },
            "ie": {
              // Supported since IE 10, but has a caveat that impacts compatibility
              "version_added": "10",
              "partial_implementation": true,
              "notes": "The `onfake` event handler property is not supported.",
            },
            "oculus": "mirror",
            "opera": {
              // Not supported at all in Opera
              "version_added": false,
            },
            "opera_android": "mirror",
            "safari": [
              // A support statement can be an array of multiple statements to better describe the compatibility story
              {
                "version_added": "13", // Supported since Safari 13...
              },
              {
                "version_added": "10.1", // ...but also supported since Safari 10.1 with the "webkit" prefix (AKA "webkitfake")...
                "prefix": "webkit",
              },
              {
                "version_added": "4", // ...and supported between Safari 4 (inclusive) and 10.1 (exclusive) as "webkitnonreal"
                "version_removed": "10.1",
                "alternative_name": "webkitnonreal",
              },
            ],
            "safari_ios": "mirror",
            "samsunginternet_android": "mirror",
            "webview_android": "mirror",
            // If a browser is not defined, it means we don't have support information for that browser (or for web extensions, the browser has no support at all)
          },
          "status": {
            // Standards track, deprecation and experimental status
            "experimental": false,
            "standard_track": true,
            "deprecated": false,
          },
        },
      },
    },
  },
}
```

--------------------------------

### Global API Example: fetch

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/api.md

Represents the global fetch API, including its support in workers.

```json
{
  "api": {
    "fetch": {
      "__compat": {},
      "worker_support": {
        "__compat": {
          "description": "Available in workers",
          "support": {}
        }
      }
    }
  }
}
```

--------------------------------

### Array Support Statement Example

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md

Demonstrates a support statement for Firefox with multiple entries, including a prefixed version.

```json
{
  "support": {
    "firefox": [
      {
        "version_added": "6"
      },
      {
        "prefix": "-moz-",
        "version_added": "3.5",
        "version_removed": "9"
      }
    ]
  }
}
```

--------------------------------

### NavigatorPlugins Properties

Source: https://github.com/mdn/browser-compat-data/wiki/Features‐in‐less‐than‐two‐engines

Provides information about installed plugins and Java support.

```APIDOC
## NavigatorPlugins

### Description
Provides information about installed plugins and Java support.

### Properties
- **javaEnabled()**: Returns true if Java is enabled, false otherwise.
- **mimeTypes**: Returns a list of MIME types supported by the browser's plugins.
- **plugins**: Returns a list of installed browser plugins.
```

--------------------------------

### Array Support Statement Example

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/public.schema.md

Demonstrates a support object with an array containing two simple support statements for Firefox.

```json
"support": {
  "firefox": [
    {
      "version_added": "6"
    },
    {
      "prefix": "-moz-",
      "version_added": "3.5",
      "version_removed": "9",
      "version_last": "8"
    }
  ]
}
```

--------------------------------

### Version Removed Example

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/compat-data-schema.md

Shows how to specify the version in which a feature was removed, indicating a period of support.

```json
{
  "version_added": "4",
  "version_removed": "10"
}
```

--------------------------------

### Single Support Statement Example

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/public.schema.md

Shows a support object with a single simple support statement for Internet Explorer, omitting the array.

```json
"support": {
  "ie": { "version_added": "6" }
}
```

--------------------------------

### Traverse Script Output Example

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/tags.md

The output from the 'traverse' script, showing BCD paths and the count of features for a given tag.

```text
api.IdleDetector
api.IdleDetector.IdleDetector
api.IdleDetector.change_event
api.IdleDetector.requestPermission_static
api.IdleDetector.screenState
api.IdleDetector.start
api.IdleDetector.userState
http.headers.Permissions-Policy.idle-detection
8
```

--------------------------------

### Example BCD Tags Property

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/tags.md

An example of how the 'tags' property can be structured within BCD. Tags are an array of strings, each containing a namespaced name.

```json
"tags": [
  "web-features:idle-detection"
],
```

--------------------------------

### Simple Support Statement: Version Added (Range)

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/public.schema.md

Shows how to specify support from a version up to a certain release using 'version_added'.

```json
{
  "version_added": "≤79"
}
```

--------------------------------

### Import BCD using ES Modules

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/browsers-schema.md

Demonstrates how to import the Browser Compat Data using ES module syntax. Accesses the status of a specific Firefox release.

```javascript
import bcd from '@mdn/browser-compat-data';
bcd.browsers.firefox.releases['1.5'].status; // "retired"
```

--------------------------------

### Simple Support Statement: Version Added

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/public.schema.md

Illustrates the mandatory 'version_added' property, indicating support from a specific version.

```json
{
  "version_added": "3.5"
}
```

--------------------------------

### Permissions API Example: geolocation

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/api.md

Represents the geolocation permission within the Permissions API, using the _permissionname_permission naming convention.

```json
{
  "api": {
    "Permissions": {
      "__compat": { ... },
      "geolocation_permission": {
        "__compat": {
          "description": "`geolocation` permission",
          "support": { ... }
        }
      }
    }
  }
}
```

--------------------------------

### DOM Event Example: focus on Element

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/api.md

Represents the focus event for the Element interface, using the _eventname_event naming convention.

```json
{
  "api": {
    "Element": {
      "__compat": {},
      "focus_event": {
        "__compat": {
          "description": "`focus` event",
          "support": {}
        }
      }
    }
  }
}
```

--------------------------------

### Utils Compat Data Package

Source: https://github.com/mdn/browser-compat-data/blob/main/README.md

This refers to the `@hint/utils-compat-data` package used by webhint.io to check CSS and HTML for unsupported features.

```javascript
packages/utils-compat-data
```

--------------------------------

### Specification Extending Another Specification

Source: https://github.com/mdn/browser-compat-data/blob/main/docs/data-guidelines/spec_links.md

When a specification extends another, list URLs for both. This example shows ECMA 262 extended by ECMA 402.

```text
- https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-date.prototype.tolocaledatestring
- https://tc39.es/ecma402/#sup-date.prototype.tolocaledatestring
```

--------------------------------

### Simple Support Statement: Version Last

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/public.schema.md

Demonstrates the 'version_last' property, indicating the final version supporting a feature before removal.

```json
{
  "version_added": "20",
  "version_removed": "30",
  "version_last": "29"
}
```

--------------------------------

### Import BCD using CommonJS

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/browsers-schema.md

Shows how to import the Browser Compat Data using CommonJS syntax. Retrieves the status for a Firefox release.

```javascript
const bcd = require('@mdn/browser-compat-data');
bcd.browsers.firefox.releases['1.5'].status;
// "retired"
```

--------------------------------

### Example of Published data.json Structure

Source: https://github.com/mdn/browser-compat-data/blob/main/schemas/public.schema.md

A simplified JSON object illustrating the overall structure of the published data.json file, including metadata, browser definitions, and feature compatibility data.

```json
{
  "__meta": {
    "version": "6.0.0",
    "timestamp": "2024-01-15T00:00:00.000Z"
  },
  "browsers": {
    "firefox": {
      "name": "Firefox",
      "type": "desktop",
      "preview_name": "Nightly",
      "pref_url": "about:config",
      "accepts_flags": true,
      "accepts_webextensions": true,
      "releases": {
        "1.5": {
          "release_date": "2005-11-29",
          "release_notes": "https://developer.mozilla.org/Firefox/Releases/1.5",
          "status": "retired",
          "engine": "Gecko",
          "engine_version": "1.8"
        }
      }
    }
  },
  "api": {
    "AbortController": {
      "__compat": {
        "source_file": "api/AbortController.json",
        "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController",
        "spec_url": "https://dom.spec.whatwg.org/#interface-abortcontroller",
        "support": {
          "chrome": { "version_added": "66" },
          "firefox": { "version_added": "57" }
        },
        "status": {
          "experimental": false,
          "standard_track": true,
          "deprecated": false
        }
      }
    }
  },
  "css": {},
  "html": {},
  "http": {},
  "javascript": {},
  "manifests": {},
  "mathml": {},
  "mediatypes": {},
  "svg": {},
  "webassembly": {},
  "webdriver": {},
  "webextensions": {}
}
```