CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 24-2026
article
@function — Native Custom Functions in CSS
TAG: CSS FUNCTIONS
CSS now supports user-defined functions natively via the @function at-rule from the CSS Functions and Mixins Module Level 1, eliminating the need for Sass or build-time preprocessors. Functions accept typed parameters with default values, define locally-scoped variables, and can contain conditional @media blocks — something preprocessors fundamentally cannot do because they lack runtime context. The scoping model is dynamic rather than lexical: local variables shadow parameters, parameters shadow call-site custom properties, and call-site custom properties remain accessible inside the function without being explicitly passed. Chromium 139 shipped @function support; Firefox and Safari do not yet support it, but the cascade-based progressive enhancement pattern (static clamp() fallback followed by the @function call) avoids double computation thanks to CSSOM parse-time filtering. The @supports at-rule(@function) guard arrived only in Chromium 148 and adds no cross-browser safety net beyond the cascade pattern alone.
css-expect: Browser-Backed Unit Tests for CSS Custom Functions
TAG: TESTING
css-expect is a first-beta assertion library for testing CSS @function rules using a real browser engine as the source of truth, filling a gap left by the emergence of native CSS custom functions. Inspired by Sass True, it uses Playwright to launch a Chromium instance, loads your CSS files into a live document, generates temporary rules per assertion, attaches test elements, and reads computed values via getComputedStyle(). Assertions chain fluently: css.function("--double", ["4px"]).as("inline-size").equals("8px") tests a length computation, while .with({ "--gap": "2px" }) injects call-site custom properties to test dynamic scoping behavior. The library integrates directly into Vitest by accepting standard expect chains. An unsupported: "skip" mode gracefully bypasses assertions on browsers that lack @function support.
The WebKit team launched an interactive reference guide for CSS Grid Lanes at gridlanes.webkit.org, built by the same team that shipped the feature. The guide provides a live editable playground where you can switch between waterfall and brick layouts, drag a flow-tolerance slider, and play back tab order to understand accessibility implications. The cheat sheet covers every property and value: display: grid-lanes, fr units, minmax(), repeat(), auto-fill vs auto-fit, gap, spanning tracks, and explicit placement. Six demos — Photos, Recipes, Newspaper, Mega Menu, Timeline, and Pinboard — each include layout comparison panels against Flexbox, Multicolumn, and Grid. Grid Lanes currently works in Safari 26.4+; Web Inspector includes overlay support for DOM order numbers to assist with flow-tolerance tuning.
Apple's Liquid Glass is the new design material in iOS 26, providing GPU-accelerated real-time translucency and refraction effects to UI chrome like tab bars and widgets. Callstack published the @callstack/liquid-glass open-source library to bring this effect to React Native from day one. The library exposes LiquidGlassView, a drop-in glass panel component with props for interactive touch effects, effect style (clear vs regular), tintColor overlay, and colorScheme; and LiquidGlassContainerView, which merges adjacent glass elements with a morphing animation controlled via a spacing prop. The isLiquidGlassSupported flag enables fallback styling for iOS versions below 26 and Android. Apple's Human Interface Guidelines warn against overuse — the effect should be reserved for key navigational elements, not applied to full-screen backgrounds.
Progressively Enhanced Data-Dense Layout with Grid Lanes
TAG: LAYOUT
Project Wallace's CSS analyzer page displays dozens of unpredictable metrics, leaving large empty spaces when reports are sparse. Bart Veneman solved this with a three-tier progressive enhancement using@supports: browsers that support display: grid-lanes get the modern masonry layout; those that support only grid-template-rows: masonry get the legacy Firefox syntax; all others fall back to a standard auto-fit grid with minmax(24rem, 1fr) columns. A negation guard — @supports (grid-template-rows: masonry) and (not (display: grid-lanes)) — prevents the legacy syntax from activating in a hypothetical browser that supports both. The result is a visibly denser viewport without any JavaScript, delivering the density improvement wherever browser support allows.
The WebKit team presented six WWDC26 sessions covering Safari 27's major additions. Grid Lanes brings CSS-only masonry (waterfall and brick directions) to Safari with flow-tolerance for accessibility control. Customizable Select introduces appearance: base-select, unlocking full CSS control over ::picker(select), ::picker-icon, and ::checkmark pseudo-elements while preserving native accessibility semantics. The model element arrives in iOS, iPadOS, and macOS Safari 27 with environmentmap, stagemode="orbit", and a JavaScript animation API. In visionOS 27, the Immersive API extends model into full spatial environments. Web Extensions packaging no longer requires Xcode or a Mac — submissions now go through App Store Connect from any browser on any OS.
How to Use CSS @function — Native Custom Functions Explained
This Coding2GO video walks through the CSS @function at-rule with practical, beginner-friendly examples. It demonstrates a transparency helper that uses relative color syntax (OKLCH format) with a parametric alpha value, covering typed parameters with angle-bracket types like color and number, optional default values, and the type() function for union types such as number or percentage. The video clarifies a key conceptual difference from JavaScript: the result descriptor is not an early-return — CSS keeps evaluating the entire function body and the last matching result wins, which enables @media-based conditional return values. A final inner-radius function illustrates encapsulating the outer-radius-minus-padding formula using max() to prevent negative values. Browser support is noted as still limited to Chromium.
CSS now supports user-defined functions natively via the @function at-rule from the CSS Functions and Mixins Module Level 1, eliminating the need for Sass or build-time preprocessors. Functions accept typed parameters with default values, define locally-scoped variables, and can contain conditional @media blocks — something preprocessors fundamentally cannot do because they lack runtime context. The scoping model is dynamic rather than lexical: local variables shadow parameters, parameters shadow call-site custom properties, and call-site custom properties remain accessible inside the function without being explicitly passed. Chromium 139 shipped @function support; Firefox and Safari do not yet support it, but the cascade-based progressive enhancement pattern (static clamp() fallback followed by the @function call) avoids double computation thanks to CSSOM parse-time filtering. The @supports at-rule(@function) guard arrived only in Chromium 148 and adds no cross-browser safety net beyond the cascade pattern alone.
How to Use CSS @function — Native Custom Functions Explained
This Coding2GO video walks through the CSS @function at-rule with practical, beginner-friendly examples. It demonstrates a transparency helper that uses relative color syntax (OKLCH format) with a parametric alpha value, covering typed parameters with angle-bracket types like color and number, optional default values, and the type() function for union types such as number or percentage. The video clarifies a key conceptual difference from JavaScript: the result descriptor is not an early-return — CSS keeps evaluating the entire function body and the last matching result wins, which enables @media-based conditional return values. A final inner-radius function illustrates encapsulating the outer-radius-minus-padding formula using max() to prevent negative values. Browser support is noted as still limited to Chromium.
css-expect: Browser-Backed Unit Tests for CSS Custom Functions
css-expect is a first-beta assertion library for testing CSS @function rules using a real browser engine as the source of truth, filling a gap left by the emergence of native CSS custom functions. Inspired by Sass True, it uses Playwright to launch a Chromium instance, loads your CSS files into a live document, generates temporary rules per assertion, attaches test elements, and reads computed values via getComputedStyle(). Assertions chain fluently: css.function("--double", ["4px"]).as("inline-size").equals("8px") tests a length computation, while .with({ "--gap": "2px" }) injects call-site custom properties to test dynamic scoping behavior. The library integrates directly into Vitest by accepting standard expect chains. An unsupported: "skip" mode gracefully bypasses assertions on browsers that lack @function support.
The WebKit team launched an interactive reference guide for CSS Grid Lanes at gridlanes.webkit.org, built by the same team that shipped the feature. The guide provides a live editable playground where you can switch between waterfall and brick layouts, drag a flow-tolerance slider, and play back tab order to understand accessibility implications. The cheat sheet covers every property and value: display: grid-lanes, fr units, minmax(), repeat(), auto-fill vs auto-fit, gap, spanning tracks, and explicit placement. Six demos — Photos, Recipes, Newspaper, Mega Menu, Timeline, and Pinboard — each include layout comparison panels against Flexbox, Multicolumn, and Grid. Grid Lanes currently works in Safari 26.4+; Web Inspector includes overlay support for DOM order numbers to assist with flow-tolerance tuning.
Apple's Liquid Glass is the new design material in iOS 26, providing GPU-accelerated real-time translucency and refraction effects to UI chrome like tab bars and widgets. Callstack published the @callstack/liquid-glass open-source library to bring this effect to React Native from day one. The library exposes LiquidGlassView, a drop-in glass panel component with props for interactive touch effects, effect style (clear vs regular), tintColor overlay, and colorScheme; and LiquidGlassContainerView, which merges adjacent glass elements with a morphing animation controlled via a spacing prop. The isLiquidGlassSupported flag enables fallback styling for iOS versions below 26 and Android. Apple's Human Interface Guidelines warn against overuse — the effect should be reserved for key navigational elements, not applied to full-screen backgrounds.
Progressively Enhanced Data-Dense Layout with Grid Lanes
Project Wallace's CSS analyzer page displays dozens of unpredictable metrics, leaving large empty spaces when reports are sparse. Bart Veneman solved this with a three-tier progressive enhancement using@supports: browsers that support display: grid-lanes get the modern masonry layout; those that support only grid-template-rows: masonry get the legacy Firefox syntax; all others fall back to a standard auto-fit grid with minmax(24rem, 1fr) columns. A negation guard — @supports (grid-template-rows: masonry) and (not (display: grid-lanes)) — prevents the legacy syntax from activating in a hypothetical browser that supports both. The result is a visibly denser viewport without any JavaScript, delivering the density improvement wherever browser support allows.
The WebKit team presented six WWDC26 sessions covering Safari 27's major additions. Grid Lanes brings CSS-only masonry (waterfall and brick directions) to Safari with flow-tolerance for accessibility control. Customizable Select introduces appearance: base-select, unlocking full CSS control over ::picker(select), ::picker-icon, and ::checkmark pseudo-elements while preserving native accessibility semantics. The model element arrives in iOS, iPadOS, and macOS Safari 27 with environmentmap, stagemode="orbit", and a JavaScript animation API. In visionOS 27, the Immersive API extends model into full spatial environments. Web Extensions packaging no longer requires Xcode or a Mac — submissions now go through App Store Connect from any browser on any OS.
CSS native custom functions landed as the week's biggest styling story. The @function at-rule from the CSS Functions and Mixins Module Level 1 is now supported in Chromium 139, enabling typed parameters with defaults, locally-scoped variables, and even @media-based conditional return values — capabilities preprocessors like Sass fundamentally cannot replicate at runtime. A companion library, css-expect, provides Playwright-backed unit tests for @function rules integrating directly into Vitest, filling the testing gap left by this new primitive. The @supports at-rule(@function) guard arrived only in Chromium 148, so the recommended progressive-enhancement pattern remains a cascade-based clamp() fallback followed by the @function call.
CSS Grid Lanes also had a strong showing this week, driven by WWDC26 coverage. The WebKit team launched an interactive reference guide at gridlanes.webkit.org — complete with live editable demos for waterfall and brick layout modes, a flow-tolerance slider for accessibility tuning, and six real-world demo layouts (Photos, Recipes, Newspaper, Mega Menu, Timeline, Pinboard) compared against Flexbox, Multicolumn, and standard Grid. Project Wallace published a practical three-tier@supports progressive enhancement using Grid Lanes that avoids JavaScript entirely, while the WWDC26 sessions also spotlighted CSS Grid Lanes, customizable select with appearance: base-select, and the <model> element arriving in Safari 27.
On the visual effects front, Callstack released @callstack/liquid-glass, an open-source React Native library bringing Apple's iOS 26 Liquid Glass material to mobile — exposing LiquidGlassView and LiquidGlassContainerView components with props for effect style, tintColor, colorScheme, and an isLiquidGlassSupported fallback flag for older iOS and Android devices.
Key Takeaways
CSS @function (Chromium 139+) enables native custom functions with typed params, local variables, and @media-conditional returns — eliminating Sass for many use cases, with a cascade-based clamp() fallback for cross-browser safety.
CSS Grid Lanes now has a comprehensive interactive reference at gridlanes.webkit.org (Safari 26.4+), making masonry-style layouts achievable without JavaScript using @supports-tiered progressive enhancement.
The @callstack/liquid-glass library brings Apple's iOS 26 Liquid Glass effect to React Native from day one, with LiquidGlassView, LiquidGlassContainerView, and isLiquidGlassSupported for graceful degradation.
