957: CSS: Advanced and Obscure

What It Covers

Scott and Wes challenge each other with obscure CSS questions covering advanced functions, properties, and specifications including shape functions, scroll snap, namespaces, Houdini APIs, filter functions, and variable font properties.

Key Questions Answered

• •CSS Shape Functions: Five valid CSS shape functions exist for clip-path and offset-path: x-y-w-h (defines rectangular paths with x, y, width, height coordinates), ray (creates line segments at specified angles), and super-ellipse (enables custom squircle borders beyond standard border-radius).
• •CSS Custom Properties Registration: The @property rule allows registering CSS variables with three key benefits: animate previously un-animatable properties like gradient angles, control inheritance behavior to prevent cascading when needed, and set default values with type safety for calculations.
• •CSS Namespaces with Pipe Selector: CSS supports namespace declarations using @namespace to scope elements created via document.createElementNS, then select them using the pipe selector (namespace|element). Useful for third-party JavaScript injecting elements while avoiding conflicts, though most use cases solve with classes.
• •CSS Filter Functions Arsenal: Ten CSS filter functions modify images and elements: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Drop-shadow works on masked elements unlike box-shadow, while opacity as filter enables stacking context control.