FDIC Design System

Appearance

Browser Support ​

This page defines the browser support contract for the FDIC Design System as it is currently shipped.

Platform baseline

Support is set by the runtime features already in the repository, not by an aspirational roadmap. The current floor is driven by shipped color-token behavior, registered custom properties, and native overlay primitives.

Support target ​

Use the current and previous stable release of the supported browser engines, with these minimum versions as the published floor:

BrowserSupported floorWhy it matters
Chrome123+Required for light-dark(), which the token runtime uses directly.
Edge123+Mirrors the Chromium support floor used by the same token runtime.
Firefox128+Required for both @property and the relative oklch(from ...) syntax used in shipped tokens and component styles.
Safari17.5+Required for light-dark() and aligns with the current drawer transition model.

The root browserslist entry matches this floor so tooling and docs describe the same contract.

Required platform features ​

These features are part of the shipped runtime with no separate legacy path:

  • light-dark() for semantic color tokens in @jflamb/fdic-ds-tokens/styles.css
  • Relative color syntax such as oklch(from var(--fdic-color-primary-500) l c h / 0.08)
  • @property registration for interactive overlay color tokens
  • Native <dialog> behavior for modal drawer mode via showModal()

If a browser does not support those features, core theming and overlay behavior no longer match the published design-system contract.

Progressive enhancement ​

These features are already shipped, but failure to support them degrades presentation more than basic function:

  • Popover API behavior in components such as fd-menu and the fd-label InfoTip
  • @starting-style and transition-behavior: allow-discrete for smoother drawer entry and exit motion
  • Top-layer styling hooks such as :popover-open and dialog::backdrop

In those cases, the intended behavior is a reduced interaction or animation experience rather than a different fallback implementation.

Feature checkpoints ​

The current floor is based on the highest hard requirement among the features already in the repo:

FeatureChrome / EdgeFirefoxSafariNotes
light-dark()12312017.5Hard requirement for token-driven light/dark appearance.
Relative oklch(from ...) syntax12212816.4 partial, 18 fullThe repo uses direct channel references rather than complex channel math.
@property8512816.4Hard requirement for registered custom properties in the token runtime.
Popover API surface11412517Used by fd-menu and fd-label.
@starting-style11712917.5Used by fd-drawer for entry transitions.
transition-behavior: allow-discrete11712917.4Used by fd-drawer for discrete dialog/backdrop transitions.
HTMLDialogElement.showModal()379815.4Used by modal drawer mode.

Implications for component work ​

  • The documented floor now unblocks future work that depends on Popover-based overlays, including the deferred fd-selector migration.
  • New CSS platform features should be introduced only when they fit within this matrix or degrade cleanly above it.
  • When a component depends on a newer feature than this page allows, document that explicitly before shipping the change.

Sources ​