terminal
Weekly Digest // STYLING — Week 32-2026
paletteWeekly Report

CSS Gap Decorations Reach Chromium — Week 32 CSS & Styling

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 32-2026
CSS LAYOUT

Grid and Flex Gap Decorations Land in Chromium 149

Chrome and Edge 149 extend column-rule to grid and flexbox, add row-rule, and provide a shared rule shorthand. The stabilized design can repeat decorations automatically, inset caps and junctions independently, hide rules beside empty cells, and choose whether row or column rules paint on top. This removes many border and pseudo-element workarounds without changing layout markup. Other engines are engaged but not yet shipping support, so essential separators still need a fallback; purely decorative rules can be adopted today as progressive enhancement.

Read Articlearrow_forward
Article · INTERACTION DESIGNREAD TIME: 10m

A Two-State Dark-Mode Toggle Can Preserve All Three States

Lea Verou argues that a header theme control should expose the user's immediate goal—make the current page lighter or darker—rather than leak all three implementation states. The underlying model still distinguishes system, light, and dark. On the first interaction, store the opposite explicit value; when the next interaction matches the resolved system theme, remove the override. Crucially, do not erase a stored choice merely because the operating system later changes. That preserves user intent while keeping the common interaction to one compact, reversible action.

READ_FULL_LOGarrow_forward
Article · PROGRESSIVE CSSREAD TIME: 7m

Custom CSS Highlights Keep a Semantic Fallback

The Custom Highlight API lets JavaScript create Range objects, group them in Highlight instances, register those groups through CSS.highlights, and style them with named ::highlight() pseudo-elements. Piccalilli starts one layer earlier: the emphasized words are semantic <mark> elements with usable baseline styling. The enhanced highlight styles live inside @supports selector(::highlight(...)), so unsupported browsers and failed scripts retain the content and emphasis rather than falling back to an unmarked sentence.

READ_FULL_LOGarrow_forward
Article · SCROLLINGREAD TIME: 4m

CSS scroll-axis-lock Enables Immediate Diagonal Panning

Browsers normally apply axis locking, or railing, when a gesture begins mostly vertically or horizontally, suppressing smaller movement on the other axis. Chromium 153 adds scroll-axis-lock: none, allowing a two-dimensional scroller to follow diagonal input immediately; auto preserves the platform behavior. The property is not supported in Firefox or Safari yet, but can be declared safely as progressive enhancement or tested with @supports. It belongs on canvases and surfaces designed for free panning, since removing railing also makes straight scrolling more jittery.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

CSS gap decorations are now available in Chrome and Edge 149, extending column-rule to grid and flexbox and adding row-rule. The stable shape includes automatic rule repetition, independent cap and junction insets, empty-cell visibility control, and explicit overlap order. Unsupported browsers simply omit the decoration, making the feature a natural progressive enhancement while other engines continue standards work.

Lea Verou applies the same preference for small interfaces to dark mode. Her two-state control keeps a three-state model underneath: the first interaction stores the opposite explicit theme, and the next removes that override to return to the current system preference. The shared lesson is to expose the user's immediate goal, not every state or implementation detail the underlying model can represent.

The Custom Highlight API shows how to preserve that restraint when JavaScript is involved. Mark meaningful text with semantic <mark> elements first, then register Highlight ranges and enhance them through ::highlight() inside a support query. If scripting or browser support fails, the emphasis remains readable instead of disappearing.

Finally, Chromium 153 adds scroll-axis-lock: none for genuinely two-dimensional canvases and scrollers. It disables the browser's usual railing so diagonal input is honored immediately, but because platform defaults normally prevent accidental drift, the declaration belongs only on surfaces where unrestricted panning is the intended interaction.

Key Takeaways
  • Use row-rule, column-rule, and the rule shorthand as progressive decoration in Chromium 149+, retaining essential separators for browsers without support.
  • Keep dark-mode persistence reversible: store an explicit light or dark override only after user interaction, and remove it when the next toggle returns to the resolved system theme.
  • Start custom highlights with semantic <mark> fallback content, then register ranges with CSS.highlights and gate ::highlight() styling with @supports.