I wasted a day on CSS selector performance to make a website load 2ms faster | Trys Mudford
Picture me holding Trys back and telling him, “Leave it alone, mate, it’s not worth it!”
The CSS Cascade
This is a wonderful interactive explanation of the way CSS hierarchy works—beautiful!
Related links
CSS :has() Interactive Guide
This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!
Bill Oddie taught me how to make web sites - Hicks.design
I remember Jon telling me this lovely story when we first met in person. I love the idea that we had already met in a style sheet.
I also love the idea of hosting your own little internet archive—that Bill Oddie site still looks pretty great to me!
It’s a lot like an embarrassing family photo, but I’m owning it!
Link colors and the rule of tincture
When you think of heraldry what comes to mind is probably knights in shining armor, damsels in distress, jousting, that sort of thing. Medieval stuff. But I prefer to think of it as one of the earliest design systems.
This totally checks out.
Modern CSS in Real Life - Chris Coyier
This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.
Related posts
Progressive disclosure defaults
If you’re going to toggle the display of content with CSS, make sure the more complex selector does the hiding, not the showing.
Media queries with display-mode
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.
Faulty logic
CSS logical properties here, they just aren’t evenly distributed yet.
aria-live
An exception to my general rule that ARIA attributes should be added with JavaScript.
ARIA in CSS
Apply your ARIA attributes with JavaScript and then use them as hooks in your CSS.