This blog post explores using CSS media queries with a variable font to tailor the reading experience even further. Font grade and weight can be customized with font-variation-settings, allowing microtuning given various preferences and contexts, like a preference for dark mode or high contrast. We can take these preferences and tailor a variable font for that user experience.

React was designed seven Taylor Swift albums ago, for a world where John Mayer and Jennifer Aniston were still dating.

I could, element by element, continue to add support (mostly by making CSS updates for each element to fit in with the rest of my style choices) as I came across specific needs for them, but not one to shy away from an exhaustive exploration, I decided to write this post and attempt to use every element.

I spoke about Container Queries at both Smashing Conference (San Francisco) and CSS Day (Amsterdam) – where I recommended setting up a root container to replace most media queries. Since then, Temani Afif pointed out a few issues with that approach, and sent me down a rabbit hole of overlapping specs and browser bugs.

They are fundamental CSS concepts you use every single day whether you know it or not: the offset parent and stacking context. In this article we'll explore how you can use them to position elements in all three dimensions, and how to debug them.