Chris’ Corner: We Heart CSS
It warms my old heart to hear Jason Santa Maria wax poetic about modern CSS:
CSS has exploded! Flexbox, grid, many kinds of viewport units, variables, and on and on. So many things we used to patch in to extend CSS or turn to Javascript for are now just part of the spec. The ease with which you can create a flexible type scale or size elements and spacing responsively with clamp… the screen has really matured into its own unique design medium with tailored affordances that aren’t just translations from another medium (print). CSS finally gave the web its own grain.
Damn straight, Jason!
Part of what’s so great about CSS now is how much it knows. Like Adam says, it knows about the user, the device, variables, layout, and more.
Components/elements/containers whatever, can own all their presentation aspects for nearly any scenario now. They can feel like magic, perfectly adapting to wherever the component author or designer has condoned.
So some of working with CSS has shifted from you just delivering hard instructions to listening to what’s going on on the page and reacting to those circumstances.
So what are people actually doing with CSS these days? Project Wallace has some analytic data around this. ~10% of sites using @container queries is interesting to me! It seemed like they weren’t really taking off for a while, but perhaps they are finding their stride now.
Here are some other fancy things people are doing with CSS:
- They are using anchor positioning for fancy stuff like drawing connections and shrinkwrapping text bubbles.
- They are using very modern CSS features to handle their light/dark theming, like, ahem, light-dark() and contast-color().
- They are using CSS nesting as a progressive enhancement technique.
- They are expanding the ideas behind fluid typography and improving them with modern functions like round().
