Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

957: CSS: Advanced and Obscure

November 24, 2025·38 min·3 clips

Did you know there are 108 functions in CSS, far more than most developers realize?

Wes Bos and Scott Tolinski structure the episode as a mutual quiz where each host attempts to stump the other with obscure CSS knowledge. The show opens with CSS shape functions: xywh defines a rectangular clip path by specifying x, y, width, and height with optional rounded corners via the round keyword; ray defines an offset path line segment that begins at an offset position and extends at a specified angle, useful for animating elements along directional paths; and super-ellipse, part of the CSS selectors specification, allows custom squircle-style corner shapes beyond what border-radius alone provides. Scott covers scroll-snap-type, clarifying that mandatory forces snapping to the nearest snap point while proximity leaves the decision to the user agent based on scroll position, explaining the practical difference between carousel-style mandatory snapping and looser reading flows. The CSS namespaces segment introduces the at-namespace rule and the pipe selector, a feature present in CSS for over a decade that allows selecting elements by JavaScript-created namespace, useful for scoping styles when injecting content into third-party pages. The CSS Houdini discussion touches on the css-paint API, still unimplemented in Firefox as of 2025 despite a bug tracker entry from 2016, noting that Chrome has had it since version 17 while the broader Houdini spec remains unfinalized. Print-color-adjust, a 2025 Baseline API, controls whether the browser applies its own optimizations to printed output, and setting it to exact prevents removal of background images during printing. Cross-fade, currently Safari and Chrome only, accepts two image URL functions and a percentage to blend them on a single element, eliminating the need for stacked divs with separate opacity layers. The at-property segment covers three benefits: enabling animation of CSS variables (such as gradient angles), controlling inheritance so a registered variable does not automatically cascade to all descendants, and setting a typed default value. The episode closes with a quiz on all ten CSS filter functions — blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia — and extends into font properties including font-variant, font-feature-settings, font-synthesis, and font-palette, the latter used for color fonts that embed multiple color palettes within a single typeface.

Listen to the show on

Apple Podcasts Spotify

Play clips from this episode More from Syntax - Tasty Web Development Treats