CSS Goes Functional: @function and @custom-media Land as the Navigation API Hits Baseline

CSS & Layout

• CSS now has a native @function at-rule that defines reusable custom functions which accept typed arguments, contain logic, and return values — effectively a dynamic, programmable cousin of custom properties. The syntax (@function --name(--param <type> : default) returns <type> { result: ... }) supports type checking via angle-bracketed CSS types, multiple types through type(<number> | <percentage>), and comma-separated lists passed as a single argument by suffixing # and wrapping values in curly braces. Functions follow the cascade, so result can be redefined inside @media, @container, @supports or if() with the last valid value winning, and they support locally scoped custom properties plus nesting one function inside another. The feature is still experimental, so teams should check browser support and beware confusing it with Sass's similarly named but different @function before reaching for it in production. ^[9]
• The @custom-media at-rule lets developers create named aliases for media queries — for example @custom-media --tablet (768px <= width <= 1024px) — solving the perennial headache of repeating long or magic-number breakpoints across a codebase. Aliases are global (unlike element-scoped custom properties), support range syntax, boolean true/false toggles for feature-flagging, and can even nest by referencing one another, though circular references make all involved queries undefined. Defined in Media Queries Level 5, it has notable limits: aliases are not exposed to JavaScript's matchMedia(), and the @supports (at-rule(@custom-media)) detection trick itself only works in Chrome 148+. Until support broadens, PostCSS Custom Media can expand the rules at build time, and the scoping behavior is still under discussion and subject to change. ^[8]
• CSS-Tricks' almanac revisits offset-path, the property (formerly motion-path) that defines a track an element follows during animation, typically driven by animating offset-distance from 0 to 100% in @keyframes. SVG path() data can be lifted straight from an editor's d attribute into CSS, with unitless coordinates resolving to the SVG viewBox system or to pixels on HTML elements, and offset-rotate (auto, reverse, an angle, or auto combined with an angle) controls how the element faces along the curve. In practice path() and none are the only reliably working values today — shape(), url() references, and the various CSS shape functions are spec'd but largely non-functional — and the same animations are also reachable via the Web Animations API, SMIL's animateMotion, or GSAP. The renaming from motion-* to offset-* means older demos may need updating, and using both syntaxes is the safest path for now. ^[7]