Enhancements

Porchlight includes a set of progressive enhancement features that activate only where the browser supports them. Enhancement rules are gated behind @supports. Unsupported browsers skip them; application-owned demo wrappers still need their own base layout and fallback appearance. Browser feature gates do not protect against a bundler that cannot parse the enclosed CSS.

interpolate-size: allow-keywords

Allows height and width to animate to and from auto and content keywords. This enables smooth expand/collapse animations on accordion panels, detail rows, and other auto-sized elements without JavaScript measurement.

Set globally on :root where supported. The accordion and expandable table rows use this for smoother animations, with a grid-template-rows fallback when unavailable.

Sticky shell shadow

The .pl-c-sticky-shell__bar queries its own sticky state and gains a shadow only while stuck. Its decorative pseudo-element responds to the query; the non-sticky wrapper is not the query container. Keep the bar inside a wrapper that also contains enough content to scroll:

<div class="pl-c-sticky-shell">
  <header class="pl-c-sticky-shell__bar">Activity</header>
  <div><!-- Scrollable content --></div>
</div>

The app owns wrapper dimensions, overflow, and bar padding. Set --pl-c-sticky-shell-offset on the bar when another fixed header needs space. For selective imports, load components/scroll-region.css as well as core and enhancements.css; the base component provides sticky positioning and a persistent border even without scroll-state support. compat.css includes this fallback. The full bundle includes both. For overflow-edge indicators and sticky table separators, see Scroll Region.

text-box optical alignment

Buttons, badges, and the dialog close button trim the cap-height half-leading via text-box: trim-both cap alphabetic. This removes the ~1px inline-box overshoot that makes single-line labels appear slightly off-center. The effect is subtle but improves the precision of control alignment.

No action needed from you; this applies automatically to the listed components where supported.

Grid dividers

Draw vertical dividers between grid items, rendered purely within the gap (the gap width is preserved). Enable with data-dividers="true" on any .pl-l-grid:

<div class="pl-l-grid" data-dividers="true">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Uses the CSS Gap Decorations properties (rule and rule-visibility-items). Unsupported browsers render a normal grid gap with no divider line.

Typed attr() swatch

A color chip that reads its color value directly from a data-color attribute, type-checked as <color>. Eliminates the need for inline style="background: ..." on static color chips:

<span class="pl-c-swatch" data-color="oklch(58% 0.18 260deg)"></span>

Where typed attr() is supported, a missing attribute uses the border color token. Where unsupported, no swatch background is supplied by this rule. Define the swatch’s dimensions/display and an unsupported-browser fallback in your app CSS; the preview’s square geometry is docs-only styling.

Checking browser support

Each feature degrades independently. To see which enhancements are active in your browser, open the enhancements preview page. For a full breakdown of which features are required vs progressive vs experimental, see the Browser Support guide.