My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t have a great understanding of them and could use a plain language explanation of what it is, why they should care, and a bit of reference code. Maybe that’s you.

I’m not a “full-stack developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-end developer, but that’s too long. So, I’m a web designer. And I also specialise in accessibility, design systems, and design.

System colors have the ability to react to the current used color-scheme value. The light-dark() function exposes the same capability to authors.

Achieve a unified look for your web application! Learn how to bridge the gap between web components' Shadow DOM and global styles using the power of adopted stylesheets.

The way syntax highlighters on the web typically work is a to wrap all tokens in <span> elements with a proper class and use CSS to colorize them. Thanks to the CSS Custom Highlight API you can skip the step where you riddle your DOM tree with a bunch of <span>s to add the color information.