Browser Capability Strategy

Capability strategy focuses on feature support — detect capabilities where possible instead of targeting browsers directly.

01 — Purpose

Features, not browser names

Capability strategy focuses on feature support instead of browser assumptions — detect capabilities where possible instead of targeting browsers directly.

User-agent sniffing breaks quickly and excludes capable browsers while letting broken ones through. Feature detection and progressive enhancement ask: does this environment support what we need — and what happens if it does not?

See progressive enhancement strategy and browser support policy.

02 — Principles

Capability and usability over labels

Support decisions should focus on capability and usability.

  • feature detection — test for APIs, not browser strings
  • progressive enhancement — baseline works; enhanced path when supported
  • resilient fallbacks — readable degradation, not hard blocks

03 — Practice

Good capability strategy

Use @supports, typeof checks, and documented baselines.

  • define a browserslist baseline — shared across PostCSS, build, and docs; see browser support policy
  • use CSS @supports for progressive layout features — container queries, subgrid
  • test JS features with guards — if ('IntersectionObserver' in window)
  • ship polyfills only when usage data justifies them — not preemptively for every API
  • document unsupported behaviour — what users see when a feature is absent

04 — Avoid

Browser assumptions

Sniffing and blocking create fragile, exclusionary products.

  • browser sniffing — regex on userAgent to enable or disable features
  • arbitrary blocking — “please use Chrome” interstitials on capable browsers
  • capability assumptions — “everyone has hover” or “mobile never needs keyboard”
  • shipping different security or auth paths by sniffed browser
  • ignoring @supports fallbacks — broken layout in older but supported targets

05 — Close

Test the fallback path

If the enhanced path fails, the baseline must still complete the task.

Disable a feature flag, block an API in DevTools, or test on your browserslist minimum. The product should remain usable — just less polished.

See progressive enhancement strategy, dependency management, and JavaScript standard.