Dev log
Reduce motion: kinder animations for every visitor
Site animation is nice, but it makes some people dizzy. Keep your motion, let people turn it off, and switch it off for anyone who asks. Here's how.
7 min read
Tag
css
Dev log
Reduce motion: kinder animations for every visitor
Site animation is nice, but it makes some people dizzy. Keep your motion, let people turn it off, and switch it off for anyone who asks. Here's how.
7 min read
Dev log
Touchscreen Macs are coming: make your site easy to tap
Make every button, link and menu at least 44 px to tap, leave space between them, and never hide menus or details behind hover. Here's the CSS to do it.
12 min read
Dev log
Build a scroll ruler sidebar with letter-by-letter titles
Section titles that ride a ruler and swing into place one letter at a time, rebuilt from the ArtCraft site with CSS and a short script.
10 min read
Dev log
CSS anchor positioning: move elements on hover, no JavaScript
Give the hovered element an anchor-name, make another element follow it with position-anchor, and add a transition. It slides there, no JavaScript.
8 min read
Dev log
WCAG 2.2: the nine new success criteria and how to meet them
WCAG 2.2 added nine new rules and removed one. Here is what each new rule asks for, which ones count at level AA, and the code I use to meet them.
6 min read
Lesson
Flexbox cheat sheet: every property, value and default
Every flexbox property on one page, with its values and defaults. Plus gap, the layouts I build every week, and why the old -webkit-box prefixes can go.
5 min read