(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
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.

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.