I have this web page to display the books I've read. Book covers often bring back memories and it's been great to scroll past them on my own page. It's also an opportunity to play around with book data. This week, I added a bit of page count-based visualisation for fun.

While the .visually-hidden/.sr-only utility styles have proven incredibly useful, the web would absolutely benefit in the long run from enshrining a native approach into the web standards. Such a rule would be easier to teach and easier to incorporate with CSS's responsive and stateful features. It'd also discourage unvetted, homegrown approaches from popping up, and it'd ensure that developers wouldn't need to update their projects' styles every few years when an improvement is discovered.

These solutions often aren't ideal. They need JavaScript or introduce extra markup. The CSS anchor positioning API aims to solve this by providing a CSS API for tethering elements. It provides a means to position and size one element based on the position and size of other elements.

Style queries are an extended part of the containment spec which container queries also came from. TL;DR: they allow you to query for style features of a container and apply rules to its children. For example, if the --theme custom property has the value dark, then you can style child elements with a dark theme.

Each time we build a field validation from scratch, accessibility doesn’t come out of the box. In this guide, Sandrina breaks down what we need to take into consideration, so that nobody gets stuck on an inaccessible invalid field.