Browser Support

Astryx is built on modern web platform features — the Popover API, CSS anchor positioning, and CSS light-dark(). These let components stay small, accessible, and dependency-free, but they also set a floor on which browsers render everything correctly.

A design system does not own its traffic — the products built on it do. Their audiences range from evergreen-Chrome-only internal tools to public sites with meaningful older-Safari share. So Astryx does not declare a single hard browser floor the way an app would. Instead it defines tiers that describe what works at each level, and hands the final decision to you. Pick the tier that matches your audience.

Astryx officially supports Tier 1 and Tier 2. Tier 3 is best-effort: components will not crash, but positioning and theming may degrade.

Only three modern features carry a browser requirement. Everything else Astryx uses (:has(), color-mix(), container queries, the <dialog> element) has been widely available since 2023 or earlier and needs no special handling.

The gap that matters is between Tier 1 and Tier 2: the Popover API and light-dark() reached wide availability well before anchor positioning. So in Tier 2 browsers, layered surfaces open and dismiss correctly — they just are not positioned. This is the one feature most consumers will need to reason about.

The browser requirement is concentrated in the layered-surface components — anything that renders content in an overlay positioned against a trigger:

• Tooltip
• HoverCard
• Popover
• ContextMenu
• Selector and MultiSelector (dropdown surfaces)
• Tokenizer (suggestion menu)
• Carousel (anchored controls)

If your product does not use any of these, it has no anchor-positioning requirement at all — it needs only light-dark() (Tier 2 and up) for correct theme colors. Layout, typography, forms, buttons, cards, tables, and navigation all work down to Tier 2 with no special handling.

If your audience includes Tier 2 browsers and you need correct layer positioning, you have three options, cheapest first. All of them are decisions you make for your audience — Astryx does not impose one.

1. Polyfill anchor positioning. Load a CSS anchor positioning polyfill conditionally behind an @supports check so it costs nothing on Tier 1. This is the lowest-effort way to get correct positioning; note that polyfills may not cover every position-fallback feature.
2. Provide a JS positioning fallback. Detect missing support with CSS.supports("anchor-name", "--x") and position layers with a measurement-based library (e.g. a floating-element positioner) when it returns false. More code, full control.
3. Accept degraded positioning. Document for your users that on Tier 2 browsers, layered surfaces open correctly but may not sit next to their trigger. Cheapest, and often fine for internal tools on evergreen browsers.

Feature-detect at runtime rather than sniffing user agents:

js
// Popover API (Tier 2 and up)
const hasPopover = typeof HTMLElement !== 'undefined'
  && typeof HTMLElement.prototype.showPopover === 'function';
​
// CSS anchor positioning (Tier 1)
const hasAnchorPositioning = CSS.supports('anchor-name', '--x');
​
// CSS light-dark() (Tier 2 and up)
const hasLightDark = CSS.supports('color', 'light-dark(#000, #fff)');

The tiers are rolling, not frozen to specific versions. They track the Web Baseline year:

• Tier 1 tracks the current Baseline year.
• Tier 2 tracks Baseline minus two years.
• Tier 3 is everything older, and remains best-effort.

This is not an arbitrary window: Baseline − 2 is close to where anchor positioning stops being available while the Popover API and light-dark() still are — so the tier boundary tracks a real capability edge, not a guessed date. The version floors above are reviewed and advanced roughly once a year as new Baseline years land. Always feature-detect rather than hardcoding version numbers, so your app adapts automatically as the platform moves.