CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 20-2026
article
WebKit Features in Safari 26.5
TAG: BROWSER UPDATE
Safari 26.5 ships several notable CSS additions. The new :open pseudo-class provides a unified selector for styling open states of details, dialog, select, and input elements — replacing the patchwork of [open] attribute selectors. The CSS random() function receives a spec-aligned update: named cache keys now default to global scope, and a new element-scoped keyword restores per-element behavior. Anchor Positioning sees five bug fixes covering media query re-evaluation, chained anchors, and sticky-positioned parents. Scroll-driven animations gain four reliability fixes, and the SVG color-interpolation attribute now supports linearRGB gradients for smoother color transitions.
CSS if() Function Brings Native Conditional Logic to Stylesheets
TAG: CSS LOGIC
The CSS if() function, now in the CSS 2025 snapshot and shipping in Chrome 137+, adds inline conditional logic directly to property values. It supports three condition types: style queries that branch on custom property values, inline media queries that bring responsive sizing next to the property it affects, and feature queries that replace @supports blocks. The syntax separates condition-value pairs with semicolons and requires an else clause to avoid invalid declarations in supporting browsers. Nesting if() calls enables multi-axis component variants, while combining it with calc() and clamp() produces sophisticated fluid sizing. The author covers progressive enhancement strategy, common pitfalls — missing semicolons, over-nesting — and performance considerations. Firefox and Safari support is still in development.
Fluid sizing with clamp() and container query units often produces sub-pixel values like 19.7px or 143.2px. Ahmad Shadeed demonstrates how the CSS round() function — accepting a mode (up, down, nearest, to-zero), a value, and an interval — snaps those computed values to a predictable step. Practical examples include a card component where font-size rounds to the nearest 4px, a type scale that aligns five fluid sizes to consistent increments, and a snap-to-line editorial layout. For intrinsic heights inside CSS Grid, he combines round() with the newer calc-size(auto, ...) to resolve actual element height before rounding. The article recommends treating round() as a progressive enhancement rather than a hard dependency.
Beyond ol and ul, HTML has five distinct list types and a decision tree for choosing correctly. Control lists use select with option and optgroup (for fixed choices) or input with datalist (for suggestions on any input type, including range and week). Ordered lists encode sequence-dependent meaning through the reversed and start attributes. Description lists (dl, dt, dd) — HTML5's evolved definition list — handle key-value metadata and JSON debugging. The menu element semantically groups interactive controls like toolbar buttons, removing the need for role=menu on a ul. The article includes CSS patterns for displaying dl as a two-column flex layout and for using the typed attr() function and writing-mode to position datalist tick marks on a range input.
A carousel layout bug — caused by a stray margin-block-end on an img inside a grid area — led to a deep investigation of fluid typography with container queries. The author explains that the middle argument of clamp() is the slope-intercept equation y = mx + b, where CSS length units like cqi encode the coefficient and the contextual variable together. Once MIN, MAX, and the two container widths W1 and W2 are decided, the slope and intercept become derived values. The article provides the explicit formulas, a worked example with real pixel values, and a CSS custom property snippet that parameterizes all four knobs so the math auto-recalculates. It also covers hyphens: auto for long compound words, coupling fluid padding with fluid font-size, and the critical distinction between a container's content box (what cqi measures) and its outer box (what DevTools shows).
Learn CSS sibling-index() and sibling-count() in 5 Minutes
This five-minute tutorial demonstratesCSS sibling-index() and sibling-count() — two new functions that expose an element's position and the total number of siblings directly in CSS. For animation staggering, sibling-index() replaces hardcoded nth-child delays: multiplying it by a duration and subtracting one produces a zero-based delay that scales automatically regardless of how many elements exist in HTML. For dynamic color gradients, dividing sibling-index() minus one by sibling-count() minus one yields a 0-to-1 progress value that drives OKLCH lightness across a range. A bonus example shows a 3D image carousel built with pure HTML and CSS using sibling-index() and trigonometry inside transform. Browser support currently excludes Firefox.
Build Bulletproof Color Systems with CSS contrast-color()
Kevin Powell introduces the CSS contrast-color() function — now baseline-newly-available across all browsers — which automatically picks black or white text based on a given background color. He builds a button theming system using a private custom property pattern (prefixed with underscore) to separate internal defaults from external overrides, allowing a single --button-surface variable to cascade through background, hover state, and contrast-color() calls without redundant declarations. For hover states he combines color-mix() in sRGB with neutral palette tokens, and demonstrates how light-dark() on those tokens lets the mix automatically lighten or darken depending on the active color scheme. The key limitation: contrast-color() currently only outputs white or black, not arbitrary colors.
Safari 26.5 ships several notable CSS additions. The new :open pseudo-class provides a unified selector for styling open states of details, dialog, select, and input elements — replacing the patchwork of [open] attribute selectors. The CSS random() function receives a spec-aligned update: named cache keys now default to global scope, and a new element-scoped keyword restores per-element behavior. Anchor Positioning sees five bug fixes covering media query re-evaluation, chained anchors, and sticky-positioned parents. Scroll-driven animations gain four reliability fixes, and the SVG color-interpolation attribute now supports linearRGB gradients for smoother color transitions.
Learn CSS sibling-index() and sibling-count() in 5 Minutes
This five-minute tutorial demonstratesCSS sibling-index() and sibling-count() — two new functions that expose an element's position and the total number of siblings directly in CSS. For animation staggering, sibling-index() replaces hardcoded nth-child delays: multiplying it by a duration and subtracting one produces a zero-based delay that scales automatically regardless of how many elements exist in HTML. For dynamic color gradients, dividing sibling-index() minus one by sibling-count() minus one yields a 0-to-1 progress value that drives OKLCH lightness across a range. A bonus example shows a 3D image carousel built with pure HTML and CSS using sibling-index() and trigonometry inside transform. Browser support currently excludes Firefox.
Build Bulletproof Color Systems with CSS contrast-color()
Kevin Powell introduces the CSS contrast-color() function — now baseline-newly-available across all browsers — which automatically picks black or white text based on a given background color. He builds a button theming system using a private custom property pattern (prefixed with underscore) to separate internal defaults from external overrides, allowing a single --button-surface variable to cascade through background, hover state, and contrast-color() calls without redundant declarations. For hover states he combines color-mix() in sRGB with neutral palette tokens, and demonstrates how light-dark() on those tokens lets the mix automatically lighten or darken depending on the active color scheme. The key limitation: contrast-color() currently only outputs white or black, not arbitrary colors.
CSS if() Function Brings Native Conditional Logic to Stylesheets
The CSS if() function, now in the CSS 2025 snapshot and shipping in Chrome 137+, adds inline conditional logic directly to property values. It supports three condition types: style queries that branch on custom property values, inline media queries that bring responsive sizing next to the property it affects, and feature queries that replace @supports blocks. The syntax separates condition-value pairs with semicolons and requires an else clause to avoid invalid declarations in supporting browsers. Nesting if() calls enables multi-axis component variants, while combining it with calc() and clamp() produces sophisticated fluid sizing. The author covers progressive enhancement strategy, common pitfalls — missing semicolons, over-nesting — and performance considerations. Firefox and Safari support is still in development.
Fluid sizing with clamp() and container query units often produces sub-pixel values like 19.7px or 143.2px. Ahmad Shadeed demonstrates how the CSS round() function — accepting a mode (up, down, nearest, to-zero), a value, and an interval — snaps those computed values to a predictable step. Practical examples include a card component where font-size rounds to the nearest 4px, a type scale that aligns five fluid sizes to consistent increments, and a snap-to-line editorial layout. For intrinsic heights inside CSS Grid, he combines round() with the newer calc-size(auto, ...) to resolve actual element height before rounding. The article recommends treating round() as a progressive enhancement rather than a hard dependency.
Beyond ol and ul, HTML has five distinct list types and a decision tree for choosing correctly. Control lists use select with option and optgroup (for fixed choices) or input with datalist (for suggestions on any input type, including range and week). Ordered lists encode sequence-dependent meaning through the reversed and start attributes. Description lists (dl, dt, dd) — HTML5's evolved definition list — handle key-value metadata and JSON debugging. The menu element semantically groups interactive controls like toolbar buttons, removing the need for role=menu on a ul. The article includes CSS patterns for displaying dl as a two-column flex layout and for using the typed attr() function and writing-mode to position datalist tick marks on a range input.
A carousel layout bug — caused by a stray margin-block-end on an img inside a grid area — led to a deep investigation of fluid typography with container queries. The author explains that the middle argument of clamp() is the slope-intercept equation y = mx + b, where CSS length units like cqi encode the coefficient and the contextual variable together. Once MIN, MAX, and the two container widths W1 and W2 are decided, the slope and intercept become derived values. The article provides the explicit formulas, a worked example with real pixel values, and a CSS custom property snippet that parameterizes all four knobs so the math auto-recalculates. It also covers hyphens: auto for long compound words, coupling fluid padding with fluid font-size, and the critical distinction between a container's content box (what cqi measures) and its outer box (what DevTools shows).
This week brought a wave of new CSS capabilities landing in browsers. Safari 26.5 shipped the :open pseudo-class for unified styling of open states across details, dialog, select, and input elements, alongside a spec-aligned update to CSS random() where named cache keys now default to global scope, plus five Anchor Positioning bug fixes and four Scroll-driven animation reliability patches. Meanwhile, the CSS if() function — now in the CSS 2025 snapshot and shipping in Chrome 137+ — adds inline conditional logic supporting style queries, inline media queries, and feature queries directly inside property values, with Firefox and Safari support still in development.
New math and position functions are expanding what is achievable with pure CSS. Ahmad Shadeed demonstrated how round() snaps fluid sizing values from clamp() and container query units to predictable pixel steps — for example, rounding font-size to the nearest 4px — and combining it with calc-size(auto, ...) to handle intrinsic heights in CSS Grid. Separately, CSS sibling-index() and sibling-count() now expose an element's position and sibling total directly in CSS, enabling dynamic staggered animations and OKLCH color gradients without JavaScript, with a bonus 3D carousel built entirely from HTML and CSS.
Two articles rounded out the week's learning content. Kevin Powell built a button theming system with contrast-color() — now baseline-newly-available across all browsers — showing how it chains with color-mix() and light-dark() through private custom property patterns. A deep-dive into HTML list semantics clarified the five distinct list types beyondol and ul: select with datalist, reversed ordered lists, dl description lists, and the menu element for interactive control groups, with CSS patterns for datalist tick marks using the typed attr() function.
Key Takeaways
CSS if() is shipping in Chrome 137 with style query, inline media query, and feature query conditions — start experimenting today, but gate on @supports since Firefox and Safari support is still in development.
CSS round() is the missing piece for fluid sizing: wrap your clamp() output in round(nearest, ..., 4px) to eliminate sub-pixel font sizes and spacing values, and combine with calc-size(auto) for intrinsic Grid heights.
contrast-color() is now cross-browser baseline — pair it with a private custom property pattern and color-mix() in sRGB to build fully automated, scheme-aware button theming without any JavaScript color logic.
