Talk at the Torchbox 2023 Tech Day, on modern CSS techniques we could use today.
View the slides: Future CSS Today
Goals
- No tooling 🔥
- More with less
- Great browser support
No tooling?
Tooling where it makes sense.
Still using linting: Prettier, Stylelint.
Also still using compatibility & performance tools: Autoprefixer, cssnano.
Writing modern syntax thanks to postcss-preset-env.
More with less?
Vanilla CSS without compromising on expressiveness
- Co-location of related code
- Not a thousand lines of code
- No overrides
Great browser support?
Support older browsers so users don’t have to upgrade their devices.
- Opera Mini (1%)
- IE11 (0.5%)
- Safari 12-14 (0.5%)
- Android Browser 4.4.4 (0.3%)
- Chrome 69-89 (1.2%)
- Firefox 3.6
More with less, continued
Things in CSS that take lots of lines for no reason
- Responsive design - avoid media queries
- Interaction styles (hover, focus, touch, etc.)
- Right-to-left support
- Light and dark themes
- Contrast themes / Windows High Contrast Mode
- Print stylesheets
CSS patterns: layout
- Flexbox and Grid 🐸
- Logical properties and values
.slide-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-inline-start: 5rem;
}
Typography
- System font stack
- Dynamic viewport units
clamp()
body {
font-family: "Segoe UI", "system-ui", "Roboto", "Helvetica Neue", "Arial",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-size: clamp(1rem, calc(2dvmax + 1rem), 5dvmin);
}
web.dev/articles/viewport-units
Colors
All of them!
- CSS variables
oklch()color-mix()- System colors
--light-dark: color-mix(in oklch, CanvasText 10%, Canvas 50%);
--dark-light: color-mix(in oklch, Canvas 10%, CanvasText 50%);
color: color-mix(in oklch, var(--light-dark) 20%, CanvasText);
Demo!
View source
view-source:
Does it work?
Yes and no
- This shows promise but there are still a lot of hurdles.
- Likely practical for small projects within the next 2 years.
- Early adopters can use this now with little compromises.
Takeways for pro™ projects
Great things you should definitely use on projects: