Over the years, we have been used to using CSS pre-processors like Sass for a use case like applying opacity to a pre-defined color. Today, we have a new way to do that and more with CSS relative colors. In this article, I aim to shed the light on that and introduce how it works along with many practical examples.

It does a lot for you in terms of not having to wrangle with CSS overflows or z-index clashes for your popover component. Additionally, it can provide some very handy basic focus management and dismissing behaviors. It even takes care of common accessibility mappings expected of popovers. But by itself, it doesn’t do everything you may need for fully accessible custom popovers. It wasn’t meant to, nor should it.

Because View Transitions animate snapshots, you can morph any element into another element. But for some type of transitions, the use of snapshots can sometimes work against you. For example: when the border-radius changes between the old and the new snapshot, you most likely want the border-radius to nicely animate from the old to the new state instead of seeing two snapshots fade.

My obsessive, over the top method for designing super crisp icons. I frequently use SVG icons from libraries as a starting point. Then apply the adjustments above to minimise their size and ensure they render crisply at the size I intend to use them.

Have you ever loaded a page with tons of content and noticed how slow it feels? The browser has to process everything at once - even the content you can't see yet! That's where the content-visibility property comes in. It's a CSS feature that tells browsers to skip rendering off-screen content until it's needed.