0
# CSS Data
1
2
Comprehensive CSS specification data including properties, functions, selectors, types, units, syntaxes, and at-rules with detailed metadata for each CSS feature.
3
4
## Capabilities
5
6
### CSS Properties Data
7
8
Complete data for all CSS properties including syntax, inheritance, animation behavior, and specification details.
9
10
```javascript { .api }
11
/**
12
* CSS properties data with complete specification metadata
13
*/
14
const properties: CSSPropertiesData;
15
16
interface CSSPropertiesData {
17
[propertyName: string]: CSSPropertyEntry;
18
}
19
20
interface CSSPropertyEntry {
21
/** CSS syntax definition for the property value */
22
syntax: string;
23
/** Media type where the property applies (e.g., "visual", "all") */
24
media: string;
25
/** Whether the property is inherited by child elements */
26
inherited: boolean;
27
/** How the property behaves during CSS animations */
28
animationType: string;
29
/** How percentage values are handled */
30
percentages: string;
31
/** CSS specification groups this property belongs to */
32
groups: string[];
33
/** Initial/default value of the property */
34
initial: string;
35
/** Elements this property applies to */
36
appliesto: string;
37
/** How the computed value is determined */
38
computed: string;
39
/** Grammar ordering requirements */
40
order: string;
41
/** Standardization status (standard, experimental, nonstandard, etc.) */
42
status: string;
43
/** MDN documentation URL (optional) */
44
mdn_url?: string;
45
}
46
```
47
48
**Usage Examples:**
49
50
```javascript
51
const { css } = require('mdn-data');
52
53
// Get information about the color property
54
const colorProperty = css.properties.color;
55
console.log(colorProperty);
56
// Output: {
57
// "syntax": "<color>",
58
// "media": "visual",
59
// "inherited": true,
60
// "animationType": "color",
61
// "percentages": "no",
62
// "groups": ["CSS Color"],
63
// "initial": "Varies from one user agent to another",
64
// "appliesto": "allElements",
65
// "computed": "asSpecified",
66
// "order": "uniqueOrder",
67
// "status": "standard",
68
// "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color"
69
// }
70
71
// Find all inherited CSS properties
72
const inheritedProperties = Object.entries(css.properties)
73
.filter(([name, data]) => data.inherited)
74
.map(([name]) => name);
75
76
// Find experimental CSS properties
77
const experimentalProperties = Object.entries(css.properties)
78
.filter(([name, data]) => data.status === 'experimental')
79
.map(([name]) => name);
80
```
81
82
### CSS Functions Data
83
84
Data for all CSS functions including syntax and specification details.
85
86
```javascript { .api }
87
/**
88
* CSS functions data with syntax and specification metadata
89
*/
90
const functions: CSSFunctionsData;
91
92
interface CSSFunctionsData {
93
[functionName: string]: CSSFunctionEntry;
94
}
95
96
interface CSSFunctionEntry {
97
/** CSS syntax definition for the function */
98
syntax: string;
99
/** CSS specification groups this function belongs to */
100
groups: string[];
101
/** Standardization status */
102
status: string;
103
/** MDN documentation URL (optional) */
104
mdn_url?: string;
105
}
106
```
107
108
**Usage Examples:**
109
110
```javascript
111
// Get RGB function information
112
const rgbFunction = css.functions['rgb()'];
113
console.log(rgbFunction.syntax);
114
// Output: "rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? )"
115
116
// Find all color-related functions
117
const colorFunctions = Object.entries(css.functions)
118
.filter(([name, data]) => data.groups.includes('CSS Color'))
119
.map(([name]) => name);
120
```
121
122
### CSS Selectors Data
123
124
Data for CSS selectors including syntax and specification details.
125
126
```javascript { .api }
127
/**
128
* CSS selectors data with syntax and specification metadata
129
*/
130
const selectors: CSSSelectorsData;
131
132
interface CSSSelectorsData {
133
[selectorName: string]: CSSSelectorEntry;
134
}
135
136
interface CSSSelectorEntry {
137
/** CSS syntax definition for the selector */
138
syntax: string;
139
/** CSS specification groups this selector belongs to */
140
groups: string[];
141
/** Standardization status */
142
status: string;
143
/** MDN documentation URL (optional) */
144
mdn_url?: string;
145
}
146
```
147
148
### CSS Types Data
149
150
Data for CSS data types and value definitions.
151
152
```javascript { .api }
153
/**
154
* CSS types data with syntax definitions
155
*/
156
const types: CSSTypesData;
157
158
interface CSSTypesData {
159
[typeName: string]: CSSTypeEntry;
160
}
161
162
interface CSSTypeEntry {
163
/** CSS syntax definition for the type */
164
syntax: string;
165
/** CSS specification groups this type belongs to */
166
groups: string[];
167
/** Standardization status */
168
status: string;
169
/** MDN documentation URL (optional) */
170
mdn_url?: string;
171
}
172
```
173
174
### CSS Units Data
175
176
Data for CSS units with categorization and specification details.
177
178
```javascript { .api }
179
/**
180
* CSS units data with categorization
181
*/
182
const units: CSSUnitsData;
183
184
interface CSSUnitsData {
185
[unitName: string]: CSSUnitEntry;
186
}
187
188
interface CSSUnitEntry {
189
/** CSS specification groups this unit belongs to */
190
groups: string[];
191
/** Standardization status */
192
status: string;
193
/** MDN documentation URL (optional) */
194
mdn_url?: string;
195
}
196
```
197
198
### CSS Syntaxes Data
199
200
Data for CSS syntax components used across other CSS features.
201
202
```javascript { .api }
203
/**
204
* CSS syntaxes data for grammar components
205
*/
206
const syntaxes: CSSSyntaxesData;
207
208
interface CSSSyntaxesData {
209
[syntaxName: string]: CSSSyntaxEntry;
210
}
211
212
interface CSSSyntaxEntry {
213
/** CSS syntax definition */
214
syntax: string;
215
/** CSS specification groups this syntax belongs to */
216
groups: string[];
217
/** Standardization status */
218
status: string;
219
/** MDN documentation URL (optional) */
220
mdn_url?: string;
221
}
222
```
223
224
### CSS At-Rules Data
225
226
Data for CSS at-rules including descriptors and specification details.
227
228
```javascript { .api }
229
/**
230
* CSS at-rules data with descriptors and specification metadata
231
*/
232
const atRules: CSSAtRulesData;
233
234
interface CSSAtRulesData {
235
[atRuleName: string]: CSSAtRuleEntry;
236
}
237
238
interface CSSAtRuleEntry {
239
/** CSS syntax definition for the at-rule */
240
syntax: string;
241
/** Associated CSS interfaces (optional) */
242
interfaces?: string[];
243
/** CSS specification groups this at-rule belongs to */
244
groups: string[];
245
/** Descriptors available within this at-rule (optional) */
246
descriptors?: {
247
[descriptorName: string]: {
248
syntax: string;
249
media: string;
250
percentages: string;
251
computed: string;
252
order: string;
253
status: string;
254
mdn_url?: string;
255
};
256
};
257
/** Standardization status */
258
status: string;
259
/** MDN documentation URL (optional) */
260
mdn_url?: string;
261
}
262
```
263
264
**Usage Examples:**
265
266
```javascript
267
// Get @media rule information
268
const mediaRule = css.atRules['@media'];
269
console.log(mediaRule.syntax);
270
271
// Get @font-face descriptors
272
const fontFaceRule = css.atRules['@font-face'];
273
console.log(Object.keys(fontFaceRule.descriptors || {}));
274
// Output: ['font-family', 'src', 'font-style', 'font-weight', ...]
275
```
276
277
## Common Use Cases
278
279
1. **CSS Parser Development**: Understanding complete CSS syntax for building parsers
280
2. **CSS Validation Tools**: Validating CSS properties, values, and syntax
281
3. **IDE Support**: Providing autocomplete and syntax highlighting for CSS
282
4. **Documentation Generation**: Building comprehensive CSS reference documentation
283
5. **CSS Tooling**: Building CSS preprocessors, minifiers, and optimization tools
284
6. **Browser Compatibility**: Understanding which CSS features are standard vs experimental
285
7. **CSS Learning Tools**: Building educational resources about CSS specifications