Compatibility

Fuji is mobile-first and CSS-driven, and targets evergreen browsers. This page covers responsive behavior and the browser features Fuji relies on.

Responsive behavior

Layout is decided entirely in CSS; no JavaScript viewport checks drive presentation. Breakpoints, container queries, flexbox, and grid handle every responsive decision.

Dialog mobile behavior

Dialog.Content accepts a mobileBehavior prop (dialog, sheet, or fullscreen), implemented purely with max-sm: Tailwind variants, so the presentation switches at the breakpoint without any JavaScript media-query listener.

<Dialog.Content mobileBehavior="sheet">...</Dialog.Content>

Other responsive patterns

• Tables scroll horizontally inside their own container rather than overflowing the page
• Primary navigation collapses into a Drawer-based menu on smaller screens (this site's header switches below the xl breakpoint)
• Grid layouts collapse from 3–4 columns to 1–2 columns mobile-first, not the reverse
• Bottom navigation and sheets respect env(safe-area-inset-*) for notches and home indicators

Browser support

Fuji targets evergreen browsers: the last two versions of Chrome, Edge, Firefox, and Safari, plus their mobile equivalents (Chrome for Android, Safari on iOS).

Feature dependencies

• CSS custom properties: required. All theming runs on --fuji-* variables.
• color-mix(): used by a few opacity utilities; falls back to the base color where unavailable.
• backdrop-filter: powers the glass theme's blur. Detected with @supports; browsers without it (or with prefers-reduced-transparency) get an opaque fallback surface.
• :has(): used sparingly for a few state-driven layout tweaks, such as input adornment padding. Supported in all current evergreen browsers.
• Container queries: not required for anything load-bearing; responsive behavior is primarily media-query and flex/grid based.

Intentional trade-offs

• Browsers without backdrop-filter, or with data-saver or reduced-transparency settings, never see the frosted-glass effect. This is an accessibility-first fallback, not a bug.
• No IE11 support, and no polyfills are shipped for CSS custom properties.