Big fan of <details> and <summary> checking in but what I don’t like is having to add extra elements to present a nice look and feel for them. Dealing with the disclosed content also requires extra elements if you want to apply a layout, for example. It looks like that is changing though! I’m especially looking forward to giving the new ::details-content pseudo-element a test drive, that’s for sure. Check it out!

FYIWe have news! We're in the home straight, finishing up Complete CSS and with that, we have a launch date: November 26 at 12pm GMT. Sign up to get updates and we'll email you as soon as it is live.We've been working on Complete CSS since February 2024. The aim of the game for me was to pull together all of the stuff I've been talking about over the last few years into a talk, workshop and course.I delivered the talk, "Get the core right and the resilient code will follow" last week at the legendary FFConf. That talk was excerpted content from the principles module of the course where we learn about communication, planning, along with giving and receiving feedback. We also learn about progressive enhancement, being the browser's mentor, not its micromanager, CSS architecture, layout, along with fluid typography and spacing in that module of the course.Condensing the first part of the princples module into a talk was a great way for me to refine what I think is the most important part

Josh is here again with another stunner of an article and they’ve done a fantastic job of demonstrating how useful container queries can be in the real world. This is a really important part: I don’t think most designers are even aware that they have this exciting new capability. It’s our job to share these developments with them, so that they can use them in their designs!A lot has changed in CSS so be a good developer and help your designer colleagues understand what is very much possible now and the future to unlock their creativity.Check it out!

This post is a great run down of how much thought and consideration goes into making form validation actually useful. This part really stood out to me:However, if not well-designed, in-line error messages can become overwhelming. For example, flagging a field as incorrect after just one character can be disruptive, especially if the person filling out the form hasn't finished typing.I'd say this is one of my biggest icks when filling out a form and I'm a fast typer! There's absolutely no need to shout as users while they are in the process of filling out your form.Absorb all the goodness in this fantastic guide and make your forms great!Check it out!

A big thing you need to contend with when working on design systems is anticipating all the different ways someone may use a component. The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well.An example of this is a “Simple List” component I was helping to make. It’s a workhorse component, and not without its challenges.Each of the Simple List component’s list items features slots for a title, a short description, a price, and a few actions. The title can also have a leading photo and trailing badges placed before and after the title, respectively:The grid layout for this is relatively straightforward, especially if you use named grid areas:grid-template-areas: 'leading-visual title title price' 'leading-visual badges badges price' 'leading-visual description description actions';The area where we’re focusing our attention on for this post is the slot for trailing badges. A short title and a single badge make for a clean-looking