OddBird's Avatar

OddBird

@oddbird.dev

Web designers & developers - working on client web applications, open source tools, the CSS specifications, and front-end training: - OddBird.dev - css.OddBird.net - youtube.com/@WingingItOddBird

1,187
Followers
26
Following
71
Posts
24.10.2024
Joined
Posts Following

Latest posts by OddBird @oddbird.dev

Preview
Responsive Type Doesn't Have to Be Complicated Building a type scale for your website

On Feb's Winging It show @stacykvernmo.com, @miriam.codes, and @jamessw.com demoed how to build a type scale for your website, including:

How to work with user default font size
How the fonts respond to viewport sizes
How to generate a ‘scale’ of relative font-sizes

www.oddbird.net/2026/02/19/w...

05.03.2026 17:36 👍 6 🔁 2 💬 0 📌 0
Preview
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 placed inside any "container" element without it ...

Explore Container Queries with @miriam.codes in the context of the delicious Baseline Bakery. Donuts & #CSS? Yum!
www.oddbird.net/2026/02/18/q...

Shared in the February issue of OddNews:
us19.campaign-archive.com?u=80219aa68d...

04.03.2026 23:51 👍 15 🔁 4 💬 0 📌 0
Preview
CSS Scope & Mixins A chat with Chris Coyier

If you missed it in Jan, check out this chat with @chriscoyier.net on Winging It about #CSS @scope & mixins.

When to use @scope
How CSS functions differ from mixins
When to use a mixin
Will @content work for CSS mixins?
@content vs @contents
Fun with functions

www.oddbird.net/2026/01/22/w...

03.03.2026 22:47 👍 3 🔁 1 💬 0 📌 0
Preview
Responsive Type Doesn’t Have To Be Complicated YouTube video by Winging It

Tomorrow on Winging It (live) I'll be chatting with @stacykvernmo.com & @jamessw.com about my approach to responsive type in #CSS – without third-party calculators or complex unit conversions – and some of the research I did to get there.

Join us at 10am PT/1pm ET!

www.youtube.com/live/B-r6wem...

18.02.2026 17:55 👍 8 🔁 3 💬 0 📌 1

Here are a few things I plan to cover in the Poetic #CSS course, but I'd love your input and questions! Where are you having the most issues, what piques your curiosity, and where do you have questions?

Feel free to vote for multiple in the replies, or suggest other topics & specific questions.

17.02.2026 19:23 👍 8 🔁 6 💬 3 📌 0

Popover element (incl. showPopover) is approaching 90% on caniuse.
Anchor positioning is at 79%.
Anchor scope is at 78%.
Two polyfills from @oddbird.dev cover large parts of the spec (incl. anchor-scope).

I started using it at work this week.

13.02.2026 20:42 👍 10 🔁 2 💬 2 📌 0
Preview
Responsive Type Doesn’t Have To Be Complicated YouTube video by Winging It

Responsive type doesn’t have to be complicated. @miriam.codes will show @jamessw.com and me how we can get great results from a few lines of readable code on the next Winging It on Thursday, February 19 at 1pm ET
www.youtube.com/live/B-r6wem...

16.02.2026 20:36 👍 7 🔁 4 💬 0 📌 0
2014404 - Enable the `layout.css.style-queries.enabled` pref on Nightly RESOLVED (jfkthame) in Core - CSS Parsing and Computation. Last updated 2026-02-04.

It looks like style() container queries are enabled in @firefoxnightly.bsky.social - this is one of the features I'm looking forward to most. Especially with range queries starting to roll out.

@ container style(--progress > 80%) {
background: green;
}

bugzilla.mozilla.org/show_bug.cgi...

05.02.2026 17:11 👍 63 🔁 15 💬 3 📌 2
GitHub - oddbird/awesome-anchor-positioning: 🎉 A curated list of awesome things related to CSS Anchor Positioning 🎉 A curated list of awesome things related to CSS Anchor Positioning - oddbird/awesome-anchor-positioning

Anchor positioning is undeniably awesome. What is missing from our awesome list? github.com/oddbird/awes...

27.01.2026 20:14 👍 9 🔁 3 💬 0 📌 0
Preview
Imagine CSS without inheritance A code demo by Miriam Suzanne created on CodePen

While working on her Poetic CSS video course, @miriam.codes created a little demo to imagine CSS without inheritance. Read her thoughts and play with the demo in this month's issue of OddNews.

Read OddNews: us19.campaign-archive.com?e=%5BUNIQID%...

Code: codepen.io/editor/miria...

#css

23.01.2026 19:11 👍 9 🔁 2 💬 1 📌 0
Preview
CSS Scope & Mixins YouTube video by Winging It

Join @chriscoyier.net, @miriam.codes and me for Winging It today where we will discuss CSS scope and mixins! Send me your questions below or join us live at 1pm ET.

www.youtube.com/live/T-X641Q...

22.01.2026 16:13 👍 10 🔁 4 💬 0 📌 0
Preview
CSS Scope & Mixins YouTube video by Winging It

Looking forward to learning about CSS scope and mixins from @chriscoyier.net with @miriam.codes and @stacykvernmo.com on Winging It Live- tomorrow at 1 ET.

21.01.2026 22:17 👍 9 🔁 3 💬 0 📌 0
Preview
CSS Scope & Mixins YouTube video by Winging It

We're excited to have @chriscoyier.net with us on the next Winging It live stream, to talk about CSS Scope (now Baseline newly available) and Mixins (in progress). Hope you'll join us for the conversation!

Thursday, Jan 22 @ 1pm ET / 11am MT

youtube.com/live/T-X641Q...

14.01.2026 20:12 👍 23 🔁 8 💬 0 📌 0
Preview
Create Performant Layouts and Resilient Dropdowns This CSS anchor positioning course teaches you how

Anchor positioning is now available in Firefox! If you've been holding off on learning it, now is a great time to dive in. Sign up for my free email course to learn how to use this powerful tool today.

13.01.2026 18:31 👍 7 🔁 2 💬 0 📌 0

BTW, the amazing team at @oddbird.dev have their annual CSS event today. Got my ☕️ ready, it starts shortly, at 1pm EST:
@stacykvernmo.com @chriscoyier.net @davatron5000.bsky.social @castastrophe.bsky.social @nerdy.dev on deck. Should be a blast.
📺 Tune in:
www.youtube.com/live/xcEnjGP...

18.12.2025 17:43 👍 6 🔁 3 💬 0 📌 0
Preview
Make It Ugly, for Clients It's important to focus the conversation

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.
www.oddbird.net/2025/12/11/m...

This article was published in Dec's OddNews: us19.campaign-archive.com?u=80219aa68d...

#webdesign #UX

09.01.2026 18:06 👍 1 🔁 0 💬 0 📌 0
Preview
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 remember that different users will have different fon...

Last January I started a series asking questions about type sizing & spacing on the web. When web dot dev asked me to write about the current state of fluid type, I came prepared with graphs. I hope this is a helpful TL;DR for thinking about responsive type in #CSS:

www.oddbird.net/2026/01/08/t...

08.01.2026 19:08 👍 38 🔁 9 💬 3 📌 0
CSS Is Awesome Game - 2
CSS Is Awesome Game - 2 YouTube video by Winging It

The CSS is Awesome Game show was a blast and I am so thankful for our contestants and all who helped make it happen: @castastrophe.bsky.social, @davatron5000.bsky.social, @nerdy.dev, @miriam.codes, @chriscoyier.net and @oddbird.dev

If you missed it, here's the video
www.youtube.com/watch?v=xcEn...

22.12.2025 19:23 👍 11 🔁 3 💬 0 📌 0
Preview
CSS Is Awesome Game - 2 YouTube video by Winging It

We're playing the CSS is Awesome Game again this year – run by @stacykvernmo.com, with @davatron5000.bsky.social, @castastrophe.bsky.social, @nerdy.dev, and myself as competitors. Join us, and play along in the chat! #css

youtube.com/live/xcEnjGP...

18.12.2025 17:08 👍 21 🔁 7 💬 1 📌 0
The CSS is Awesome Game on Winging It with special guests Dave Rupert, Cassondra Roberts, and Adam Argyle will be joining Miriam Suzanne and Stacy Kvernmo on Thursday, December 18 at 1PM Eastern

The CSS is Awesome Game on Winging It with special guests Dave Rupert, Cassondra Roberts, and Adam Argyle will be joining Miriam Suzanne and Stacy Kvernmo on Thursday, December 18 at 1PM Eastern

The CSS is Awesome Game is TOMORROW and we are excited to announce that @davatron5000.bsky.social will be joining us.

Don't miss the live stream on Thursday, December 18 at 1:00PM ET
www.youtube.com/watch?v=xcEn...

Our CSS survey is still open and we'd love your help tally.so/r/QKoaEY

18.12.2025 04:41 👍 4 🔁 2 💬 0 📌 0
The CSS is Awesome Game on Winging It with special guests Cassondra Roberts, Chris Coyier and Adam Argyle will be joining Miriam Suzanne and Stacy Kvernmo on Thursday, December 18 at 1PM Eastern

The CSS is Awesome Game on Winging It with special guests Cassondra Roberts, Chris Coyier and Adam Argyle will be joining Miriam Suzanne and Stacy Kvernmo on Thursday, December 18 at 1PM Eastern

The CSS is Awesome Game is Thursday and this year @castastrophe.bsky.social will be joining us!

Don't miss the live stream on Thursday, December 18 at 1:00PM ET
www.youtube.com/watch?v=xcEn...

Our CSS survey is still open and we'd love your help tally.so/r/QKoaEY

16.12.2025 16:57 👍 13 🔁 5 💬 1 📌 0
Winging it is hosting the CSS is Awesome game with guests Adam Argyle and Chris Coyier. The shows hosts Miriam Suzanne and Stacy Kvernmo will be announcing additional guests soon. Join us Dec 18th at 1PM ET on YouTube

Winging it is hosting the CSS is Awesome game with guests Adam Argyle and Chris Coyier. The shows hosts Miriam Suzanne and Stacy Kvernmo will be announcing additional guests soon. Join us Dec 18th at 1PM ET on YouTube

The CSS is Awesome game is less than a week away and we are pleased to announce that @nerdy.dev will be joining us for the festivities! If you love CSS as much as we do, then we hope you will watch and play along on Dec 18 at 1pm ET

www.youtube.com/watch?v=xcEn...

12.12.2025 16:44 👍 5 🔁 1 💬 0 📌 0
Preview
Color themes with Baseline CSS features  |  Articles  |  web.dev Learn how to create color themes with Baseline web features available in CSS.

Learn how to create color themes with Baseline web features in #CSS, like color-scheme, color-mix(), light-dark(), and the relative color syntax – fellow OddBird David Herron covers everything you need:

web.dev/articles/bas...

11.12.2025 19:54 👍 30 🔁 6 💬 0 📌 0

I've joked that Baby Stuckey Weber is competing to get released before Anchor Positioning goes Baseline, and with 22 hours to go for Firefox 146, it's going to be a tight race. Hoping for a smooth rollout!

08.12.2025 16:13 👍 7 🔁 1 💬 1 📌 0
Preview
CSS Is Awesome Game - 2 A few of our CSS friends will join us for our second annual "CSS Is Awesome Game" on Thursday, December 18, 2025 at 1pm Eastern. If you love CSS as much as we do, then we hope you will watch and play ...

The CSS is Awesome Game is coming up on Winging It and our first special guest joining @miriam.codes and me is @chriscoyier.net

Join us Thursday, December 18 at 1:00PM ET:
www.youtube.com/live/xcEnjGP...

We'd love your help by filling out our 5-question CSS survey! tally.so/r/QKoaEY

04.12.2025 18:53 👍 21 🔁 9 💬 0 📌 0
Preview
Zoom & the browser window ...

When I resize the browser, I'm managing space. When I zoom in, I'm trying to re-size text. Those are very different goals, but look identical in CSS.

Using vw or at-media: bigger px == fewer px. If we mess with font-size for one, it applies to both:

codepen.io/miriamsuzann...

03.12.2025 21:51 👍 9 🔁 4 💬 0 📌 0

Are there good tools for graphing equations in html? Ideally with the ability to change a variable and see the graph output change?

has anyone released a <ti-82> web component? If I was younger, would I reference the TI-84 instead?

03.12.2025 18:55 👍 8 🔁 2 💬 1 📌 0
Preview
Inception two ...

Recursive @codepen.io embeds, for science!

codepen.io/miriamsuzann...

02.12.2025 19:42 👍 12 🔁 1 💬 1 📌 0
Preview
CSS is Awesome Game Made with Tally, the simplest way to create forms.

The CSS is Awesome Game on Winging It is coming up soon and we would love your help. We made a 5-question CSS-based survey if you have a minute to spare. We are excited to include more audience participation this year.

tally.so/r/QKoaEY

01.12.2025 18:43 👍 10 🔁 8 💬 0 📌 0
Preview
Cross-Browser Anchor Positioning Anchor Positioning is available in all browsers. What's next, with Eric Meyer.

If you missed it live, you can watch @jamessw.com & @miriam.codes's chat with @meyerweb.com about Anchor Positioning now on the Winging It show.

Includes:
-Rough edges
-Emerging patterns
-Will Anchor Positioning be baseline?
-What's next for Anchor Positioning?

www.oddbird.net/2025/11/20/w...
#css

26.11.2025 20:50 👍 9 🔁 5 💬 1 📌 0