Widely available API March 2026 for the web

12 Browser APIs Now Widely Available as of March 2026: What to Deploy to Production

In March 2026, 12 browser APIs reached the widely available status — meaning stable support in all major browsers for at least 2.5 years. This simplifies implementation decisions: checking Can I Use and user metrics confirms readiness for production. The focus is on CSS properties, HTTP headers, and JavaScript events for optimizing performance, typography, and data management.

List of key features:

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• Device orientation events
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• Overflow media queries
• Storage manager
• Update frequency media query
• subgrid

Clear-Site-Data: Complete Reset of Local Data

The HTTP header Clear-Site-Data allows a server to initiate clearing of browser storage: cache, cookies, localStorage, IndexedDB, service workers. It's used during logout, user switching, or recovery from corrupted cache.

Syntax and Directives

Directives are specified in double quotes, separated by commas:

Clear-Site-Data: "cache"
Clear-Site-Data: "cache", "cookies"
Clear-Site-Data: "*"

Key directives:

• "cache" — HTTP cache, bfcache, WebGL shaders.
• "cookies" — cookies and HTTP authentication for the domain and subdomains.
• "storage" — localStorage, sessionStorage, IndexedDB, service workers.
• "executionContexts" (experimental) — reloading contexts.
• "clientHints" (experimental) — resetting Client Hints.
• "prefetchCache", "prerenderCache" (experimental) — speculation rules.
• "*" — all data types.

Usage Examples

Logout with full cleanup:

HTTP/1.1 200 OK
Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"
Content-Type: text/html

Cookies only:

Clear-Site-Data: "cookies"

In production, this header solves issues with residual data after POST /logout, including service worker conflicts and cached bundles. Recovery pages with "cache", "storage" quickly restore state without DevTools.

contain-intrinsic-size: Stabilizing Layout with Containment

The contain-intrinsic-size property sets fallback sizes for elements with contain: size or content-visibility: auto. It prevents reflow when rendering outside the viewport by fixing height/width for scrolling.

Syntax

contain-intrinsic-size: none;
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 300px 200px;
contain-intrinsic-size: auto 320px;
contain-intrinsic-size: auto 400px auto 250px;
contain-intrinsic-size: auto none;

Values:

• none — no substitution.
• <length> — fixed size.
• auto <length> — remembers the actual size after the first render.
• auto none — falls back to none if no memory is available.

Examples

News feed:

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

Product card:

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

This property eliminates 'jumping' scroll: without it, invisible blocks have zero height, causing recalculation on scroll. The auto mode optimizes after the first render.

@counter-style: Custom List Styles

The @counter-style rule defines custom numbering styles for lists using descriptors: system, symbols, additive-symbols. It extends built-in styles like decimal, disc, etc.

Syntax and Descriptors

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Main descriptors:

• system: cyclic, numeric, alphabetic, fixed, additive.
• symbols: strings/images for markers.
• additive-symbols: weight-symbol pairs for Roman numerals.
• prefix/suffix: framing.
• range: allowed values.
• pad: minimum length (zero-padding).
• fallback: fallback style.

Examples

Circled letters:

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

Rocket for lists:

@counter-style rocket {
  system: cyclic;
  symbols: "\1F680";
  suffix: " ";
}

ul.features {
  list-style: rocket;
}

For sections:

@counter-style chapter {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ". ";
}

.article h2::before {
  counter-increment: section;
  content: counter(section, chapter);
}

In production, @counter-style simplifies localization of numbering, minimizing JS/backend logic. Ensure fallback and speak-as for accessibility.

Device Orientation Events and Other Features

Device orientation events provide data on device orientation and acceleration via DOM events. The list is complemented by: hyphenate-character and hyphens for hyphenation, image-set() for responsive images, <link rel="modulepreload"> for module preloading, overflow/update frequency media queries for performance adaptation, Storage manager for quotas, subgrid for grids.

Key Takeaways

• Widely available — at least 2.5 years of stable support in all browsers.
• Check user metrics and Can I Use before implementation.
• Clear-Site-Data is essential for logout and recovery.
• contain-intrinsic-size stabilizes scroll with content-visibility.
• @counter-style for custom typography without JS.

— Editorial Team