---
title: "Browser support"
description: "Maz-UI v5 browser compatibility matrix and the native CSS features it depends on."
package: "maz-ui"
url: "https://maz-ui.com/guide/browser-support"
---

# Browser support

> Maz-UI v5 browser compatibility matrix and the native CSS features it depends on.

- Package: `maz-ui`
- Web: https://maz-ui.com/guide/browser-support

Maz-UI v5 is built on **Tailwind CSS v4**, which relies on modern native CSS features with no polyfill path. If your audience still uses older browsers, stay on Maz-UI v4.

## Minimum versions

| Browser            | Minimum |
| ------------------ | ------- |
| **Chromium** (Chrome, Edge, Opera, Brave, Arc, …) | **111** (March 2023) |
| **Safari** (macOS, iOS, iPadOS) | **16.4** (March 2023) |
| **Firefox** | **128** (July 2024) |
| **Samsung Internet** | **22** (2023) |

On the Android side: Chrome 111+ is bundled with Android 13+ devices and is available as an update on anything from Android 7. WebView apps built against API level 24+ get Chromium 111+ automatically.

Anything older than the versions above will not render the design system correctly. The most common failure mode is colors looking wrong (because `color-mix()` doesn't resolve) or cascade layers being ignored.

## Why these minimums

Maz-UI v5 + Tailwind v4 uses the following native CSS features:

### `color-mix()`

Used for every alpha modifier (`bg-primary/50`, the custom `color-mix(in srgb, var(--X) 60%, transparent)` generated by the `@maz-ui/upgrade` package for `hsl(var(--X) / 60%)`, etc.).

[Browser support · caniuse](https://caniuse.com/?search=color-mix) - supported everywhere since Chromium 111 / Safari 16.4 / Firefox 128.

### `@property`

Used internally by Tailwind v4 to declare typed custom properties with default values. Powers the `--tw-translate-x`, `--tw-rotate`, etc. that back transform utilities.

[Browser support · caniuse](https://caniuse.com/?search=%40property) - supported everywhere since Chromium 111 / Safari 16.4 / Firefox 128.

### Native CSS nesting

Used by Tailwind v4 internally and by Maz-UI utilities like `cap-f` (`&::first-letter`). v4 does not run a CSS-nesting preprocessor; the output relies on the browser parsing nested rules directly.

[Browser support · caniuse](https://caniuse.com/css-nesting) - supported everywhere since Chromium 112 / Safari 16.5 / Firefox 117.

### `:has()` selector

Used by a few Maz-UI utilities for parent-aware styling.

[Browser support · caniuse](https://caniuse.com/css-has) - supported everywhere since Chromium 105 / Safari 15.4 / Firefox 121.

## Testing on older browsers

If you need to support a browser older than the matrix above:

1. **Stay on Maz-UI v4** - it keeps Tailwind v3 and targets Chromium 90+, Safari 14+, Firefox 90+.
2. **Check your real audience** using your analytics tool before bumping to v5. "Support everything" is often outdated advice in 2026 - most teams can comfortably drop anything older than Chromium 111.

## Testing on the minimum versions

Playwright can install exact minimum-version browsers for regression testing:

```bash
pnpm add -D @playwright/test
npx playwright install chromium@111 firefox@128 webkit@16.4
```

Then run your visual tests against that matrix in CI.

## What happens on unsupported browsers

- **`color-mix` unsupported** - any utility that goes through an alpha modifier (`bg-primary/50`, the custom overlay colors in MazDialog / MazBackdrop) falls back to the base color with no transparency. Visual regression but not a crash.
- **`@property` unsupported** - transform, translate, rotate, scale utilities don't animate smoothly because the custom properties aren't interpolatable without `@property`.
- **Cascade layers unsupported** - the order of Maz-UI styles vs app styles becomes non-deterministic, so resets and utilities can override app styles (or vice versa) unpredictably.

The safe recommendation is: detect at app boot and show an "unsupported browser" screen if you can't guarantee the minimum matrix.

## See also

- [Migration v4 → v5](./migration-v5.md) - the full upgrade guide
- [Tailwind v4 browser support](https://tailwindcss.com/blog/tailwindcss-v4#browser-support) - upstream notes
- [Tailwind CSS integration](./tailwind.md) - how the design system plugs into your own Tailwind