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
- OddBird.dev
- css.OddBird.net
- youtube.com/@WingingItOddBird
Pinned
OddBird
@oddbird.dev
· Oct 25
Contact
Let's get to know each other
www.oddbird.net
If your company is looking for outside help with a web project, @oddbird.dev has availability starting in January.
As core contributors to #CSS and #Django we help create the languages and OSS projects millions of developers rely on. Focused on accessibility, performance, and well-tested code.
As core contributors to #CSS and #Django we help create the languages and OSS projects millions of developers rely on. Focused on accessibility, performance, and well-tested code.
Reposted by OddBird
There are many goodies that are newly and widely available in Baseline. backdrop-filter is so much fun to work with and I am obsessed with AVIF images and the ability to animate from display: none with @starting-style. And how easy is it to lazy load images now? web.dev/articles/bas...
How to implement an image gallery using Baseline features | Articles | web.dev
Image galleries are a common user interface pattern on the web. Learn how to create one using Baseline features.
web.dev
November 14, 2025 at 7:25 PM
There are many goodies that are newly and widely available in Baseline. backdrop-filter is so much fun to work with and I am obsessed with AVIF images and the ability to animate from display: none with @starting-style. And how easy is it to lazy load images now? web.dev/articles/bas...
Reposted by OddBird
What questions do you have for us about anchor positioning?
November 11, 2025 at 9:51 PM
What questions do you have for us about anchor positioning?
Reposted by OddBird
Anchor Positioning is in Firefox 145, released today (but behind a flag)! To celebrate, join me, @miriam.codes and Eric Meyer next Thursday for Winging It. We'll be discussing patterns that are emerging and rough edges that are still getting worked out.
Subscribe to get notified when we go live!
Subscribe to get notified when we go live!
Cross-browser Anchor Positioning
YouTube video by Winging It
www.youtube.com
November 11, 2025 at 9:51 PM
Anchor Positioning is in Firefox 145, released today (but behind a flag)! To celebrate, join me, @miriam.codes and Eric Meyer next Thursday for Winging It. We'll be discussing patterns that are emerging and rough edges that are still getting worked out.
Subscribe to get notified when we go live!
Subscribe to get notified when we go live!
Winging It E25
@stacykvernmo.com, @sondrae.bsky.social and @clayton.social.coop.ap.brid.gy debate thorny #UX design questions in costume. www.oddbird.net/2025/10/23/w...
- Complex navigation
- Ever a case for infinite scroll?
- Pagination or load more button?
- Click to open or hover?
- Truncatio…
@stacykvernmo.com, @sondrae.bsky.social and @clayton.social.coop.ap.brid.gy debate thorny #UX design questions in costume. www.oddbird.net/2025/10/23/w...
- Complex navigation
- Ever a case for infinite scroll?
- Pagination or load more button?
- Click to open or hover?
- Truncatio…
November 7, 2025 at 4:52 PM
Winging It E25
@stacykvernmo.com, @sondrae.bsky.social and @clayton.social.coop.ap.brid.gy debate thorny #UX design questions in costume. www.oddbird.net/2025/10/23/w...
- Complex navigation
- Ever a case for infinite scroll?
- Pagination or load more button?
- Click to open or hover?
- Truncatio…
@stacykvernmo.com, @sondrae.bsky.social and @clayton.social.coop.ap.brid.gy debate thorny #UX design questions in costume. www.oddbird.net/2025/10/23/w...
- Complex navigation
- Ever a case for infinite scroll?
- Pagination or load more button?
- Click to open or hover?
- Truncatio…
Reposted by OddBird
Responsive typography is getting so much simpler. This already works in a couple browsers, and the fallback is minimal:
--progress: progress(100vi, 320px, 1200px);
font-size: calc-mix(var(--progress), 1rem, 1.25rem);
But that will get even better…
#CSS
codepen.io/editor/miria...
--progress: progress(100vi, 320px, 1200px);
font-size: calc-mix(var(--progress), 1rem, 1.25rem);
But that will get even better…
#CSS
codepen.io/editor/miria...
CodePen
codepen.io
November 6, 2025 at 9:55 PM
Responsive typography is getting so much simpler. This already works in a couple browsers, and the fallback is minimal:
--progress: progress(100vi, 320px, 1200px);
font-size: calc-mix(var(--progress), 1rem, 1.25rem);
But that will get even better…
#CSS
codepen.io/editor/miria...
--progress: progress(100vi, 320px, 1200px);
font-size: calc-mix(var(--progress), 1rem, 1.25rem);
But that will get even better…
#CSS
codepen.io/editor/miria...
Reposted by OddBird
Preparing to film the first module of my new #CSS course. There will also be text for the sickos who like to read.
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
October 29, 2025 at 8:32 PM
Preparing to film the first module of my new #CSS course. There will also be text for the sickos who like to read.
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
We'll cover the essential features, but we'll also explain how it all fits together (and when it doesn't).
Sign up for updates & early access! www.oddbird.net/courses/desi...
OddNews Is. 30 -
We’re tiptoeing into spooky season 🎃 with Anchor Positioning, the best CSS Units, and Bad UX.
Read & Subscribe: www.oddbird.net/oddnews/
#css #ux
We’re tiptoeing into spooky season 🎃 with Anchor Positioning, the best CSS Units, and Bad UX.
Read & Subscribe: www.oddbird.net/oddnews/
#css #ux
October 27, 2025 at 5:05 PM
OddNews Is. 30 -
We’re tiptoeing into spooky season 🎃 with Anchor Positioning, the best CSS Units, and Bad UX.
Read & Subscribe: www.oddbird.net/oddnews/
#css #ux
We’re tiptoeing into spooky season 🎃 with Anchor Positioning, the best CSS Units, and Bad UX.
Read & Subscribe: www.oddbird.net/oddnews/
#css #ux
Reposted by OddBird
If you missed it, @sondrae.bsky.social and I chatted with
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 24, 2025 at 6:16 PM
If you missed it, @sondrae.bsky.social and I chatted with
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
@clayton.social.coop.ap.brid.gy about how to solve some of our current UX challenges. We also gave some free design advice and discussed what grinds our gears as designers.
www.youtube.com/watch?v=2RcF...
Reposted by OddBird
Winging It in 30m: www.youtube.com/watch?v=2RcF...
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 23, 2025 at 4:28 PM
Winging It in 30m: www.youtube.com/watch?v=2RcF...
Reposted by OddBird
Tomorrow @stacykvernmo.com & @sondrae.bsky.social will be Winging It Live with @clayton.social.coop.ap.brid.gy to take on Bad UX Design Patterns. Join live, and bring your UX questions!
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 22, 2025 at 6:07 PM
Tomorrow @stacykvernmo.com & @sondrae.bsky.social will be Winging It Live with @clayton.social.coop.ap.brid.gy to take on Bad UX Design Patterns. Join live, and bring your UX questions!
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
I'm excited for this one, and I get to watch it. :)
1pm ET / 10am PT
www.youtube.com/watch?v=2RcF...
Reposted by OddBird
By the time you finish this email course, CSS anchor positioning will likely be Baseline Newly Available. So, the best time to start learning was about 3 weeks ago, but the second best time is today.
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
October 21, 2025 at 8:08 PM
By the time you finish this email course, CSS anchor positioning will likely be Baseline Newly Available. So, the best time to start learning was about 3 weeks ago, but the second best time is today.
The next Winging It show is all about bad UX design patterns. @claytondewey.bsky.social from Dev Collaborative will be joining @sondrae.bsky.social and @stacykvernmo.com.
Join us live and bring your questions!
Save the date: Thu, Oct 23
www.youtube.com/watch?v=2RcF...
#ux #design
Join us live and bring your questions!
Save the date: Thu, Oct 23
www.youtube.com/watch?v=2RcF...
#ux #design
Bad UX Design Patterns
YouTube video by Winging It
www.youtube.com
October 17, 2025 at 10:46 PM
The next Winging It show is all about bad UX design patterns. @claytondewey.bsky.social from Dev Collaborative will be joining @sondrae.bsky.social and @stacykvernmo.com.
Join us live and bring your questions!
Save the date: Thu, Oct 23
www.youtube.com/watch?v=2RcF...
#ux #design
Join us live and bring your questions!
Save the date: Thu, Oct 23
www.youtube.com/watch?v=2RcF...
#ux #design
Reposted by OddBird
The #CSS WG is trying to name several properties that do similar things. One controls the length of a text-decoration line in relation to the text, the others control 'rule' lines in grid/flex/multi-column gaps.
Leave your feedback! (Note the poll spans two comments):
github.com/w3c/csswg-dr...
Leave your feedback! (Note the poll spans two comments):
github.com/w3c/csswg-dr...
[css-text-decor-4] Consider renaming `text-decoration-trim` · Issue #8402 · w3c/csswg-drafts
Besides the general discussion in #4557 to introduce a way to modify the length of the decoration, there was also some discussion around how to call the property. As I previously summarized, name s...
github.com
October 16, 2025 at 3:55 PM
The #CSS WG is trying to name several properties that do similar things. One controls the length of a text-decoration line in relation to the text, the others control 'rule' lines in grid/flex/multi-column gaps.
Leave your feedback! (Note the poll spans two comments):
github.com/w3c/csswg-dr...
Leave your feedback! (Note the poll spans two comments):
github.com/w3c/csswg-dr...
Reposted by OddBird
Today's lunch video is "#CSS Anchor Positioning in Practice" - "What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join us as we talk through these questions and answer yours." www.youtube.com/watch?v=76hI...
CSS Anchor Positioning in Practice - Winging It Live
Miriam Suzanne and James Stuckey Weber of OddBird talk about CSS Anchor Positioning
Thu, May 30 @ 1pm ET / 11am MT
What is Anchor Positioning? Why is it exciting? What can you use it for? How does…
www.youtube.com
October 17, 2025 at 6:30 PM
Today's lunch video is "#CSS Anchor Positioning in Practice" - "What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join us as we talk through these questions and answer yours." www.youtube.com/watch?v=76hI...
Reposted by OddBird
Had a smashing time at @smashingconf.com last week, meeting people & nerding about #CSS value resolution.
Now back to the video course. Aiming to launch a first module in Jan/Feb!
From grids/alignment to guaranteed invalid values – sign up for updates & discounts:
oddbird.dev/courses/desi...
Now back to the video course. Aiming to launch a first module in Jan/Feb!
From grids/alignment to guaranteed invalid values – sign up for updates & discounts:
oddbird.dev/courses/desi...
Designing With Code
CSS video course waitlist signup
oddbird.dev
October 15, 2025 at 6:15 PM
Had a smashing time at @smashingconf.com last week, meeting people & nerding about #CSS value resolution.
Now back to the video course. Aiming to launch a first module in Jan/Feb!
From grids/alignment to guaranteed invalid values – sign up for updates & discounts:
oddbird.dev/courses/desi...
Now back to the video course. Aiming to launch a first module in Jan/Feb!
From grids/alignment to guaranteed invalid values – sign up for updates & discounts:
oddbird.dev/courses/desi...
Reposted by OddBird
As we tiptoe towards anchor positioning becoming baseline with the upcoming release of Firefox 145, there has been a flurry of updates and improvements. Here's a few things you should know.
Anchor Positioning Updates for Fall 2025
Overflowing content, browser support, and polyfill updates
oddbird.dev
October 14, 2025 at 5:37 PM
As we tiptoe towards anchor positioning becoming baseline with the upcoming release of Firefox 145, there has been a flurry of updates and improvements. Here's a few things you should know.
Reposted by OddBird
If you work in web standards, you RFC 2119 MUST read this article. alice.boxhall.au/articles/a-t...
A threat model for accessibility on the web - Alice
A explanation of the primary threat to accessibility on the web, and a call to action for the web standards community
alice.boxhall.au
October 2, 2025 at 3:24 PM
If you work in web standards, you RFC 2119 MUST read this article. alice.boxhall.au/articles/a-t...
Reposted by OddBird
Shadow DOM in the CSS anchor positioning polyfill! v0.7.0 supports anchor and target in the same shadow root. anchor-positioning.oddbird.dev/shadow-dom
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
CSS Anchor Positioning Polyfill
anchor-positioning.oddbird.dev
October 7, 2025 at 4:44 PM
Shadow DOM in the CSS anchor positioning polyfill! v0.7.0 supports anchor and target in the same shadow root. anchor-positioning.oddbird.dev/shadow-dom
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
Thanks to William Killer (@dub@social.lol) for the PR and being an awesome open source contributor!
Want to go deeper with SQLAlchemy, FastAPI Path Operations, Django REST Framework & Channels?
Check out this series of articles by Ed Rivas and various OddBirds emeritus. www.oddbird.net/tags/django/
#Django #python #backend #development
Check out this series of articles by Ed Rivas and various OddBirds emeritus. www.oddbird.net/tags/django/
#Django #python #backend #development
October 6, 2025 at 5:07 PM
Want to go deeper with SQLAlchemy, FastAPI Path Operations, Django REST Framework & Channels?
Check out this series of articles by Ed Rivas and various OddBirds emeritus. www.oddbird.net/tags/django/
#Django #python #backend #development
Check out this series of articles by Ed Rivas and various OddBirds emeritus. www.oddbird.net/tags/django/
#Django #python #backend #development
Reposted by OddBird
I'm really excited for a future with CSS Mixins and Functions. @oddbird.dev has some great content on these features if you want to browse our collection: www.oddbird.net/tags/css-mix...
What are you most excited about?
What are you most excited about?
Tag: CSS Mixins & Functions
For more posts,
return to the
full posts list
or
browse all tags.
www.oddbird.net
October 3, 2025 at 8:11 PM
I'm really excited for a future with CSS Mixins and Functions. @oddbird.dev has some great content on these features if you want to browse our collection: www.oddbird.net/tags/css-mix...
What are you most excited about?
What are you most excited about?
Reposted by OddBird
Ok, it's pretty nifty that if you put `loading="lazy"` on an image in a popover or dialog, the image doesn't load until you open it.
October 6, 2025 at 1:57 PM
Ok, it's pretty nifty that if you put `loading="lazy"` on an image in a popover or dialog, the image doesn't load until you open it.
Reposted by OddBird
Four days till @smashingconf.com – I'm excited to see some of you there! I'll be talking about CSS variables & type safety.
I also have a workshop on Modern CSS Architecture: smashingconf.com/ny-2025/work...
(And if you can't join in NY, reach out – I'm happy to tailor a workshop for your company)
I also have a workshop on Modern CSS Architecture: smashingconf.com/ny-2025/work...
(And if you can't join in NY, reach out – I'm happy to tailor a workshop for your company)
Modern CSS Architecture — New York 2025, October 6–9.
Full-day workshop • Thursday, October 9, 2025.
New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s...
smashingconf.com
October 2, 2025 at 8:58 PM
Four days till @smashingconf.com – I'm excited to see some of you there! I'll be talking about CSS variables & type safety.
I also have a workshop on Modern CSS Architecture: smashingconf.com/ny-2025/work...
(And if you can't join in NY, reach out – I'm happy to tailor a workshop for your company)
I also have a workshop on Modern CSS Architecture: smashingconf.com/ny-2025/work...
(And if you can't join in NY, reach out – I'm happy to tailor a workshop for your company)
Reposted by OddBird
Anchor positioning is out in Safari, and I just played around with it in Firefox Nightly, where it's pretty darn close. Now is the time to learn anchor positioning!
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
September 30, 2025 at 4:57 PM
Anchor positioning is out in Safari, and I just played around with it in Firefox Nightly, where it's pretty darn close. Now is the time to learn anchor positioning!
In addition to the CSS Tips & Tricks series, we run a monthly show called Winging It LIVE. We interview experts and dig into front-end web development. Topics range from htmx to #CSS to #UX to fluid type and more.
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
September 29, 2025 at 5:15 PM
In addition to the CSS Tips & Tricks series, we run a monthly show called Winging It LIVE. We interview experts and dig into front-end web development. Topics range from htmx to #CSS to #UX to fluid type and more.
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
All Ep: www.youtube.com/@wingingitod...
htmx Ep:
www.youtube.com/playlist?lis...
In this month's OddNews, @miriam.codes intros new options to help developers dealing with tech debt & tedious maintenance tasks. @stacykvernmo.com demos The BEST way to work with shape-outside.
Learn about Poetic #CSS, and subscribe to OddNews for a discount on consulting. www.oddbird.net/oddnews/
Learn about Poetic #CSS, and subscribe to OddNews for a discount on consulting. www.oddbird.net/oddnews/
September 26, 2025 at 4:02 PM
In this month's OddNews, @miriam.codes intros new options to help developers dealing with tech debt & tedious maintenance tasks. @stacykvernmo.com demos The BEST way to work with shape-outside.
Learn about Poetic #CSS, and subscribe to OddNews for a discount on consulting. www.oddbird.net/oddnews/
Learn about Poetic #CSS, and subscribe to OddNews for a discount on consulting. www.oddbird.net/oddnews/