In this tutorial, we’ll create a color contrast tool that lets you check the accessibility and readability of text, by comparing the ratio between background and foreground colors.

Let’s be honest for a second. Have you ever set up a new front-end project and, somewhere between choosing a build tool, a state manager, and a styling library, just felt… tired? It’s a specific kind of exhaustion. You haven’t even written a line of app logic, but you’re already worn out by the sheer weight of the decisions.

CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the if() function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift.

Learn how to create an infinite marquee that follows a custom SVG path using React and Motion.

In this tutorial, we’ll create a color contrast tool that lets you check the accessibility and readability of text, by comparing the ratio between background and foreground colors.

To be honest, I was a smidge skeptical. I know what a design token is. It’s a variable of a color or font-family or something. I pretty much only work on websites, so that exposes itself as a –custom-property and I already know that using those to abstract common usage of colors and fonts is smart and helpful. Done. I get that people managing a whole fleet of sites (and apps running in who-knows-what…

CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the if() function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift.

In the spirit of 12 Factor Apps. The source for this project is public at https://github.com/humanlayer/12-factor-agents, and I welcome your feedback and contributions. Let’s figure this out together!

“These questions feel really personal”; ”This is going to be too controversial”; “You should stick to programming surveys”.

Chrome 137 shipped the if() CSS function, so it’s totally possible we’ll see other browsers implement it, though it’s tough to know exactly when. Whatever the case, if() enables us to use values conditionally, which we can already do with queries and other functions (e.g., media queries and the light-dark() function), so I’m sure you’re wondering: What exactly does if() do?