Browser Support

Porchlight is a modern CSS-first framework. It does not polyfill old browsers. Instead, it uses a tiered strategy: required features for the core, progressive enhancement for newer capabilities, and @supports gating for experimental ones.

Support matrix

Required features

These are foundational CSS capabilities that are in the CSS Snapshot 2026 Official Definition. Any browser from 2024+ supports all of them:

Baseline-modern features

These are safe to use in production as of mid-2026. All major browsers (Chrome, Edge, Firefox, Safari) support them:

Progressive enhancement features

These features are gated behind @supports. The framework works perfectly without them; they add polish where supported:

Experimental features

These are not yet Baseline across all browsers. They are @supports-gated and degrade to a static but functional state. Note that several are in the CSS-2026 Official Definition (their specification is stable) even though implementation is still rolling out:

Note on @property-registered contrast-color(): While contrast-color() became Baseline in April 2026, MDN warns that mid-tone backgrounds can produce unexpected results. Porchlight keeps explicit paired tokens (--pl-color-accent / --pl-color-accent-text) with WCAG-AA verified contrast, and validates them in the deterministic contrast test suite.

CSS Snapshot 2026 status

The CSS Snapshot 2026 defines what the CSS Working Group considers the “Official Definition” of CSS. Features marked ✅ above are in the snapshot; those marked ⚠️ are beyond it (pre-snapshot or in an earlier stability tier). This does not mean the ⚠️ features are unstable — @scope and @property have shipped in all major browsers — just that their specifications haven’t reached the W3C Candidate Recommendation stage required for inclusion in the snapshot.

Porchlight targets Chrome 149+ and is tested with Playwright, so it can use features that are stable in browsers even if their specs are still maturing through the W3C process.

How degradation works

Every @supports gate follows the same pattern:

/* Base: always applies */
.c-thing {
  /* functional styles */
}

/* Enhancement: only where supported */
@supports (feature: value) {
  .c-thing {
    /* progressive polish */
  }
}

The base styles are always sufficient. The @supports block adds a capability that improves the experience but is not required for functionality.

Testing

Porchlight’s test suite includes:

• 213 Playwright tests across 17 spec files
• Contrast tests that compute WCAG ratios from OKLCH values (not axe-core, which cannot parse OKLCH computed colors as of v4.12)
• Accessibility-mode tests for RTL, forced-colors, prefers-contrast, reduced-motion, and 200% zoom
• Smoke tests for every preview and docs page