Browser support

#The short version

• Current browsers: everything works, including seed theming, dark mode, container queries and the components.
• Browsers without relative color syntax: a static theme computed from the default seed, with primary and ring set to your seed. Light and dark mode still switch.
• Browsers without container queries: the @xs: to @xl: classes are ignored and the unprefixed layout is used.
• No JavaScript, no polyfills: Monsoon is plain CSS, so there is nothing to load or patch at runtime.

#Features the utilities rely on

These are the modern CSS features found in the utility and theme rules, with the first browser versions that support them:

Utilities that use a newer property, such as text-balance, simply have no effect in a browser that does not know it. The rest of the rule set is unaffected.

#Progressive enhancements

Some rules improve the result where a browser supports them and fall back to a plain but correct result elsewhere:

Check the page of each component for its own notes.

#Without relative color syntax

Seed theming computes colors in the browser, which needs relative color syntax. For browsers without it, the stylesheet ships a static theme inside @supports not (color: oklch(from red l c h)):

• every token gets a fixed value computed from the default seed,
• primary and ring use your --seed directly, so your brand color still shows,
• tokens whose lightness only depends on the scheme (background, foreground, surfaces, muted, border, secondary and the status colors) still switch between light and dark,
• foregrounds are fixed for the default seed, so primary-foreground stays white.

With a dark or saturated seed that is fine. With a very light seed, such as yellow, white text on the primary color would be hard to read, so set a foreground for those browsers yourself:

@supports not (color: oklch(from red l c h)) {
  :root {
    --primary-foreground: #1c1917;
  }
}

#How to check

Paste this into the console of any browser to see which features it has:

console.table({
  'relative colors': CSS.supports('color', 'oklch(from red l c h)'),
  'oklch': CSS.supports('color', 'oklch(0.5 0.1 200)'),
  'color-mix': CSS.supports('color', 'color-mix(in oklab, red, blue)'),
  'container queries': CSS.supports('container-type', 'inline-size'),
  ':has()': CSS.supports('selector(:has(a))'),
  '@layer': typeof CSSLayerBlockRule !== 'undefined',
  '@scope': typeof CSSScopeRule !== 'undefined',
});

1. Open the page in the oldest browser you support and confirm that text, buttons and forms are readable.
2. In the developer tools, emulate prefers-color-scheme: dark and prefers-reduced-motion: reduce to test the scheme and the motion variants without changing system settings.
3. Inspect an element and look at the computed value of --primary to see what the browser derived from your seed.
4. Open the playground in each browser you support and paste a representative piece of your markup to compare the results.

#Frequently asked questions