Browser Support

Airframe targets modern evergreen browsers. This page is the compatibility reference for @airframeui/core: supported browsers, CSS features that matter, and when to opt into @airframeui/polyfills.

Our Philosophy

Modern First, Polyfills Optional

Airframe embraces modern web standards and CSS features that provide the best developer experience. We believe in:

1. Progressive Enhancement: Core functionality works everywhere, enhanced features use modern APIs
2. No Legacy Baggage: We don’t ship polyfills or workarounds in the core package
3. Opt-in Support: Teams needing older browser support can use the optional @airframeui/polyfills package
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)	:has() + color-mix()
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 modern platform features that are stable in the browsers above:

• CSS Custom Properties
• CSS Grid + Flexbox
• :has() (grid column detection, field/navbar patterns)
• :where()
• @layer cascade layers
• color-mix() (soft borders, hover/active mixes, intent surfaces)

Bleeding-edge utilities (e.g. field-sizing: content, experimental display: grid-lanes, customizable <select> via appearance: base-select) may need newer browsers or an opt-in polyfill — see below. If you don’t use those features, the floors above still apply.

Customizable select picker

CSS Feature: appearance: base-select, ::picker(select)

Support: Progressive enhancement only. Supporting browsers get a styled picker anchored below the control; others keep the classic OS picker. No polyfill.

Features Requiring Polyfills

Some features use cutting-edge CSS that may need JavaScript fallbacks for older browsers:

Auto-Grow Textarea

Modern Support: Chrome 123+, Edge 123+

CSS Feature: field-sizing: content

Polyfill Available: Yes - via @airframeui/polyfills

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

Installation:

npm install @airframeui/polyfills

import '@airframeui/polyfills';

See Polyfills Package for details.

Masonry Layout (Grid Lanes) (Experimental)

Modern Support: Safari Technology Preview 234+ (December 2025), Chrome 140+ (experimental flag), Firefox 147+ (experimental flag)

CSS Feature: display: grid-lanes

Status: ⚠️ Experimental - Very limited browser support

Fallback: Automatically falls back to regular CSS Grid in unsupported browsers (items display in a standard grid, not masonry)

<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>

Browser Support Details:

• ✅ Safari Technology Preview 234+ - Full support (December 2025)
• ⚠️ Chrome 140+ - Available behind experimental flag (chrome://flags/#enable-experimental-web-platform-features)
• ⚠️ Firefox 147+ - Available behind experimental flag (layout.css.grid-lanes.enabled)
• ⚠️ Edge - Available behind experimental flag (same as Chrome)
• ❌ Production browsers - Not yet available

Polyfill Options:

1. JavaScript Polyfill (recommended for production):

   • Use a JavaScript masonry library (e.g., Masonry.js, Isotope) as a fallback
   • Feature detect with @supports (display: grid-lanes) and load polyfill only when needed

2. CSS Fallback (automatic):

   • Airframe automatically provides a CSS Grid fallback
   • Items will display in a regular grid layout (not masonry) in unsupported browsers

Example with Feature Detection:

// Check if grid-lanes is supported
if (!CSS.supports('display', 'grid-lanes')) {
// Load JavaScript masonry polyfill
import('masonry-layout').then(({ default: Masonry }) => {
  const grids = document.querySelectorAll('.af-masonry');
  grids.forEach(grid => {
    new Masonry(grid, {
      itemSelector: '> *',
      columnWidth: 250,
      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: For production use, wait for broader browser support or use a JavaScript polyfill with feature detection.

Polyfills Package

For teams that need to support older browsers, we provide an optional @airframeui/polyfills package.

Installation

npm install @airframeui/polyfills

Usage

// Import all polyfills
import '@airframeui/polyfills';

// Or import specific polyfills
import '@airframeui/polyfills/auto-grow-textarea';

How It Works

Polyfills automatically detect browser support:

1. Modern browsers: Use native CSS features (no JavaScript overhead)
2. Older browsers: Automatically apply JavaScript fallbacks

You don’t need to write browser detection code - the polyfills handle it automatically.

Framework Examples

React

// In main.tsx or App.tsx
import '@airframeui/core/core.css';
import '@airframeui/polyfills';

Next.js

// In app/layout.tsx
import '@airframeui/core/core.css';
import '@airframeui/polyfills';

Angular

// In main.ts
import '@airframeui/core/core.css';
import '@airframeui/polyfills';

Vue

// In main.ts
import '@airframeui/core/core.css';
import '@airframeui/polyfills';

Vanilla JavaScript/TypeScript

// In your entry file
import '@airframeui/core/core.css';
import '@airframeui/polyfills';

Feature Support Matrix

Feature	Modern Browsers	Polyfill Available	Notes
CSS Variables	✅ All modern	❌ Not needed	Universal support
CSS Grid	✅ All modern	❌ Not needed	Universal support
Flexbox	✅ All modern	❌ Not needed	Universal support
:has() selector	✅ Chrome 105+, Safari 15.4+, Firefox 121+	❌ Not available	Core feature, no fallback
:where() selector	✅ All modern	❌ Not needed	Universal support
field-sizing: content	✅ Chrome 123+, Edge 123+	✅ Yes	Auto-grow textarea
display: grid-lanes (Masonry)	⚠️ Safari TP 234+ (Dec 2025)	⚠️ JavaScript polyfill available	Experimental - Falls back to regular grid

Why This Approach?

Benefits

1. Smaller Bundle Size: Core package doesn’t include polyfills
2. Better Performance: Modern browsers use native implementations
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

• Teams supporting very old browsers need to install polyfills
• Some cutting-edge features may not work in older browsers without polyfills

Recommendations

For New Projects

Start with modern browser support only. Add polyfills only if analytics show significant older browser usage.

For Existing Projects

1. Check your analytics for actual browser usage
2. Test with @airframeui/polyfills if needed
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. Using @airframeui/polyfills for features that need it
2. Testing thoroughly in target browsers
3. Documenting any limitations

Getting Help

If you encounter browser compatibility issues:

1. Check this page for known limitations
2. Review the Polyfills Package section
3. Check browser support for specific CSS features on Can I Use
4. 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. Provide polyfills when possible
3. Document browser support requirements
4. Update this page with new information

---

Remember: Airframe prioritises the modern web. If you need to support very old browsers, the polyfills package is available, but we recommend targeting modern browsers for the best experience.