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
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.
INSIGHT

xywh() Creates Rectangular Paths

  • The xywh() function defines rectangular paths using x, y, width, and height for clip-path and offset-path.
  • It supports an optional round parameter to create rounded corners on the path.
INSIGHT

ray() Defines Directional Offset Paths

  • ray() defines a line-like offset path that starts at an origin and extends at a specified angle.
  • Keywords like closest-corner and furthest-corner let rays target container corners automatically.
Get the Snipd Podcast app to discover more snips from this episode
Get the app