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.
Miriam Suzanne at web.dev on
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 be to user inputs.
With special guests Adam Argyle, Cassondra Roberts, and Dave Rupert
on Winging It episode 27 with Miriam & Stacy on | 81 mins
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
by Miriam Suzanne on
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.
on Winging It episode 26 with James & Miriam on | 60 min
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
on Winging It episode 25 with Stacy & Sondra on | 60 min
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
by James Stuckey Weber on
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
by Miriam Suzanne on
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
by Miriam Suzanne on
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.
With special guest Roma Komarov
on Winging It episode 24 with Miriam & Stacy on | 59 min
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 with CSS expert Roma Komarov about how to create reusable and more flexible CSS using mixins and functions, what happened in the CSSWG meetings...
What do all the numbers in our clamp() do?
by Miriam Suzanne on
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) with vw (or vi) units. But the results are difficult to understand at a glance, so I wanted to visualize what’s going on...
on Winging It episode 23 with Miriam on | 3.5 min
Happy 30-month anniversary to Container Queries – shipping in every browser since February of 2023. It was supposed to be impossible, but here we are!
on Winging It episode 22 with James on | 1 min
Are you positioning a popover with CSS anchor positioning and position-area? Make sure to override the default margins on the popover.
on Winging It episode 21 with Miriam on | 4 mins
There’s a new stretch keyword that we can use for CSS height and width properties. But how is that different from 100%? And how is that different from 100vh when we want a full-height layout?
Using modern CSS units and math functions
by Miriam Suzanne on
When I tried setting my browser font-size preferences, I found it broke more sites than it improved, and I quickly moved back to the default. So what went wrong, and how can we fix it?
With special guest Kilian Valkhof
on Winging It episode 20 with Miriam & James on | 65 mins
Kilian Valkhof, Miriam Suzanne, and James Stuckey Weber talk about developer tools including the Polypane browser and other accessibility tools.
Get free cutting-edge demos in your inbox! Grid & layouts with Miriam Suzanne, anchor positioning with James Stuckey Weber, and more! Peruse archive