I somehow missed this when it was first published last Summer: a collection of twelve obscure CSS knowledge grenades.
You learn something new every day. I just learned twelve somethings.
Jemima runs through just some of the exciting new additions to CSS:
Replacing 150+ lines of JavaScript with just a few CSS features is genuinely wild. We’re able to achieve the same amount of complexity that we’ve always had, but now it’s a lot less work to do so.
And Jemima will be opening the show at Web Day Out in Brighton on the 12th of March if you want to hear more of this!
Here’s a handy little tool for generating CSS with :has() selectors in order to do quantity queries.
CSS wants you to build a system with it. It wants styles to build up, not flatten down.
Truth!
Logical properties, container queries, :has, :is, :where, min(), max(), clamp(), nesting, cascade layers, subgrid, and more.
Picture me holding Trys back and telling him, “Leave it alone, mate, it’s not worth it!”
Had you heard of these bits of CSS? Me too/neither!
If you’re going to toggle the display of content with CSS, make sure the more complex selector does the hiding, not the showing.
An exception to my general rule that ARIA attributes should be added with JavaScript.
Apply your ARIA attributes with JavaScript and then use them as hooks in your CSS.
A language so powerful that we have to stop ourselves from using all its features.