(BUSAN.SASHIMI)
Weekly Digest // STYLING — Week 35-2026
paletteWeekly Report

Flexbox Learns to Balance Wrapped Lines — Week 35 Styling

Flex line balancing, named CSS feature detection, and registered custom properties replace fragile layout guesses with explicit browser contracts.

calendar_todaysummarizeWeek 35-2026
TAG: CSS LAYOUTREAD_TIME: 8_MIN

Balancing Flex Items with flex-wrap: balance

flex-wrap: balance, shipping first in Chrome 150, redistributes wrapped flex items to avoid an orphaned final row. flex-line-count can also request a minimum number of lines without shrinking the container itself. Ahmad Shadeed compares those declarations with container-query widths, conditional clamp math, grouping markup, and pseudo-element breaks, showing how much brittle knowledge the native model removes. The masonry experiment also exposes a constraint: visual columns can diverge from reading order, so accessibility review remains necessary.

Read Articlearrow_forward
CSS FEATURE18:37

8 New CSS, JS and HTML Features You Should Know

Syntax surveys a wave of browser features that reduce small libraries and imperative glue. Relative-color alpha syntax adjusts transparency at runtime, progress() normalizes a value between two bounds, and Promise.all with keyed results preserves names instead of relying on array positions. The episode also examines declarative HTML controls and typographic trimming that make common interface behavior easier to express. Support is uneven across stable and preview browsers, so each feature belongs behind feature detection and a readable fallback rather than a release-date assumption.

AI_INFOGRAPHIC
8 New CSS, JS and HTML Features You Should Know — infographic
WATCH_VIDEOarrow_outward
CSS FEATURE9:04

Nobody told me CSS could do this

Kevin Powell builds a scroll-triggered entrance animation that runs once and stays completed using only CSS. A view timeline flips an --in-view custom property, a container style query starts the card animation, and animation-play-state pauses the finished state when the element leaves the viewport. An animation-range controls when entry begins, while indexed custom properties create a stagger across cards. The result is a clever progressive enhancement; teams still need reduced-motion handling and fallbacks for browsers without scroll-driven animations or style queries.

AI_INFOGRAPHIC
Nobody told me CSS could do this — infographic
WATCH_VIDEOarrow_outward
FRONTEND PRACTICE59:07

After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly (ep729)

ShopTalk Show’s roundtable moves from production-video workflows to small interface decisions with surprisingly large consequences. Microlighter uses the CSS Custom Highlight API to color token ranges without inserting a forest of spans into the DOM, which can simplify markup and accessibility. A debate over light, dark, and system themes shows that “three states” really encode the user’s explicit choice plus an operating-system state. The episode’s practical thread is constraint-driven tooling: choose the smallest control and editing pipeline that remain understandable to the people who operate them.

AI_INFOGRAPHIC
After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly (ep729) — infographic
WATCH_VIDEOarrow_outward
TAG: FEATURE DETECTIONREAD_TIME: 7_MIN

Feature Detecting CSS with @supports named-feature()

@supports named-feature() detects behavior that property parsing cannot reveal, such as whether anchor positioning follows transforms or whether a container scrolls on only one axis. Chrome 150, Firefox 156, and Safari Technology Preview begin the platform support story, but individual keywords differ and older implementations can return false negatives. The mechanism is intentionally limited to named, testable behavior changes rather than becoming a generic browser-version switch.

TAG: CUSTOM PROPERTIESREAD_TIME: 3_MIN

Controlling When CSS Custom Properties Compute

An unregistered custom property stores a token stream, so sibling-index() and relative units can compute in the element where var() is consumed. Registering the same property with @property and a numeric syntax computes it earlier in the declaration context, changing the result from 1 to 2 in the example. URL resolution can move too: a registered url pins to its declaring stylesheet. @property is therefore not just validation metadata; it chooses the context in which parts of a value become concrete.

summarizeDigest_Summary

Chrome 150 ships flex-wrap: balance, allowing Flexbox to redistribute items across lines instead of leaving a single orphan on the final row. The related flex-line-count property can request a minimum number of lines, opening layout options that previously needed container queries, calculated max-width values, or extra grouping markup. Progressive enhancement remains essential because support begins in one browser.

@supports named-feature() addresses a different gap: behaviors that ordinary property or selector checks cannot detect. The first named capabilities cover transform-aware anchor positioning and single-axis scroll containers. The keywords are deliberately narrow, testable contracts, although shipping gaps mean some browsers that implement the underlying behavior still return a false negative.

Registering a custom property with @property changes when its value is computed. An unregistered token stream such as sibling-index() can evaluate where var() is consumed, while a typed number computes where the custom property is declared. Relative units, container units, and URLs share this timing distinction, so registration affects semantics as well as validation and animation.

The videos add a implementation tour to that standards picture: relative color and progress() simplify calculations, view timelines plus style queries can preserve a one-shot reveal, and the Custom Highlight API colors code without token spans in the DOM. The common requirement is disciplined progressive enhancement—new syntax should reduce complexity without hiding support, motion, or accessibility costs.

Key Takeaways
  • Treat flex-wrap: balance and flex-line-count as progressive enhancement; preserve a readable flex-wrap: wrap fallback and verify visual order against reading order.
  • Use @supports named-feature() only for its specified behavioral keywords, and account for false negatives in browsers that shipped a capability before its detector.
  • Register custom properties intentionally: @property can pin values to the declaration context, so test relative units, sibling functions, and URLs where inheritance crosses components.