CSS Grows Up: Native Functions, Custom Media Aliases, and a Baseline Navigation API

CSS & Layout

• CSS now has a native @function at-rule for defining reusable custom functions that accept arguments, run logic, and return typed values — effectively a dynamic, programmable version of custom properties. The syntax @function --name(--param <type> : default) [returns <css-type>] uses a result descriptor to output a value, with type checking via angle brackets (e.g., <length>, <color>) so a mismatched argument invalidates the call and catches bugs early. Functions support comma-separated list arguments (suffix # on the type, wrap calls in curly braces), follow the CSS cascade so the last valid result wins inside @media/@container/@supports blocks, and can nest other functions while keeping internal custom properties locally scoped. It remains experimental, and note the deliberate distinction from Sass's similarly named but different @function. ^[10]
• The @custom-media at-rule lets you alias media queries — e.g., @custom-media --tablet (768px <= width <= 1024px) — so long or repeated conditions are defined once and reused as @media (--tablet). Aliases are global to the stylesheet (not element-scoped like custom properties), support booleans (true/false) for feature flagging, the full and/or/not operator set, range syntax, and can even reference other aliases, though loops render all involved queries undefined. Defined in Media Queries Level 5, it is not exposed to JavaScript's matchMedia(), and since browser support is partial you can gate it with @supports (at-rule(@custom-media)) or expand it at build time with PostCSS Custom Media. This eliminates a common source of breakpoint drift and shaves repeated bytes for boilerplate like prefers-reduced-motion. ^[9]
• CSS-Tricks updated its almanac entry for offset-path, the property that defines a motion path an element follows during animation; it began life as motion-path and, with all motion-* properties, is being renamed offset-*, so using both syntaxes is advised for now. The property itself isn't animated — you animate offset-distance (old motion-offset) to 100% via @keyframes — and you can control element rotation along the path with offset-rotate (auto, reverse, a set angle, or auto plus angle). In practice only path() and none reliably work, even though the spec lists shape(), url(), and CSS shape functions like circle() and polygon(); the same animations are also drivable through the Web Animations API. The entry flags SMIL's animateMotion and GreenSock/GSAP as established alternatives. ^[8]