Baseline Layered UI Patterns: `<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 req [...]
OddBird
Posts
How to Implement an Image Gallery Using Baseline Features 🔗
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 [...]
Responsive Type Doesn't Have to Be Complicated 🔗
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 ou [...]
Container Queries and Units in Action 🔗
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 [...]
CSS Scope & Mixins 🔗
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 [...]
Responsive and Fluid Typography with Baseline CSS Features 🔗
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 rem [...]
CSS IS AWESOME Game 2 🔗
The second annual CSS is Awesome Game was a heated battle between a few of our favorite CSS professionals including Adam Argyle, Cassondra Roberts, Da [...]
Make It Ugly, for Clients 🔗
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 [...]
Cross-Browser Anchor Positioning 🔗
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 is [...]
Bad UX Design Patterns 🔗
OddBirds, Stacy and Sondra, along with special guest Clayton Dewey of Dev Collaborative, face off against bad UX design patterns. They get into the we [...]
Anchor Positioning Updates for Fall 2025 🔗
Anchor positioning is close to Baseline. As more people try it out, they are finding areas where it could be improved, and differences between browser [...]
The Best CSS Unit Might Be a Combination 🔗
There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions ar [...]
Don't Inherit the Box Model 🔗
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, an [...]
Mixins & Functions to Streamline CSS 🔗
The CSS Working Group got together in August to discuss a range of old and new issues. The following week, Miriam Suzanne and Stacy Kvernmo chatted wi [...]
Visualizing Responsive Typography 🔗
There are multiple tools that can help create a fluid font-size calculation for CSS – generally expressed as a clamp() function combining em (or rem) [...]