Read, watch, & listen
Learn how to write resilient CSS, add WebSocket push notifications to a RESTful API, and more with these articles, videos, podcasts, and case studies.
<dialog> and popover
Elements and windows that pop up on the screen are one of the most common patterns on the web. With use cases spanning from alerts and brief forms requesting data, to the now ubiquitous cookie settings prompt, these layered UI patterns are used frequently by developers.
A web development podcast from LogRocket
I talk with Noel Minchow about the unique problems that CSS has to contend with, the internal complexities that can take us by surprise, how to think about debugging, and when to use higher level tools.
Hidden gems of UI development
Join Stacy, James, and Miriam as we explore some hidden gems of UI development – from @starting-style for smoother entry transitions to performance boosts with AVIF images and using the browser’s built-in lazy-loading. We cover a variety of quick wins that you can use to make your life easier and…
From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to…
Building a type scale for your website
Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern CSS can help us out. There are equations and graphs! But you don’t need anything that complicated to build a type scale for your next site. With the…
One of the goals when writing CSS is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any “container” element without it feeling broken or out of place. How can you accomplish this in a complex layout like a…
A chat with Chris Coyier
At the end of 2025, Firefox added the CSS @scope rule – making the new feature available across all major browsers! Since Chris Coyier has done a fair amount of writing and speaking on the topic, we wanted to talk with him about what that means. Chris has also been…
As designers, it makes sense to think about what space is available in the browser, and adjust your typography accordingly. It’s also important to remember that different users will have different font-size needs – and the more a font size is responsive to the viewport, the less responsive it will…
With special guests Adam Argyle, Cassondra Roberts, and Dave Rupert
The second annual CSS is Awesome Game was a heated battle between a few of our favorite CSS professionals including Adam Argyle, Cassondra Roberts, Dave Rupert, and Miriam Suzanne. If you love CSS as much as we do, we hope you will play along and enjoy the challenge.
It’s important to focus the conversation
Beautiful design mockups can be distracting, giving a false sense of what is complete and what still needs to be done. At OddBird, we find it helpful to remove any ‘premature sheen’ before sharing mockups with clients.
Anchor Positioning is available in all browsers. What’s next, with Eric Meyer.
It’s finally here! With the release of Firefox 145, CSS anchor positioning is available in all browsers. It’s still behind a flag in Firefox, so it isn’t Baseline Newly available quite yet. Join James Stuckey Weber, Miriam Suzanne, and Eric Meyer of Igalia as they talk about the emerging patterns…
Managing complex navigation with guest Clayton Dewey
OddBirds, Stacy and Sondra, along with special guest Clayton Dewey of Dev Collaborative, face off against bad UX design patterns. They get into the weeds trying to address some of the thorniest, perennial UX design questions - managing complex navigation, intuitive user flow, is there such a thing as a…
Overflowing content, browser support, and polyfill updates
Anchor positioning is close to Baseline. As more people try it out, they are finding areas where it could be improved, and differences between browsers. Let’s take a look at the current state of anchor positioning.
We don’t have to choose between px and rem for spacing
There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions are well supported in CSS, we don’t have to choose.
It’s time to stop spreading this out-dated practice
Setting the box-sizing model to border-box is one of the few remaining CSS ‘resets’ used across most projects. But there are two common approaches, and the more popular choice will cause more problems than it solves.