Porchlight CSS workbench

Guide Porchlight CSS

Enhancements

Progressive enhancement features gated behind @supports. The framework works without them; they add polish where the browser supports them.

52 components 51 stable 1 experimental

Live preview Content source Style source

Command

Search Porchlight

Enhancements

Porchlight includes a set of progressive enhancement features that activate only where the browser supports them. Every enhancement is gated behind @supports, so unsupported browsers simply render the base styles with no visual breakage. These features are never required for a component to function.

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

A scroll container wrapper that adds an elevation shadow to its sticky child when the child is stuck to the top. Replaces the JavaScript scroll-listener pattern entirely.

<div class="c-sticky-shell">
  <header class="c-sticky-shell__bar">Sticky bar</header>
  <!-- scrolling content -->
</div>

Wrap any scroll region in .c-sticky-shell and place the sticky element in .c-sticky-shell__bar. When the bar becomes stuck, it gains box-shadow-2 plus a translucent backdrop-filter: blur background.

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 .l-grid:

<div class="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="c-swatch" data-color="oklch(58% 0.18 260deg)"></span>

Falls back to the border color token when data-color is absent or the feature is unsupported.

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.