One of our favorite CSS preprocessor features is now built into the language: nesting style rules.

I think that the reason that kept me from not using a CSS mask is the browser support, they are partially supported in blink browsers (Chrome and Edge) and fully supported in Safari and Firefox. The great news is that CSS masking will be part of Interop 2023, which means we should expect cross-browser support (Yay!!). In this article, I will go through what CSS masking is, how it works, and a few use cases and examples for it.

Any person, post, article, tweet, expert, fortune cookie, company, etc., that claims its CSS-only interactive widget is accessible is probably wrong. While it may not be intentional, it is incumbent on you to confirm the accessibility because the person making the claim often has not.

A few weeks ago, Adam Wathan posted a tweet asking if you could use color-mix() to adjust the opacity of a color. I replied that this is what relative color syntax was essentially created to do, but Adam Argyle pointed out that it can indeed be done with color-mix() using a clever hack.

The problem is that if box-shadow is being used to style :focus (or, better, :focus-visible) ‘outlines’, they’ll be removed by WHCM, leaving keyboard-only users with no idea what element they’re currently focused on.