Building user-adaptive interfaces with preference media queries
summary
A live workshop shows a complete CSS-only settings form that becomes themeable, responsive, animated and accessible without JavaScript. It uses grid with repeat(auto-fit, minmax()), logical properties, rem-based spacing, HSL color channels and a single orientation media query plus user media queries like prefers-color-scheme & prefers-reduced-motion. DevTools and CodePen (or Vite) verify behavior; the form respects system font size, input modality and writing direction and the color/theme system actually adapts as promised.
AI-written summary · about
chapters (38)
- 0:00Intro
- 1:15User Preferences
- 6:17CodePen
- 6:53HTML
- 7:28Adaptive interactions
- 8:30Grouping inputs
- 10:48Screen Reader
- 12:00Adaptive Layout
- 12:21Spacing
- 14:41Typography
- 16:07Logical Properties
- 17:45Flex Start
- 18:25Grid Dev Tools
- 19:56Display Grid
- 20:19Form Grid
- 23:30Section Grid Demo
- 24:13Field Set Demo
- 25:36Field Set Item Demo
- 26:19Field Set Item Picture
- 26:57Field Set Item Selector
- 27:45Field Set SVG
- 29:12Input Type checkboxes
- 29:36Open Dev Tools
- 30:29Width selector
- 31:29Gain more space
- 31:51Repeat
- 33:09Style
- 33:33Field Set
- 35:19Layout Summary
- 35:35Color
- 37:49Setting up color channels
- 38:49Adding color
- 39:03Global custom properties
- 39:45Color channels
- 40:12Text and surface colors
- 41:00User preference
- 41:20Text properties
- 43:25Color scheme
related talks
36mBeyond responsive design - New CSS media queries
54mInclusively Responsive UIs with CSS and SVG
51mWeb Design Engineering With the New CSS
32mFall In Love With CSS
33mResponsive Design in 2020
45mHow Responsive Are You in CSS? 2026 Edition
04h 48mIntermediate To Advanced CSS For Practical Peoples
51mLightning Talks