Stop using JS for that: moving features from JS to CSS & HTML
summary
Shows concrete replacements for common JS widgets: a toggle built from a checkbox with appearance: none + :checked + :focus-visible, a datalist autosuggest and input[type=color] using native pickers, smooth fragment scrolling with scroll-behavior plus prefers-reduced-motion and scroll-margin, scroll-snap carousels, details/summary accordions and a dialog that mostly works but needs a tiny showModal call, and responsive container queries with cqw units. Covers upcoming features like :has() and selectlist/masonry and demos that run natively in modern browsers.
AI-written summary · about
chapters (25)
- 0:00intro
- 0:22preamble
- 1:01i love...
- 1:17the rule of least power
- 2:19browser makers are listening
- 2:34once you learn something
- 3:28lets get started
- 3:45custom toggles
- 10:01datalist
- 13:19in-page transitions
- 13:43jquery. awesome.
- 14:59in javascript
- 15:30accessibility
- 16:20smooth
- 18:19carousels
- 20:19video by adam argyle
- 20:36accordions and modals
- 23:18dialog
- 27:18container queries
- 29:10stop using js... in the future
- 29:34masonry layout
- 32:18the parent selection :has()
- 34:27scroll driven animations
- 35:20no more js needed!
- 35:42i hope you love css and html now, too!
related talks
40mStop using JavaScript for that - Moving features from JS to CSS and HTML
34mDon't Use JS for That: Moving Features to CSS and HTML
30mStop using JS for that: Moving features to CSS and HTML
31m"Stop using JavaScript for that: moving features from JS to CSS and HTML"
31mI Can't Believe It's Not JavaScript!
24mI Can't Believe It's Not JS
38mI Can’t Believe It’s Not JavaScript
57mDo It With Style: Rethinking CSS