Code Monkey home page Code Monkey logo

browser-compat-data's Introduction

@mdn/browser-compat-data

https://github.com/mdn/browser-compat-data

The browser-compat-data ("BCD") project contains machine-readable browser (and JavaScript runtime) compatibility data for Web technologies, such as Web APIs, JavaScript features, CSS properties and more. Our goal is to document accurate compatibility data for Web technologies, so web developers may write cross-browser compatible websites easier. BCD is used in web apps and software such as MDN Web Docs, CanIUse, Visual Studio Code, WebStorm and more.

Read how this project is governed.

Chat with us on Matrix at chat.mozilla.org#mdn!

Installation and Import

NodeJS

You can install @mdn/browser-compat-data as a node package.

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

Then, you can import BCD into your project with either import or require():

// ESM with Import Assertions (NodeJS 16+)
import bcd from '@mdn/browser-compat-data' assert { type: 'json' };

// ...or...

// ESM Wrapper for older NodeJS versions (NodeJS v12+)
import bcd from '@mdn/browser-compat-data/forLegacyNode';

// ...or...

// CommonJS Module (Any NodeJS)
const bcd = require('@mdn/browser-compat-data');

Deno/Browsers

You can import @mdn/browser-compat-data using a CDN.

import bcd from 'https://unpkg.com/@mdn/browser-compat-data' assert { type: 'json' };

Other Languages

You can obtain the raw compatibility data for @mdn/browser-compat-data using a CDN and loading the data.json file included in releases.

https://unpkg.com/@mdn/browser-compat-data/data.json

Usage

Once you have imported BCD, you can access the compatibility data for any feature by accessing the properties of the dictionary.

// Grab the desired support statement
const support = bcd.css.properties.background.__compat;
// returns a compat data object (see schema)

// You may use any syntax to obtain dictionary items
const support = bcd['api']['Document']['body']['__compat'];

Package contents

The @mdn/browser-compat-data package contains a tree of objects, with support and browser data objects at their leaves. There are over 12,000 features in the dataset; this documentation highlights significant portions, but many others exist at various levels of the tree.

The definitive description of the format used to represent individual features and browsers is the schema definitions.

Apart from the explicitly documented objects below, feature-level support data may change at any time. See Semantic versioning policy for details.

The package contains the following top-level objects:

__meta

An object containing the following package metadata:

  • version - the package version
  • timestamp - the timestamp of when the package version was built

Data for Web API features.

Data for browsers and JavaScript runtimes. See the browser schema for details.

Data for CSS features, including:

  • at-rules - at-rules (e.g. @media)
  • properties - Properties (e.g. background, color, font-variant)
  • selectors - Selectors (such as basic selectors, combinators, or pseudo elements)
  • types - Value types for rule values

Data for HTML features, including:

  • elements - Elements
  • global_attributes - Global attributes
  • manifest - Web App manifest keys

Data for HTTP features, including:

  • headers - Request and response headers
  • methods - Request methods
  • status - Status codes

Data for JavaScript language features, including:

  • builtins - Built-in objects
  • classes - Class definition features
  • functions - Function features
  • grammar - Language grammar
  • operators - Mathematical and logical operators
  • statements - Language statements and expressions

Data for MathML features, including:

  • elements - Elements

Data for SVG features, including:

  • attributes - Attributes
  • elements - Elements

Data for WebDriver features.

Data for WebExtensions features, including:

  • api - WebExtension-specific APIs
  • manifest - manifest.json keys

Semantic versioning policy

For the purposes of semantic versioning (SemVer), the public API consists of:

  • The high-level namespace objects documented in Package contents
  • The schema definitions for browser and support data structures
  • The TypeScript definitions

The details of browser compatibility change frequently, as browsers ship new features, standards organizations revise specifications, and Web developers discover new bugs. We routinely publish updates to the package to reflect these changes.

You should expect lower-level namespaces, feature data, and browser data to be added, removed, or modified at any time. That said, we strive to communicate changes and preserve backward compatibility; if you rely on a currently undocumented portion of the package and want SemVer to apply to it, please open an issue.

Issues?

If you find a problem with the compatibility data (such as incorrect version numbers) or there is a new web feature you think we should document, please file a bug.

Contributing

Thank you for your interest in contributing to this project! See Contributing to browser-compat-data for more information.

Projects using the data

Here are some projects using the data, as an npm module or directly:

  • Add-ons Linter - the Add-ons Linter is used on addons.mozilla.org and the web-ext tool. It uses browser-compat-data to check that the Firefox version that the add-on lists support for does in fact support the APIs used by the add-on.
  • caniuse - In addition to the existing caniuse database, caniuse includes features from the MDN BCD project, formatted and interactive like any other caniuse support table.
  • CanIUse Embed - Thanks to the inclusion of MDN BCD data in caniuse, this embed tool allows for embedding BCD data into any project.
  • Compat Report - Firefox Add-on that shows compatibility data for the current site in the developer tools.
  • compat-tester - Scan local documents for compatibility issues.
  • Visual Studio Code - Shows the compatibility information in the code completion popup.
  • webhint.io - Hints to check if your CSS HTML and JavaScript have deprecated or not broadly supported features.
  • WebStorm - JavaScript IDE allowing you to check whether all CSS properties you use are supported in the target browser version.
  • Hexo Plugin: hexo-compat-report - Allows to embed MDN's compatibility table in a hexo blog post.

Acknowledgments

Thanks to:

BrowserStack

The BrowserStack Open Source Program for testing services

Testing Powered By Sauce Labs

Sauce Labs Open Source for testing services

browser-compat-data's People

Contributors

a2sheppy avatar bershanskiy avatar bunnybooboo avatar caugner avatar chrisdavidmills avatar connorshea avatar ddbeck avatar dependabot[bot] avatar dontcallmedom avatar elchi3 avatar exe-boss avatar foolip avatar fred-wang avatar germain-gg avatar hamishwillee avatar jdatapple avatar jeremiepat avatar jpmedley avatar lucacasonato avatar lucalves avatar lukewarlow avatar maboa avatar onkarruikar avatar queengooborg avatar rachelandrew avatar rebloor avatar saschanaz avatar sideshowbarker avatar solfen avatar teoli2003 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.