2024 has been another amazing year for CSS! Cross-document view transitions and scroll-driven animations let you add more interactivity to your applications with a few lines of CSS. You can now animate to height: auto;, style scrollbars, and size text inputs to their contents.

The results for the State of CSS 2024 and State of HTML 2024 are now live. This post takes an initial look at some of the most interesting findings in those surveys.

Let’s say we have a color in a CSS variable. Let’s say we don’t have any control over this color (maybe it came from user input?), but we’d like to use it. But we only want to use it if it’s not too dark or too light. If it’s too dark or too light, we would rather modify the color so it’s less dark or less light. This can be achieved with the relative color syntax, the hsl() function and clamp() function.

A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!

Frustrated by inaccessible modals? Learn how to leverage ARIA & keyboard navigation techniques to build modal dialogs that comply with accessibility guidelines.