It’s easy to get lost in all this. So I’m going to try to make it easy: If you don’t know where to start, or which of these things is going to be practically useful enough to be worth your time, I think the biggest bang for your buck is to learn OKLCH (or, “Oklachroma”, if I had my way and could make that catch on). Hopefully I can convince you that it’s worth diving in and learning.

We've seen it plenty of times around the web where a website's page header follows us as we scroll down the page. CSS makes doing this a breeze with sticky positioning. What if we desired something a little bit extra, like applying a box-shadow to the sticky header as soon as the page is scrolled?

In CSS it’s possible to write mathematical expressions. At the base sits the calc() function to do calculations, but most likely you’ve also heard of min(), max(), and clamp() as well. Joining these functions are the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2(). These functions are defined in the CSS Values and Units Module Level 4 and are available in all browsers.

Adding playfulness to a UI with physics by creating a skeuomorphic pull cord dark mode toggle using Verlet integration.

Do you sometimes struggle to know whether a non-text element fails for low contrast under WCAG Success Criteria 1.4.11? Try this quiz to see how you fare.