663: HBD Dave, Silly Web Fun, Color-Mix Tips

May 5, 2025

60 min episode · 2 min read

Dave Rupert,Chris Coyier

Episode

60 min

Read time

2 min

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓CSS Custom Property Caching: Variables defined at root level with nested references become cached values. Attempting to override one part of a compound variable (like color-mix with var(--bg) and var(--error)) at a deeper nesting level fails because the browser already cached the calculation where it was defined.
✓Container Query Viewport Mixing: Container queries can check if a container equals viewport width minus specific pixels using calc(100vw - 160px). This enables responsive patterns like moving carousel arrows inside a container when insufficient outside space exists, mixing container units with viewport units in a single query.
✓Progressive Enhancement Testing: Using less cutting-edge browsers as daily drivers forces developers to implement proper fallbacks. Firefox lacks field-sizing property support, requiring developers to build progressive enhancement patterns that benefit all users, though this approach demands extra documentation and bug reporting effort.
✓HTML Includes Problem: HTML lacks native include functionality unlike CSS imports and JavaScript modules. Every website requires external tooling for basic HTML inclusion. Potential blockers include performance implications from blocking requests, preload scanner conflicts, circular dependencies, and security concerns, though streaming HTML may provide future solutions.
✓Blog Platform Independence: Developers and designers should avoid Medium for technical content because it creates no personal brand recognition. Nobody can name Medium bloggers. Using self-hosted solutions like Jekyll or Eleventy provides authenticity signals, experimentation playgrounds, and professional credibility that platform-hosted content cannot deliver.

What It Covers

Dave and Chris explore CSS color-mix gotchas with custom properties, debate browser compatibility testing strategies, discuss HTML includes limitations, container query viewport unit mixing, and advocate for developers maintaining independent blogs over Medium.

Key Questions Answered

•CSS Custom Property Caching: Variables defined at root level with nested references become cached values. Attempting to override one part of a compound variable (like color-mix with var(--bg) and var(--error)) at a deeper nesting level fails because the browser already cached the calculation where it was defined.
•Container Query Viewport Mixing: Container queries can check if a container equals viewport width minus specific pixels using calc(100vw - 160px). This enables responsive patterns like moving carousel arrows inside a container when insufficient outside space exists, mixing container units with viewport units in a single query.
•Progressive Enhancement Testing: Using less cutting-edge browsers as daily drivers forces developers to implement proper fallbacks. Firefox lacks field-sizing property support, requiring developers to build progressive enhancement patterns that benefit all users, though this approach demands extra documentation and bug reporting effort.
•HTML Includes Problem: HTML lacks native include functionality unlike CSS imports and JavaScript modules. Every website requires external tooling for basic HTML inclusion. Potential blockers include performance implications from blocking requests, preload scanner conflicts, circular dependencies, and security concerns, though streaming HTML may provide future solutions.
•Blog Platform Independence: Developers and designers should avoid Medium for technical content because it creates no personal brand recognition. Nobody can name Medium bloggers. Using self-hosted solutions like Jekyll or Eleventy provides authenticity signals, experimentation playgrounds, and professional credibility that platform-hosted content cannot deliver.

Notable Moment

The discussion revealed how Roblox games exploit psychological triggers with constant upsell prompts every six hours. One parent implemented a chore-based contract system trading household tasks for monthly Roblox premium subscriptions, creating prepaid accountability that reduced constant purchase requests from children.

Know someone who'd find this useful?