Browser compatibility

Live Wires uses modern CSS features with graceful degradation for older browsers.

Target browsers

Live Wires targets modern evergreen browsers—the last 2 versions of major browsers:

  • Chrome / Edge (Chromium)
  • Firefox
  • Safari

All core functionality works in browsers released since 2022.

To top

Core features

These features are required and have excellent browser support:

Feature Used for Support
CSS Custom Properties Design tokens, theming All modern browsers
CSS Cascade Layers Specificity control Chrome 99+, Firefox 97+, Safari 15.4+
Flexbox Layout primitives All modern browsers
CSS Grid Grid layouts All modern browsers
clamp() Fluid typography Chrome 79+, Firefox 75+, Safari 13.1+
Logical Properties Internationalization Chrome 87+, Firefox 66+, Safari 14.1+
Custom Elements HTML includes All modern browsers

To top

Progressive enhancements

These features provide enhanced experiences in newer browsers but degrade gracefully:

Feature Used for Support
CSS Nesting Component styles Chrome 120+, Firefox 117+, Safari 17.2+
Container Queries Responsive components Chrome 105+, Firefox 110+, Safari 16+
@property Type optimization Chrome 85+, Safari 16.4+, Firefox 128+
text-wrap: balance Heading layout Chrome 114+, Safari 17.5+, Firefox 121+
text-wrap: pretty Orphan control Chrome 117+, Safari 17.5+
:has() Parent selectors Chrome 105+, Safari 15.4+, Firefox 121+

Graceful degradation

When progressive features aren’t supported:

  • CSS Nesting—Only affects authoring; compiled CSS works everywhere
  • Container Queries—Components use fallback sizes
  • @property—Properties work as regular custom properties
  • text-wrap—Text wraps normally

To top

CSS Cascade Layers

Cascade Layers (@layer) are the foundation of Live Wires' specificity management. This is the most important modern feature required.

Browser support

  • Chrome 99+ (March 2022)
  • Firefox 97+ (February 2022)
  • Safari 15.4+ (March 2022)
  • Edge 99+ (March 2022)

Why it matters

Without cascade layers, utilities wouldn’t reliably override components without !important. The layer order defines specificity independent of selector complexity.

Fallback

Browsers without layer support will see all styles applied with normal cascade rules. This may cause specificity conflicts. For legacy browser support, consider using PostCSS with postcss-cascade-layers.

To top

JavaScript requirements

Live Wires requires JavaScript only for:

HTML Includes
The <html-include> Web Component requires JavaScript. Without it, includes won’t load.
Development tools
Keyboard shortcuts for baseline grid, column overlays, and dark mode toggle.

All CSS functionality works without JavaScript. Only the include system requires it.

To top

PostCSS configuration

Live Wires uses a minimal PostCSS setup:

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {}
  }
};

Only Autoprefixer is enabled. This adds vendor prefixes where needed for:

  • Flexbox (older Safari)
  • Grid (older browsers)
  • User-select and appearance properties

No transpilation or polyfilling is performed. Native CSS features are used directly.

To top

Print styles

Live Wires includes print styles in /src/css/print.css. Include it separately in your HTML:

<link rel="stylesheet" href="/css/print.css" media="print">

Print styles:

  • Remove backgrounds and shadows
  • Optimize typography for paper
  • Handle page breaks
  • Show URLs after links

To top

Testing recommendations

Test your prototype in:

Primary targets

  • Chrome (latest)
  • Safari (latest) — especially for iOS
  • Firefox (latest)

Device testing

  • Mobile Safari (iPhone)
  • Chrome on Android
  • Various viewport sizes

Accessibility

  • Screen readers (VoiceOver, NVDA)
  • Keyboard navigation
  • Reduced motion preferences
  • High contrast mode

To top

Known limitations

Internet Explorer

IE11 and earlier are not supported. Modern CSS features used throughout are not available.

Legacy Safari

Safari 14 and earlier may have issues with cascade layers and container queries. Safari 15.4+ is recommended.

Firefox container queries

Firefox added container query support in version 110 (February 2023). Earlier versions won’t see container-responsive behavior.

To top

Resources

To top