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
```