CSS is incredible now

This site is the first I’ve built from scratch in a long time, and coming back to the current state of the web after missing some of its recent evolution offered a pretty stunning look at how much front end web technology has changed over the past 20 years.

What’s amazing

There’s not likely to be much insight here for anyone who has been paying attention. It’s more a list of things that I used to struggle with, dreamt of, or figured were impossible that I can almost take for granted today.

Layout is solved. The big ones like Grid and Flexbox allow for things I could have never dreamed of doing when floats were all we had.

Browser compatibility is barely a thing. Even some of the more recent properties have been widely adopted and available across multiple versions. Automatic browser updates mean hangover legacy versions from way too many years ago aren’t a thing anymore. More often than not, the answer to caniuse is an unqualified "yes". No more prefixes!

Type selection and control is effortless. The ability to use and precisely dial in any typeface I might want is mind-blowing, and variable fonts are super cool.

Fluidity is easy. I can precisely control aspect ratios without having to set pixel values, I can loosely set image fills without having to worry about how they fit the parent using object-fit, I can define flexible type scales with clamp, and when in doubt I can always fall back to breakpoints with media queries.

Pre-rendering effects as images? Over. Most of the filters and shadows and gradients and blend modes you could possibly want are easily composable in the browser.

I can move things around in so many ways. Blocks can be rotated along multiple axes, they can scale on loading or on hover to any degree, they even can move around in 3D space.

Animation is trivial. Transitions between elements and pages can be done fully in CSS, and when I need just a bit more control I can add simple event handlers in Javascript to toggle classes and allow CSS to do the rest from there,

Redundant selector chains are gone. I can use nested selectors to chain increasingly complex selections that used to require a lot of repetition. Sass solved this over a decade ago, now it’s just how CSS works.

And the one that makes me irrationally happy, maybe more than it should: I can easily center things vertically! Multiple ways!!!

Still some quirks

That’s not to say it’s all roses and kittens of course. There are still a few quirks and shortcomings that prevent today’s experience from being seamless:

CSS variables are clunky. I like them, but that var(--whatever)syntax sure is verbose.

No native build process. Separating concerns with multiple source files included through @import rules keeps CSS maintenance manageable, but the performance overhead of extra requests for each external stylesheet isn’t ideal.

Missing mixins. Sass allows you to define an anonymous collection of styles and then assign in bulk to any selector later. Very useful when you need to share style across otherwise unequal elements, and a way of preventing authoring overhead. Abstracting the shared pieces to their own class and assigning when needed helps, but this one got away from me as I needed similar styling across disparate elements while building this site. The overhead of refactoring is a cost I may or may not pay in the future.

Historical baggage.

Due to the way it evolved, CSS carries a lot of quirky historical inertia that resolves as odd inconsistency these days. Some examples:

How do I center something? Depends on the container! I could use text-align, or justify-content, or align-items, or place-items, or… you get the idea.
The background property comes with a big list of color-adjusting subproperties like background images, color, gradients, blend modes, and filters to adjust any layers behind it each with their own property that can be set independently. But text? You just get color and shadow.
And come on, I still have to set box-sizing: border-box; manually?

All in all though? I wish the me of 20 years ago could see where it was going, because it wasn’t clear at all in 2006 that we could ever get here.

What’s now widely supported across all browsers is extremely powerful and lets me do almost anything I can think to do. I’m spending less time hunting down supported properties and debugging, and getting on with creating.

The balance is right.