680: CSS random(), IDs in HTML, and Chris Goes Browser Shopping

What It Covers

Chris and Dave explore CSS random() function capabilities, view transitions complexity, HTML ID duplication issues affecting 45% of Chrome page loads, and browser feature comparisons including Arc alternatives and tab management strategies.

Key Questions Answered

• •CSS random() function: Generates dynamic random values client-side without preprocessors, supports custom idents to lock values across properties (making squares), match-element keyword to share values across multiple elements, and step parameters to avoid sub-pixel rendering issues.
• •View transitions pseudo-elements: The DOM tree requires navigating multiple pseudo-element layers (view-transition, view-transition-group, view-transition-root, view-transition-old/new) creating a skill barrier. Developers proficient with these complex selectors and keyframe animations will differentiate themselves from basic fade implementations.
• •HTML ID duplication crisis: Chrome data shows 45% of all HTML page loads contain duplicate IDs, breaking accessibility features like aria-labelledby and aria-describedby. WebAIM reports 48% of forms lack proper labels, making screen reader navigation impossible for critical form inputs.
• •Browser tab psychology: Installing tab limiter extensions that restrict tabs per domain (setting YouTube, Blue Sky to one tab maximum) prevents dopamine-driven tab accumulation during meetings. This forces working within constraints rather than accumulating weekend backlogs of unviewed content.