I set out to learn a bit about how CSS nesting works, especially the new & selector, and I ended up on a deep dive into the :is() selector and its siblings.

Unfortunately, if you’ve experimented with this much, you may have run into some weird behavior when building any gradients to white, black, gray, or transparent. This is especially bad when using blue, but it does affect other hues as well. Look at the teal and purple that shows up in these gradients, when they really should consist only of shades of blue…

In this article, we will dive into the benefits and practical use cases of the content-visibility CSS property, as well as situations where it might not be the most suitable option.

I’m not a person who creates CSS “art” (as in drawings), but I do like messing about with CSS gradients and seeing what comes up. Playing around with gradients in conjunction with CSS background properties (background-position, background-size, background-repeat) is a great way to get to grips with those properties too.

The CSS clamp() function is often paired with viewport units for “fluid” font sizing that scales the text up and down at different viewport sizes. As common as this technique is, several voices warn that it opens up situations where text can fail WCAG Success Criterion 1.4.4, which specifies that text should scale up to at least 200% when the user’s browser reaches its 500% maximum zoom level. Max Barvian takes a deep look at the issue and offers ideas to help address it.