0
# MDN Data
1
2
MDN Data is a comprehensive collection of structured JSON datasets for web technologies maintained by Mozilla's MDN team. It provides machine-readable data about CSS properties, selectors, functions, at-rules, Web API inheritance relationships, and localization strings used throughout MDN Web Docs.
3
4
> **Note**: The MDN team is in the process of deprecating the `mdn-data` package in favor of [`w3c/webref`](https://github.com/w3c/webref). If you depend on this project, they encourage feedback in their community [GitHub discussions](https://github.com/mdn/mdn-community/discussions/categories/platform).
5
6
## Package Information
7
8
- **Package Name**: mdn-data
9
- **Package Type**: npm
10
- **Language**: JavaScript
11
- **Installation**: `npm install mdn-data`
12
13
## Core Imports
14
15
```javascript
16
const mdnData = require('mdn-data');
17
const { api, css, l10n } = require('mdn-data');
18
```
19
20
ES modules:
21
22
```javascript
23
import mdnData from 'mdn-data';
24
import { api, css, l10n } from 'mdn-data';
25
```
26
27
## Basic Usage
28
29
```javascript
30
const { api, css, l10n } = require('mdn-data');
31
32
// Access Web API inheritance data
33
const inheritanceData = api.inheritance;
34
console.log(inheritanceData.DocumentFragment);
35
// { "inherits": "Node", "implements": ["ParentNode", "LegacyQueryInterface"] }
36
37
// Access CSS properties data
38
const cssProperties = css.properties;
39
console.log(cssProperties.color);
40
// { "syntax": "<color>", "media": "visual", "inherited": true, ... }
41
42
// Access CSS functions data
43
const cssFunctions = css.functions;
44
console.log(cssFunctions['rgb()']);
45
// { "syntax": "rgb( <percentage>{3} [ / <alpha-value> ]? )", ... }
46
47
// Access localization strings
48
const cssL10n = l10n.css;
49
console.log(cssL10n.absoluteLength['en-US']);
50
// "absolute {{cssxref(\"length\")}}"
51
```
52
53
## Architecture
54
55
MDN Data is organized into three main modules:
56
57
- **API Module**: Web API interface inheritance and mixin implementation data
58
- **CSS Module**: Comprehensive CSS specification data including properties, functions, selectors, types, units, syntaxes, and at-rules
59
- **L10n Module**: Localization strings for CSS terminology across multiple languages
60
61
All data follows strict JSON schemas and is validated for consistency. The package serves as a foundational data source for MDN Web Docs and external tools like CSSTree parser.
62
63
## Capabilities
64
65
### API Data Access
66
67
Web API interface inheritance relationships and mixin implementations for understanding the Web API object model.
68
69
```javascript { .api }
70
const api = {
71
inheritance: InheritanceData;
72
};
73
74
interface InheritanceData {
75
[interfaceName: string]: {
76
inherits: string | null;
77
implements: string[];
78
};
79
}
80
```
81
82
[API Data](./api-data.md)
83
84
### CSS Data Access
85
86
Complete CSS specification data including properties, functions, selectors, types, units, syntaxes, and at-rules with detailed metadata.
87
88
```javascript { .api }
89
const css = {
90
properties: CSSPropertiesData;
91
functions: CSSFunctionsData;
92
selectors: CSSSelectorsData;
93
types: CSSTypesData;
94
units: CSSUnitsData;
95
syntaxes: CSSSyntaxesData;
96
atRules: CSSAtRulesData;
97
};
98
99
interface CSSPropertiesData {
100
[propertyName: string]: {
101
syntax: string;
102
media: string;
103
inherited: boolean;
104
animationType: string;
105
percentages: string;
106
groups: string[];
107
initial: string;
108
appliesto: string;
109
computed: string;
110
order: string;
111
status: string;
112
mdn_url?: string;
113
};
114
}
115
116
interface CSSFunctionsData {
117
[functionName: string]: {
118
syntax: string;
119
groups: string[];
120
status: string;
121
mdn_url?: string;
122
};
123
}
124
```
125
126
[CSS Data](./css-data.md)
127
128
### Localization Data Access
129
130
Localization strings for CSS terminology used in MDN Web Docs across multiple languages.
131
132
```javascript { .api }
133
const l10n = {
134
css: LocalizationData;
135
};
136
137
interface LocalizationData {
138
[termKey: string]: {
139
[languageCode: string]: string;
140
};
141
}
142
```
143
144
[Localization Data](./l10n-data.md)
145
146
## Types
147
148
```javascript { .api }
149
interface InheritanceEntry {
150
inherits: string | null;
151
implements: string[];
152
}
153
154
interface CSSPropertyEntry {
155
syntax: string;
156
media: string;
157
inherited: boolean;
158
animationType: string;
159
percentages: string;
160
groups: string[];
161
initial: string;
162
appliesto: string;
163
computed: string;
164
order: string;
165
status: string;
166
mdn_url?: string;
167
}
168
169
interface CSSFunctionEntry {
170
syntax: string;
171
groups: string[];
172
status: string;
173
mdn_url?: string;
174
}
175
176
interface CSSSelectorEntry {
177
syntax: string;
178
groups: string[];
179
status: string;
180
mdn_url?: string;
181
}
182
183
interface CSSTypeEntry {
184
syntax: string;
185
groups: string[];
186
status: string;
187
mdn_url?: string;
188
}
189
190
interface CSSUnitEntry {
191
groups: string[];
192
status: string;
193
mdn_url?: string;
194
}
195
196
interface CSSSyntaxEntry {
197
syntax: string;
198
groups: string[];
199
status: string;
200
mdn_url?: string;
201
}
202
203
interface CSSAtRuleEntry {
204
syntax: string;
205
interfaces?: string[];
206
groups: string[];
207
descriptors?: {
208
[descriptorName: string]: {
209
syntax: string;
210
media: string;
211
percentages: string;
212
computed: string;
213
order: string;
214
status: string;
215
mdn_url?: string;
216
};
217
};
218
status: string;
219
mdn_url?: string;
220
}
221
222
interface LocalizationEntry {
223
[languageCode: string]: string;
224
}
225
```