Browser support
cia ships zero JavaScript, so its browser floor is set by the native primitives it rides — not by a polyfill budget. This page is the dated matrix: the CIA Baseline every shipped feature requires, and the progressive enhancements that layer on where supported, each with its fallback behaviour. Versions are stated conservatively. As of 2026-09-05.
The CIA Baseline
The floor is anchored by the newest native primitive in the system: the zero-JS accordion’s exclusive <details name> attribute, Baseline 2024. Every other shipped feature clears these versions with room to spare.
| Browser | Minimum version | Set by |
|---|---|---|
| Chrome | 120 (Dec 2023) | <details name> exclusive accordion |
| Edge | 120 (Dec 2023) | <details name> exclusive accordion |
| Firefox | 130 (Sep 2024) | <details name> — the newest hard requirement in the whole system |
| Safari | 17.6 (Jul 2024) | <details name> exclusive accordion |
What that floor buys you — every feature below is used by shipped mixins and is fully supported in all four floor browsers:
| Feature | Baseline status | Where cia uses it |
|---|---|---|
<details name> | Baseline 2024 (Chrome 120, Firefox 130, Safari 17.6) | Accordion — sibling panels close natively, zero JS |
Popover API ([popover], :popover-open) | Baseline 2024 (Chrome 114, Firefox 125, Safari 17) | Dropdown, tooltip, the mobile toolkit (drawer, sheet, dock, hamburger), copy-button toast |
<dialog> + ::backdrop | Baseline 2022 (Chrome 37, Firefox 98, Safari 15.4) | Modal — native focus trap, Escape, inert background |
:has() | Baseline Dec 2023 (Chrome 105, Firefox 121, Safari 15.4) | Tabs — panel switching with no JS |
Container queries (container-type, @container) | Baseline Feb 2023 (Chrome 105, Firefox 110, Safari 16) | container / contain / contain-down / contain-between mixins |
subgrid | Baseline Sep 2023 (Chrome 117, Firefox 71, Safari 16) | The subgrid layout mixin |
color-mix() | Baseline mid-2023 (Chrome 111, Firefox 113, Safari 16.2) | states() hover/active derivation; button and stepper state shades |
grid-template-areas | Universal since 2017; Baseline since 2020 | The named-region page-layout engine (all four tiers) |
dvh viewport units | Baseline late 2022 (Chrome 108, Firefox 101, Safari 15.4) | Layout shells; drawer and sheet height caps (survives the mobile URL-bar collapse) |
:where() / :focus-visible | Baseline 2021 / 2022 | Zero-specificity bare-tag recipes; the shared focus-ring mixin |
mask | Unprefixed in Chrome 120; Firefox 53, Safari 15.4 (cia also emits -webkit-mask) | The icon system |
Need to reach below the floor? The recipes document the swaps: the mobile-nav recipe includes a checkbox variant for engines without the Popover API, and the dialog recipe recommends a focus-trap library plus [role="dialog"] where native <dialog> is unavailable.
Progressive enhancements
These features layer on where the browser supports them. None of them is required for a working page — each row states exactly what happens without it.
| Enhancement | Support (as of 2026-09-05) | Used by | Without it |
|---|---|---|---|
@starting-style + transition-behavior: allow-discrete | Baseline Aug 2024 (Chrome 117, Firefox 129, Safari 17.5) | Drawer and sheet slide-in/out (mobile toolkit) | The drawer opens and closes instantly instead of sliding — fully functional, just unanimated |
light-dark() | Baseline May 2024 (Chrome 123, Firefox 120, Safari 17.5) | Every colour token in the 7 paired (auto light/dark) theme files; states() custom-colour derivation | Auto light/dark switching needs it — on older engines (including Chrome 120–122) ship the pinned -light / -dark theme files instead, which use plain colours. Custom-colour buttons lose their derived hover/active shades and keep their resting colour |
CSS anchor positioning (anchor-name, anchor(), position-area) | Not Baseline. Chrome/Edge 125+, Firefox 144+; Safari Technology Preview only | The anchored-dropdown recipe and this site’s own menus — the shipped mixins never emit it; positioning stays the consumer’s call | Behind @supports (anchor-name: --a) the menu hugs its trigger; without it the menu spans the viewport minus gutters (inset-inline fallback) instead of matching the trigger — still opens, still dismisses |
@property (opt-in theme-properties mixin) | Baseline Jul 2024 (Chrome 85, Firefox 128, Safari 16.4) | Animated theme-token transitions (transition: --token) | Theme swaps snap instead of cross-fading; colours are still correct |
Style queries (@container style()) | Not Baseline. Chrome 111+, Safari 18+; not in Firefox | Suggested in the print docs for custom --is-print effects | The custom print effect simply doesn’t apply; the print mixins and size-based container queries are unaffected |
How we decide
cia is zero-JS by riding native primitives — <details name>, <dialog>, [popover] — so the floor is set by the primitives themselves, not by a transpiler target. When we adopt a newer primitive, the floor moves and this matrix gets re-dated; until then it doesn’t.
Enhancements always ship a fallback: in code where CSS can express it (the @supports gutter fallback for anchor positioning) or architecturally where it can’t (the pinned -light / -dark theme files beside every paired theme). The cross-engine contract is enforced by the test suite, which exercises the platform features above in real browsers on every CI run.