Stop using JS for that: Moving features to CSS and HTML
summary
A practical tour of features that replace small chunks of JS with HTML and CSS: build a toggle from a native checkbox styled via appearance: none plus ::before and :checked, use scroll-behavior: smooth with prefers-reduced-motion and scroll-margin/scroll-padding for fixed headers, use details+summary and the open attribute for accordions, use dialog with showModal() (still one tiny JS call) and top-layer/backdrop styling, apply container queries, the :has() selector for conditional UI, and Chrome’s scroll‑driven animations and field-sizing to cut brittle JS.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 5:01Custom switches with HTML/CSS
- 11:22Smooth scrolling with CSS
- 16:02Native accordions and dialogs
- 21:49Dialog backdrop styling
- 23:17Container queries and has selector
- 25:10New CSS features
- 27:21Scroll-driven animations
- 28:26Why native features
related talks
34mDon't Use JS for That: Moving Features to CSS and HTML
36mStop using JS for that: moving features from JS to CSS & HTML
40mStop using JavaScript for that - Moving features from JS to CSS and HTML
31m"Stop using JavaScript for that: moving features from JS to CSS and HTML"
38mI Can’t Believe It’s Not JavaScript
31mI Can't Believe It's Not JavaScript!
39mYou Don’t Need JavaScript for That
24mI Can't Believe It's Not JS