Browser Support

Airframe targets modern evergreen browsers.

This page is the compatibility reference for @airframeui/core: which browsers it targets, which CSS features it leans on, and what happens in a browser that lacks them.

Our Philosophy

Modern first, no JavaScript

Airframe is CSS. It ships no runtime, and no polyfills, so newer features are used only where they degrade into something still usable:

1. Progressive Enhancement: Core functionality works everywhere; newer CSS makes it nicer
2. No Legacy Baggage: No polyfills or workarounds in the core package
3. Honest Fallbacks: Every feature below says what an unsupporting browser gets instead
4. Future-Proof: We adopt new CSS features as they become available in modern browsers

Core Browser Support

@airframeui/core is designed for and tested against modern evergreen browsers. Core functionality specifically depends on these floors:

Browser	Minimum version	Notes
Chrome	111+ (March 2023)	color-mix() floor
Edge	111+ (March 2023)	Chromium-aligned
Safari	16.4+ (March 2023)	Tested floor; color-mix() lands 16.2
Firefox	121+ (December 2023)	:has() floor
iOS Safari	16.4+	Same as desktop Safari
Chrome Android	111+	Chromium-aligned

Within those floors, “last 2 major versions” of each evergreen browser is a good practical support policy for most apps.

Why these floors

Airframe’s core CSS relies on these platform features. Reading down the table, the last two are what set the floors above — everything before them has been stable for years:

Feature	Chrome	Edge	Safari	Firefox	Notes
Flexbox af-inline, af-cluster, and most component internals	✓ 29 Supported from 29	✓ 12 Supported from 12	✓ 9 Supported from 9	✓ 20 Supported from 20
Custom properties Every token, and all theming	✓ 49 Supported from 49	✓ 15 Supported from 15	✓ 9.1 Supported from 9.1	✓ 31 Supported from 31
CSS Grid af-grid, af-sidebar, and the layout primitives	✓ 57 Supported from 57	✓ 16 Supported from 16	✓ 10.1 Supported from 10.1	✓ 52 Supported from 52
:where() Zero-specificity defaults you can override without !important	✓ 88 Supported from 88	✓ 88 Supported from 88	✓ 14 Supported from 14	✓ 78 Supported from 78
@layer Cascade order between resets, patterns, and utilities	✓ 99 Supported from 99	✓ 99 Supported from 99	✓ 15.4 Supported from 15.4	✓ 97 Supported from 97
:has() Grid column detection, field and navbar patterns	✓ 105 Supported from 105	✓ 105 Supported from 105	✓ 15.4 Supported from 15.4	✓ 121 Supported from 121	Sets the Firefox floor
color-mix() Soft borders, hover and active mixes, intent surfaces	✓ 111 Supported from 111	✓ 111 Supported from 111	✓ 16.2 Supported from 16.2	✓ 113 Supported from 113	Sets the Chrome and Edge floor

Safari versions cover iOS Safari too. Versions checked against MDN browser-compat-data, August 2026.

None of these have a fallback: they are the baseline, not progressive enhancement. Bleeding-edge utilities (e.g. field-sizing: content, experimental display: grid-lanes, customizable <select> via appearance: base-select) need newer browsers and fall back to something plainer — see below. If you don’t use those features, the floors above still apply.

Features That Degrade

These use CSS that hasn’t reached every browser yet. Airframe never patches them with JavaScript; each one has a defined fallback.

Customizable select picker

Progressive enhancement only: supporting browsers get a styled picker anchored below the control, everyone else keeps the classic OS picker. See Select for the markup.

Feature	Chrome	Edge	Safari	Firefox
appearance: base-select Opting the control into the styleable picker	✓ 135 Supported from 135	✓ 135 Supported from 135	✓ 27 Supported from 27	⚑ Flag Behind a flag
::picker(select) Styling the drop-down list itself	✓ 135 Supported from 135	✓ 135 Supported from 135	✓ 27 Supported from 27	✕ No Not supported

Safari versions cover iOS Safari too. Without support: the browser's own picker, unstyled but fully functional. Versions checked against MDN browser-compat-data, August 2026.

Auto-Grow Textarea

<textarea class="af-textarea af-is-auto-grow"></textarea>

Feature	Chrome	Edge	Safari	Firefox
field-sizing: content af-is-auto-grow	✓ 123 Supported from 123	✓ 123 Supported from 123	✓ 26.2 Supported from 26.2	✓ 152 Supported from 152

Safari versions cover iOS Safari too. Without support: a fixed-height textarea that scrolls — still usable, just not growing. Versions checked against MDN browser-compat-data, August 2026.

Below those versions the textarea keeps a fixed height and scrolls. Textarea has a short script you can paste in if you need it to grow there too.

Masonry Layout (Grid Lanes) (Experimental)

Experimental: shipped in Safari, still behind a flag in Chromium and Firefox.

<div class="af-masonry af-gap-lg">
  <div class="af-card">Item 1</div>
  <div class="af-card">Item 2</div>
  <div class="af-card">Item 3</div>
</div>

Feature	Chrome	Edge	Safari	Firefox
display: grid-lanes af-masonry and its width variants	⚑ Flag Behind a flag	⚑ Flag Behind a flag	✓ 26.4 Supported from 26.4	⚑ Flag Behind a flag

Safari versions cover iOS Safari too. Without support: a regular CSS Grid with items aligned to the start, so short cards leave a gap beside taller ones instead of flowing into a waterfall. Versions checked against MDN browser-compat-data, August 2026.

Chromium exposes it behind chrome://flags/#enable-experimental-web-platform-features (or css-grid-lanes-layout), Firefox behind masonry in about:config. Both implement older spellings in some builds — grid-template-rows: masonry and display: masonry — and af-masonry sets all three, so it picks up whichever the browser understands.

Your options:

1. CSS (automatic): af-masonry* is a grid with align-items: start. Not masonry, but left-to-right reading order. Multi-column is not used — it reverses tab order.
2. JavaScript (optional): a masonry library behind feature detection, if you need a waterfall everywhere.

Example with Feature Detection:

const masonrySupported =
CSS.supports('display', 'grid-lanes') ||
CSS.supports('display', 'masonry') ||
CSS.supports('grid-template-rows', 'masonry');

if (!masonrySupported) {
  import('masonry-layout').then(({ default: Masonry }) => {
    document.querySelectorAll('[class*="af-masonry"]').forEach((grid) => {
      new Masonry(grid, {
        itemSelector: ':scope > *',
        percentPosition: true,
        gutter: 16,
      });
    });
  });
}

Learn More:

• WebKit Blog: Introducing CSS Grid Lanes
• CSS-Tricks: Masonry Layout is Now grid-lanes
• Can I Use: CSS Grid Lanes

Recommendation: Use af-masonry* today if a CSS Grid fallback is acceptable. Safari 26.4+ gets a waterfall. For a waterfall in every browser, add a JS library behind feature detection.

Feature Support Matrix

The baseline features are in Why these floors above. This is the other half — everything that isn’t available everywhere yet, and what you get where it’s missing:

Feature	Chrome	Edge	Safari	Firefox	Notes
field-sizing: content Auto-grow textarea	✓ 123 Supported from 123	✓ 123 Supported from 123	✓ 26.2 Supported from 26.2	✓ 152 Supported from 152	Falls back to a fixed-height textarea
display: grid-lanes Masonry	⚑ Flag Behind a flag	⚑ Flag Behind a flag	✓ 26.4 Supported from 26.4	⚑ Flag Behind a flag	Falls back to CSS Grid
appearance: base-select Customizable select picker	✓ 135 Supported from 135	✓ 135 Supported from 135	✓ 27 Supported from 27	⚑ Flag Behind a flag	Falls back to the OS picker

Safari versions cover iOS Safari too. Versions checked against MDN browser-compat-data, August 2026.

Why This Approach?

Benefits

1. Nothing to Install: No runtime, no polyfill bundle, no build step
2. Better Performance: Browsers do the work natively
3. Future-Proof: Easy to adopt new CSS features
4. Flexibility: Teams choose their browser support level
5. Clean Codebase: No legacy workarounds cluttering the code

Trade-offs

• On older browsers the enhanced features render plainly rather than being patched back in
• Adding that behaviour is your call, and your JavaScript

Recommendations

For New Projects

Start with modern browser support only. Check the fallbacks above and decide whether any of them matter for your audience.

For Existing Projects

1. Check your analytics for actual browser usage
2. Compare it against the floors and the feature table above
3. Consider setting a browser support policy (e.g., “last 2 versions”)

For Enterprise Projects

If you must support older browsers (e.g., IE11, older Safari), consider:

1. Testing thoroughly in target browsers
2. Adding your own enhancement scripts for features that degrade
3. Documenting any limitations

Getting Help

If you encounter browser compatibility issues:

1. Check this page for known limitations
2. Check browser support for specific CSS features on Can I Use
3. Open an issue on GitHub if you find a bug

Future Features

As new CSS features become available, we’ll:

1. Adopt them in the core package when widely supported
2. Give each one a fallback that still works
3. Document browser support requirements
4. Update this page with new information

---

Remember: Airframe prioritises the modern web. Nothing here needs JavaScript to work — older browsers get a plainer version of the same interface.