Skip to main content Skip to docs navigation

Browsers & Devices

Browsers and platforms supported by Chassis CSS, plus a few mobile-specific behaviours worth knowing about.

Supported browsers

Chassis CSS supports the latest stable releases of all major browsers. Since the framework leans on modern CSS — custom properties, container queries, the @layer rule, logical properties — it does not target legacy browsers.

The exact target list is maintained in .browserslistrc:

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)

Chassis uses Browserslist to drive Autoprefixer, which adds vendor prefixes during the build. If you compile Chassis from source in your own pipeline, run Autoprefixer on the output to match the support matrix in our distribution build.

Alternative browsers built on the latest WebKit, Blink, or Gecko engines should display Chassis correctly even when not explicitly tested.

Mobile

Chassis supports the latest stable versions of the default browsers on each major mobile platform. Proxy browsers — Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk — are not supported because they reformat or bypass the CSS.

ChromeFirefoxSafariAndroid Browser & WebView
AndroidSupportedSupportedSupported
iOSSupportedSupportedSupported

Desktop

ChromeFirefoxMicrosoft EdgeOperaSafari
macOSSupportedSupportedSupportedSupportedSupported
WindowsSupportedSupportedSupportedSupported
LinuxUnofficially supportedUnofficially supported

For Firefox, the latest Extended Support Release (ESR) is also supported alongside the latest normal stable release.

Internet Explorer

Internet Explorer is not supported. Chassis CSS uses CSS features (custom properties, :has(), @layer) that no version of IE implements. If you need IE support, you'll need a different framework.

Mobile-specific behaviours

A few platform quirks affect how some components render on mobile devices. Most are inherited limitations rather than framework decisions.

iOS Safari has limited support for overflow: hidden on <body>. When you scroll past the top or bottom of an open modal, the body content underneath begins to scroll. There's no clean fix — the underlying browser bug (WebKit #153852) is the source.

iOS form fields inside modals

In iOS Safari, if a scroll gesture starts on an <input> or <textarea> inside an open modal, the body underneath scrolls instead of the modal. Tracked at WebKit #153856.

The dropdown component uses an invisible backdrop element to capture taps and close itself. iOS Safari's tap event model requires a clickable target inside the backdrop, so dropdown closure is sensitive to where the user taps. Tapping the dropdown trigger or any clickable element on the page closes it; tapping inert content may not.

Browser zooming

Page zoom — both the keyboard zoom shortcut and pinch-zoom on mobile — sometimes produces minor rendering artefacts in Chassis components. Most are downstream effects of the zoom implementation in each browser; we open issues for the ones with clean fixes and live with the rest.

Validators

Chassis source CSS doesn't use vendor hacks or non-standard selectors, but the compiled output includes a few inline data: URI SVGs and Autoprefixer-generated vendor prefixes. Some validators flag those as invalid. They render correctly in every supported browser and don't affect the validity of your own CSS.