Browser Compat Data

Browser Compat Data provides comprehensive, machine-readable browser compatibility information for Web technologies including Web APIs, JavaScript features, CSS properties, HTML elements, and more. This package serves as the authoritative source of compatibility data used by MDN Web Docs, CanIUse, Visual Studio Code, WebStorm and numerous other web development tools.

Package Information

• Package Name: @mdn/browser-compat-data
• Package Type: npm
• Language: TypeScript
• Installation: npm install @mdn/browser-compat-data
• License: CC0-1.0 (Creative Commons Zero)

Core Imports

import bcd from '@mdn/browser-compat-data';

For modern Node.js with import attributes:

import bcd from '@mdn/browser-compat-data' with { type: 'json' };

For legacy Node.js versions:

import bcd from '@mdn/browser-compat-data/forLegacyNode';

For CommonJS:

const bcd = require('@mdn/browser-compat-data');

Type definitions:

import type { CompatData, SupportStatement, CompatStatement } from '@mdn/browser-compat-data/types';

Basic Usage

import bcd from '@mdn/browser-compat-data';
import { query, walk } from '@mdn/browser-compat-data';

// Access compatibility data directly
const flexboxSupport = bcd.css.properties.display.__compat.support;
console.log(flexboxSupport.chrome.version_added); // "29"

// Query data using dotted notation
const fetchAPI = query('api.fetch', bcd);
console.log(fetchAPI.__compat.support.chrome.version_added); // "42"

// Walk through all features
for (const { path, compat } of walk(undefined, bcd)) {
  if (compat.status.deprecated) {
    console.log(`Deprecated feature: ${path}`);
  }
}

Architecture

Browser Compat Data is organized around several key components:

• Data Categories: Structured compatibility data organized by web technology type (API, CSS, HTML, etc.)
• Hierarchical Structure: Nested objects representing technology families, specific features, and sub-features
• Compatibility Statements: Standardized support information with browser versions, flags, and status
• Utility Functions: Helper functions for querying, walking, and processing the data
• Type System: Complete TypeScript definitions for all data structures

Capabilities

Data Access

Direct access to the complete browser compatibility dataset containing information for all major web technologies.

const bcd: CompatData;

interface CompatData {
  __meta: {
    version: string;
    timestamp: string;
  };
  api: { [key: string]: Identifier };
  browsers: { [key: string]: BrowserStatement };
  css: { [key: string]: Identifier };
  html: { [key: string]: Identifier };
  http: { [key: string]: Identifier };
  javascript: { [key: string]: Identifier };
  manifests: { [key: string]: Identifier };
  mathml: { [key: string]: Identifier };
  svg: { [key: string]: Identifier };
  webassembly: { [key: string]: Identifier };
  webdriver: { [key: string]: Identifier };
  webextensions: { [key: string]: Identifier };
}

Data Structure

Query and Navigation

Functions for querying and navigating the compatibility data using dotted path notation and walking algorithms.

function query(path: string, data?: DataType): DataType;

function walk(
  entryPoints?: string | string[], 
  data?: CompatData
): IterableIterator<WalkOutput>;

interface WalkOutput {
  path: string;
  data: DataType;
  compat: CompatStatement;
}

Query and Navigation

Support Analysis

Utilities for analyzing browser support information and extracting support details for specific browsers.

function iterSupport(
  compat: CompatStatement, 
  browser: BrowserName
): SimpleSupportStatement[];

type BrowserName = 
  | "chrome" | "chrome_android" | "edge" | "firefox" 
  | "firefox_android" | "safari" | "safari_ios" 
  | "opera" | "opera_android" | "webview_android" 
  | "samsunginternet_android" | "oculus" | "webview_ios";

Support Analysis

Type Definitions

Complete TypeScript type definitions for all compatibility data structures, statements and utility functions.

interface CompatStatement {
  description?: string;
  spec_url?: string | string[];
  tags?: string[];
  support: SupportBlock;
  status?: StatusStatement;
  source_file?: string;
}

interface SimpleSupportStatement {
  version_added: VersionValue;
  version_removed?: VersionValue;
  prefix?: string;
  alternative_name?: string;
  flags?: FlagStatement[];
  impl_url?: string;
  notes?: string | string[];
  partial_implementation?: boolean;
}

type VersionValue = string | boolean | null;

Type System

Data Categories

The main dataset is organized into these technology categories:

• api - Web API interfaces and their methods/properties (Fetch API, Web Storage, etc.)
• css - CSS properties, selectors, at-rules, and functions (flexbox, grid, custom properties, etc.)
• html - HTML elements, attributes, and global attributes (semantic elements, form controls, etc.)
• http - HTTP headers, status codes, and methods (CORS headers, caching, etc.)
• javascript - JavaScript language features and built-in objects (ES6+ features, array methods, etc.)
• browsers - Browser information including releases, engines, and metadata
• manifests - Web App Manifest properties and Progressive Web App features
• mathml - MathML elements and attributes for mathematical notation
• svg - SVG elements, attributes, and features for vector graphics
• webassembly - WebAssembly instructions, types, and runtime features
• webdriver - WebDriver automation commands and capabilities
• webextensions - Browser extension APIs across different browsers

Each category contains hierarchically organized compatibility data with detailed browser support information, standardization status, and implementation notes.