0
# Support Analysis
1

2
The Browser Compat Data package provides utilities for analyzing browser support information and extracting detailed support data for specific browsers and features.
3

4
## Capabilities
5

6
### Iterate Support Function
7

8
Get browser support information in a normalized array format for easier processing.
9

10
```typescript { .api }
11
/**
12
 * Get support for a specific browser in normalized array form
13
 * @param compat - Compatibility statement containing support data
14
 * @param browser - Browser name to get support information for
15
 * @returns Array of support statements (returns [{ version_added: false }] if no support data exists)
16
 */
17
function iterSupport(
18
  compat: CompatStatement, 
19
  browser: BrowserName
20
): SimpleSupportStatement[];
21

22
/**
23
 * Union type of all supported browser names
24
 */
25
type BrowserName = 
26
  | "chrome" 
27
  | "chrome_android" 
28
  | "edge" 
29
  | "firefox" 
30
  | "firefox_android" 
31
  | "safari" 
32
  | "safari_ios" 
33
  | "opera" 
34
  | "opera_android" 
35
  | "webview_android" 
36
  | "samsunginternet_android" 
37
  | "oculus" 
38
  | "webview_ios";
39
```
40

41
**Usage Examples:**
42

43
```typescript
44
import bcd, { iterSupport } from '@mdn/browser-compat-data';
45

46
// Get Chrome support for fetch API
47
const fetchCompat = bcd.api.fetch.__compat;
48
const chromeSupport = iterSupport(fetchCompat, 'chrome');
49

50
console.log(chromeSupport[0].version_added); // "42"
51
console.log(chromeSupport[0].notes); // Any implementation notes
52

53
// Handle multiple support statements
54
const flexboxCompat = bcd.css.properties.display.__compat;
55
const firefoxSupport = iterSupport(flexboxCompat, 'firefox');
56

57
firefoxSupport.forEach((support, index) => {
58
  console.log(`Firefox support entry ${index + 1}:`);
59
  console.log(`Version added: ${support.version_added}`);
60
  if (support.prefix) {
61
    console.log(`Prefix required: ${support.prefix}`);
62
  }
63
});
64

65
// Check for feature flag requirements
66
const containerSupport = iterSupport(
67
  bcd.css.properties["container-type"].__compat, 
68
  'chrome'
69
);
70

71
if (containerSupport[0].flags) {
72
  console.log('Feature flags required:');
73
  containerSupport[0].flags.forEach(flag => {
74
    console.log(`${flag.type}: ${flag.name} = ${flag.value_to_set}`);
75
  });
76
}
77

78
// Handle missing browser support (returns fallback)
79
const missingFeature = { __compat: { support: {} } };
80
const noSupport = iterSupport(missingFeature.__compat, 'chrome');
81
console.log(noSupport); // [{ version_added: false }]
82
```
83

84
### Support Statement Structure
85

86
Detailed structure of browser support information.
87

88
```typescript { .api }
89
/**
90
 * Detailed browser support information for a specific browser version or range
91
 */
92
interface SimpleSupportStatement {
93
  /** Version when support was added (version string, true, false, or null) */
94
  version_added: VersionValue;
95
  /** Version when support was removed (if applicable) */
96
  version_removed?: VersionValue;
97
  /** Required prefix for the feature (e.g., "-webkit-") */
98
  prefix?: string;
99
  /** Alternative name the feature was known by */
100
  alternative_name?: string;
101
  /** Required flags to enable the feature */
102
  flags?: FlagStatement[];
103
  /** Implementation tracking URL for the feature */
104
  impl_url?: string;
105
  /** Additional notes about the implementation or support */
106
  notes?: string | string[];
107
  /** Whether support is only partial (missing some functionality) */
108
  partial_implementation?: boolean;
109
}
110

111
/**
112
 * Version value types
113
 */
114
type VersionValue = string | boolean | null;
115

116
/**
117
 * Feature flag information
118
 */
119
interface FlagStatement {
120
  /** Type of flag required */
121
  type: "preference" | "compile_flag" | "runtime_flag";
122
  /** Name of the flag or preference */
123
  name: string;
124
  /** Value to set for the flag (if applicable) */
125
  value_to_set?: string;
126
}
127
```
128

129
### Support Analysis Patterns
130

131
Common patterns for analyzing browser support data.
132

133
```typescript
134
import bcd, { iterSupport, walk } from '@mdn/browser-compat-data';
135

136
// Find features with partial implementations
137
for (const { path, compat } of walk(undefined, bcd)) {
138
  const chromeSupport = iterSupport(compat, 'chrome');
139
  
140
  if (chromeSupport.some(s => s.partial_implementation)) {
141
    console.log(`Chrome has partial support for: ${path}`);
142
  }
143
}
144

145
// Find features requiring prefixes
146
for (const { path, compat } of walk('css.properties', bcd)) {
147
  const safariSupport = iterSupport(compat, 'safari');
148
  
149
  const prefixedSupport = safariSupport.find(s => s.prefix);
150
  if (prefixedSupport) {
151
    console.log(`${path} requires prefix in Safari: ${prefixedSupport.prefix}`);
152
  }
153
}
154

155
// Find features behind flags
156
for (const { path, compat } of walk(undefined, bcd)) {
157
  const firefoxSupport = iterSupport(compat, 'firefox');
158
  
159
  const flaggedSupport = firefoxSupport.find(s => s.flags && s.flags.length > 0);
160
  if (flaggedSupport) {
161
    console.log(`${path} requires flags in Firefox:`);
162
    flaggedSupport.flags.forEach(flag => {
163
      console.log(`  ${flag.name} (${flag.type})`);
164
    });
165
  }
166
}
167

168
// Check version support ranges
169
const gridCompat = bcd.css.properties["grid-template-columns"].__compat;
170
const chromeGrid = iterSupport(gridCompat, 'chrome');
171

172
chromeGrid.forEach(support => {
173
  if (support.version_added && support.version_removed) {
174
    console.log(`Supported from ${support.version_added} to ${support.version_removed}`);
175
  } else if (support.version_added) {
176
    console.log(`Supported since version ${support.version_added}`);
177
  }
178
});
179
```
180

181
### Browser Support Utilities
182

183
Helper functions for common support analysis tasks.
184

185
```typescript
186
// Check if a feature is supported in a browser
187
function isSupported(compat: CompatStatement, browser: BrowserName): boolean {
188
  const support = iterSupport(compat, browser);
189
  return support.some(s => 
190
    s.version_added === true || 
191
    (typeof s.version_added === 'string' && s.version_added !== '0')
192
  );
193
}
194

195
// Get minimum supported version
196
function getMinVersion(compat: CompatStatement, browser: BrowserName): string | null {
197
  const support = iterSupport(compat, browser);
198
  const versions = support
199
    .map(s => s.version_added)
200
    .filter((v): v is string => typeof v === 'string' && v !== '0')
201
    .sort();
202
  
203
  return versions.length > 0 ? versions[0] : null;
204
}
205

206
// Check if feature requires flags
207
function requiresFlags(compat: CompatStatement, browser: BrowserName): boolean {
208
  const support = iterSupport(compat, browser);
209
  return support.some(s => s.flags && s.flags.length > 0);
210
}
211

212
// Usage examples
213
const fetchCompat = bcd.api.fetch.__compat;
214

215
console.log(isSupported(fetchCompat, 'chrome')); // true
216
console.log(getMinVersion(fetchCompat, 'chrome')); // "42"
217
console.log(requiresFlags(fetchCompat, 'chrome')); // false
218

219
// Check experimental CSS feature
220
const containerCompat = bcd.css.properties["container-type"].__compat;
221
console.log(requiresFlags(containerCompat, 'chrome')); // true (if behind flags)
222
```
223

224
### Version Value Interpretation
225

226
Understanding different version value types:
227

228
```typescript
229
/**
230
 * Interpret version values from browser support data
231
 */
232
function interpretVersionValue(version: VersionValue): string {
233
  if (version === true) {
234
    return "Supported (version unknown)";
235
  } else if (version === false) {
236
    return "Not supported";
237
  } else if (version === null) {
238
    return "Support status unknown";
239
  } else {
240
    return `Supported since version ${version}`;
241
  }
242
}
243

244
// Usage example
245
const cssGridCompat = bcd.css.properties.display.__compat;
246
const chromeSupport = iterSupport(cssGridCompat, 'chrome');
247

248
chromeSupport.forEach(support => {
249
  console.log(interpretVersionValue(support.version_added));
250
  
251
  if (support.version_removed) {
252
    console.log(`Removed in: ${interpretVersionValue(support.version_removed)}`);
253
  }
254
});
255
```
256

257
### Cross-Browser Analysis
258

259
Analyzing support across multiple browsers:
260

261
```typescript
262
import bcd, { iterSupport } from '@mdn/browser-compat-data';
263

264
// Check support across all major browsers
265
function analyzeCrossBrowserSupport(compat: CompatStatement) {
266
  const majorBrowsers: BrowserName[] = ['chrome', 'firefox', 'safari', 'edge'];
267
  
268
  const support: Record<string, SimpleSupportStatement[]> = {};
269
  
270
  for (const browser of majorBrowsers) {
271
    support[browser] = iterSupport(compat, browser);
272
  }
273
  
274
  return support;
275
}
276

277
// Find widely supported features
278
function isWidelySupported(compat: CompatStatement): boolean {
279
  const majorBrowsers: BrowserName[] = ['chrome', 'firefox', 'safari', 'edge'];
280
  
281
  return majorBrowsers.every(browser => {
282
    const support = iterSupport(compat, browser);
283
    return support.some(s => 
284
      s.version_added === true || 
285
      (typeof s.version_added === 'string' && s.version_added !== '0')
286
    );
287
  });
288
}
289

290
// Usage
291
const flexboxCompat = bcd.css.properties.display.__compat;
292
const crossBrowserSupport = analyzeCrossBrowserSupport(flexboxCompat);
293

294
Object.entries(crossBrowserSupport).forEach(([browser, support]) => {
295
  console.log(`${browser}: ${interpretVersionValue(support[0].version_added)}`);
296
});
297

298
console.log(`Widely supported: ${isWidelySupported(flexboxCompat)}`);
299
```
300

301
### Support Data Validation
302

303
Validating and working with support data:
304

305
```typescript
306
// Check if support data exists for a browser
307
function hasSupportData(compat: CompatStatement, browser: BrowserName): boolean {
308
  return iterSupport(compat, browser).length > 0;
309
}
310

311
// Get comprehensive support information
312
function getSupportSummary(compat: CompatStatement, browser: BrowserName) {
313
  const support = iterSupport(compat, browser);
314
  
315
  if (support.length === 0) {
316
    return { hasData: false };
317
  }
318
  
319
  const primary = support[0];
320
  
321
  return {
322
    hasData: true,
323
    version: primary.version_added,
324
    hasPrefix: Boolean(primary.prefix),
325
    prefix: primary.prefix,
326
    hasFlags: Boolean(primary.flags && primary.flags.length > 0),
327
    flags: primary.flags || [],
328
    isPartial: Boolean(primary.partial_implementation),
329
    notes: primary.notes,
330
    alternativeName: primary.alternative_name,
331
    implementations: support.length
332
  };
333
}
334

335
// Usage
336
const serviceWorkerCompat = bcd.api.ServiceWorker.__compat;
337
const chromeSummary = getSupportSummary(serviceWorkerCompat, 'chrome');
338

339
console.log(chromeSummary);
340
// {
341
//   hasData: true,
342
//   version: "40",
343
//   hasPrefix: false,
344
//   hasFlags: false,
345
//   isPartial: false,
346
//   implementations: 1
347
// }
348
```