Skip to content
Docs · 11 pages

Start here

Style

Checks

Patterns

Moving over

Docs / Checks

Browser support

What each component needs from the browser, which engines have it, and what the others show instead, stated per component.

2 min readThis page as MarkdownSource on GitHub

Every component carries a support statement in its metadata, printed on its page and its catalogue card: which platform features it needs, the first version of Chrome, Firefox and Safari that has them, and, when one engine is missing, what that engine shows instead. The versions come from @mdn/browser-compat-data and live in one file, @moonarc/core/support, so the site, llms.txt and the MCP server print the same line.

Three labels:

  • every browser: Baseline widely available. It works everywhere.
  • newly available: every engine has it, recently. @starting-style, ::details-content, anchor positioning, invoker commands, @property.
  • limited, with fallback: at least one engine is missing a feature, and the card says what that engine shows instead. Most of these are scroll-driven (Parallax, ScrollProgress, CardStack and the rest of that family, free and Pro), which Firefox still keeps behind a flag. Others need a feature one or two engines lack, such as Carousel’s buttons and dots (::scroll-marker, Chrome only). The limited, with fallback filter on the catalogue lists every one.

Why not polyfill the scroll-driven ones?

Because then “0 B” would be false. Reveal already ships a script, so its scrub mode has a scripted fallback: where view timelines are missing, it sets the progress from the element’s position as the page scrolls. The pure-CSS scroll components stay pure and say so. A parallax that is static in Firefox is a correct page; a parallax that costs 400 B raw everywhere to move in Firefox is a different product, and you can build it with Reveal scrub.

What is deliberately not used

interpolate-size and calc-size() (Chrome only; Accordion uses the grid-template-rows trick instead), animation-trigger (experimental), scroll-state() queries (Chrome only).

The full support table

Every feature and its first Chrome, Firefox and Safari release is in @moonarc/core/support: the features table, and supportLine(), which prints a component’s line from it. The labels are meant to move as engines ship.