Syntax - Tasty Web Development Treats

957: CSS: Advanced and Obscure

33 snips
Nov 24, 2025
In this lively discussion, Scott and Wes quiz each other on obscure CSS trivia. They delve into unique shape functions and explain CSS Scroll Snap types. The duo breaks down concepts like ray() for drawing lines and xywh() for rectangular paths. They explore CSS Paint history and discuss the quirks of print-color-adjust. Listeners will also discover the utility of cross-fade() and the benefits of using @property in CSS. Lastly, they cover all 10 CSS Filter Functions and fascinating font properties.
Ask episode
AI Snips
Chapters
Transcript
Episode notes
INSIGHT

CSS Shape Functions Are Rich

  • CSS has a surprising number of built-in shape functions beyond the familiar ones like ray and xywh.
  • Wes and Scott highlight super-ellipse (squircle) support and obscure functions that expand shape control.
INSIGHT

CSS Contains Over 100 Functions

  • There are far more CSS functions than most developers expect, spanning layout, units, and image ops.
  • Scott and Wes cite MDN's count of 108 CSS functions to illustrate this breadth.
ADVICE

Choose Scroll Snap Mode Intentionally

  • Use scroll-snap-type: mandatory when you want the viewport to always land on defined snap points.
  • Use proximity to let the browser decide when a near-snap should trigger and avoid obnoxious snapping.
Get the Snipd Podcast app to discover more snips from this episode
Get the app