ShopTalk 680: CSS random(), IDs in HTML, and Chris Goes Browser Shopping
9 snips
Sep 1, 2025 Join a lively discussion that kicks off with a humorous take on personal anecdotes and quirky online finds. The speakers dive into the fascinating CSS random() function, revealing its creative applications for web design. They tackle the complexities of HTML IDs and browser behaviors, highlighting accessibility challenges. Explore the struggle of tab addiction as they share strategies to boost focus. Lastly, they critique governmental digital design efforts, emphasizing the need for historical understanding in reforming these systems. A mix of tech insights and light-hearted banter awaits!
AI Snips
Chapters
Transcript
Episode notes
CSS random() Is Powerful And Well-Designed
- CSS random() provides simple but powerful per-element randomness directly in CSS, enabling effects previously done in JS or preprocessors.
- It supports scoping (custom idents, match-element) and stepping, letting you lock or share random values efficiently.
Lock And Step Random Values
- When using random() set matching or custom idents to reuse the same random value across properties or elements.
- Use the step parameter to avoid sub-pixel floats when you need integer pixel results.
Prefer JS For Simple View Transitions
- Use the startViewTransition JS API for intuitive page transitions where you change the DOM in a callback.
- Expect the CSS-only view-transition pseudo-element API to be more complex and require learning of many pseudo-elements.