0
# Browser Compat Data
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @mdn/browser-compat-data
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @mdn/browser-compat-data`
10
- **License**: CC0-1.0 (Creative Commons Zero)
11

12
## Core Imports
13

14
```typescript
15
import bcd from '@mdn/browser-compat-data';
16
```
17

18
For modern Node.js with import attributes:
19

20
```typescript
21
import bcd from '@mdn/browser-compat-data' with { type: 'json' };
22
```
23

24
For legacy Node.js versions:
25

26
```typescript
27
import bcd from '@mdn/browser-compat-data/forLegacyNode';
28
```
29

30
For CommonJS:
31

32
```javascript
33
const bcd = require('@mdn/browser-compat-data');
34
```
35

36
Type definitions:
37

38
```typescript
39
import type { CompatData, SupportStatement, CompatStatement } from '@mdn/browser-compat-data/types';
40
```
41

42
## Basic Usage
43

44
```typescript
45
import bcd from '@mdn/browser-compat-data';
46
import { query, walk } from '@mdn/browser-compat-data';
47

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

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

56
// Walk through all features
57
for (const { path, compat } of walk(undefined, bcd)) {
58
  if (compat.status.deprecated) {
59
    console.log(`Deprecated feature: ${path}`);
60
  }
61
}
62
```
63

64
## Architecture
65

66
Browser Compat Data is organized around several key components:
67

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

74
## Capabilities
75

76
### Data Access
77

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

80
```typescript { .api }
81
const bcd: CompatData;
82

83
interface CompatData {
84
  __meta: {
85
    version: string;
86
    timestamp: string;
87
  };
88
  api: { [key: string]: Identifier };
89
  browsers: { [key: string]: BrowserStatement };
90
  css: { [key: string]: Identifier };
91
  html: { [key: string]: Identifier };
92
  http: { [key: string]: Identifier };
93
  javascript: { [key: string]: Identifier };
94
  manifests: { [key: string]: Identifier };
95
  mathml: { [key: string]: Identifier };
96
  svg: { [key: string]: Identifier };
97
  webassembly: { [key: string]: Identifier };
98
  webdriver: { [key: string]: Identifier };
99
  webextensions: { [key: string]: Identifier };
100
}
101
```
102

103
[Data Structure](./data-structure.md)
104

105
### Query and Navigation
106

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

109
```typescript { .api }
110
function query(path: string, data?: DataType): DataType;
111

112
function walk(
113
  entryPoints?: string | string[], 
114
  data?: CompatData
115
): IterableIterator<WalkOutput>;
116

117
interface WalkOutput {
118
  path: string;
119
  data: DataType;
120
  compat: CompatStatement;
121
}
122
```
123

124
[Query and Navigation](./query-navigation.md)
125

126
### Support Analysis
127

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

130
```typescript { .api }
131
function iterSupport(
132
  compat: CompatStatement, 
133
  browser: BrowserName
134
): SimpleSupportStatement[];
135

136
type BrowserName = 
137
  | "chrome" | "chrome_android" | "edge" | "firefox" 
138
  | "firefox_android" | "safari" | "safari_ios" 
139
  | "opera" | "opera_android" | "webview_android" 
140
  | "samsunginternet_android" | "oculus" | "webview_ios";
141
```
142

143
[Support Analysis](./support-analysis.md)
144

145
### Type Definitions
146

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

149
```typescript { .api }
150
interface CompatStatement {
151
  description?: string;
152
  spec_url?: string | string[];
153
  tags?: string[];
154
  support: SupportBlock;
155
  status?: StatusStatement;
156
  source_file?: string;
157
}
158

159
interface SimpleSupportStatement {
160
  version_added: VersionValue;
161
  version_removed?: VersionValue;
162
  prefix?: string;
163
  alternative_name?: string;
164
  flags?: FlagStatement[];
165
  impl_url?: string;
166
  notes?: string | string[];
167
  partial_implementation?: boolean;
168
}
169

170
type VersionValue = string | boolean | null;
171
```
172

173
[Type System](./types.md)
174

175
## Data Categories
176

177
The main dataset is organized into these technology categories:
178

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

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