Stacy Kvernmo
@stacykvernmo.com
Designer/Dev @OddBird
Co-host of Winging It
I love CSS, typography, making things, yoga, gymnastics and more...
Co-host of Winging It
I love CSS, typography, making things, yoga, gymnastics and more...
Pinned
Stacy Kvernmo
@stacykvernmo.com
· Dec 17
CSS Is Awesome Game
YouTube video by Winging It
www.youtube.com
That was SO MUCH FUN! I can't thank @michelleb.bsky.social @5t3ph.bsky.social @kevinpowell.co @miriam.codes + @henrihelvetica.bsky.social enough for your bravery! And @jamessw.com for your help.
If you missed the CSS is Awesome Game Show, you can watch the replay: www.youtube.com/watch?v=fYfs...
If you missed the CSS is Awesome Game Show, you can watch the replay: www.youtube.com/watch?v=fYfs...
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 Stacy Kvernmo
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…
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 Stacy Kvernmo
Between the time we launched the original Learn CSS course on web.dev and today, container queries landed in browsers and became Baseline Widely available! It was high time for an update, and we were lucky enough to have the team at OddBird work with us. Enjoy 9 new modules! web.dev/blog/learn-c...
A refresh of Learn CSS with nine new modules | Blog | web.dev
Our popular Learn CSS course has been updated with new modules covering the latest CSS features.
web.dev
September 9, 2025 at 8:10 PM
Between the time we launched the original Learn CSS course on web.dev and today, container queries landed in browsers and became Baseline Widely available! It was high time for an update, and we were lucky enough to have the team at OddBird work with us. Enjoy 9 new modules! web.dev/blog/learn-c...
Reposted by Stacy Kvernmo
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.
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 Stacy Kvernmo
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/
Color fonts are really interesting. You can see the font-palette options using a tool like wakamaifondue.com or the type designer's site is often helpful.
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
Exploring Color Fonts (COLRv1)
COLRv1 fonts have limited support at the time of this pens creation, but are fun to experiment with in a supported browser. Check the list here: https:...
codepen.io
September 20, 2025 at 2:46 AM
Color fonts are really interesting. You can see the font-palette options using a tool like wakamaifondue.com or the type designer's site is often helpful.
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
You can even animate between font-palettes
codepen.io/stacy/pen/vE...
Unfortunately, COLRv1 has limited support caniuse.com/colr-v1
Reposted by Stacy Kvernmo
Tip: When you're using anchor positioning, consider how scrolling or screen size might make your positioned element overflow, and then add a backup with `position-try`.
Get more tips by signing up for my free weekly course on anchor positioning!
Get more tips by signing up for my free weekly course on anchor positioning!
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
September 16, 2025 at 5:21 PM
Tip: When you're using anchor positioning, consider how scrolling or screen size might make your positioned element overflow, and then add a backup with `position-try`.
Get more tips by signing up for my free weekly course on anchor positioning!
Get more tips by signing up for my free weekly course on anchor positioning!
Today feels like a good day to make this announcement.
We got a puppy.
We got a puppy.
September 12, 2025 at 6:41 PM
Today feels like a good day to make this announcement.
We got a puppy.
We got a puppy.
Reposted by Stacy Kvernmo
In the latest Winging It, @miriam.codes & @stacykvernmo.com chat with #CSS expert @kizu.dev about how to create reusable and flexible CSS using mixins & functions, what happened in the CSSWG meetings, and what's coming in CSS!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
Mixins & Functions to Streamline CSS
With special guest Roma Komarov
www.oddbird.net
September 11, 2025 at 6:53 PM
In the latest Winging It, @miriam.codes & @stacykvernmo.com chat with #CSS expert @kizu.dev about how to create reusable and flexible CSS using mixins & functions, what happened in the CSSWG meetings, and what's coming in CSS!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
www.oddbird.net/2025/08/27/w...
If you like the show, please subscribe!
Reposted by Stacy Kvernmo
Accessibility is one of those things that can feel a bit overwhelming when you start learning about it, so I had a conversation with @sarasoueidan.com where we talked all about it, including what it is, why it matters, how to get started learning more about it, and a lot more.
youtu.be/ndGKjhzmLXc
youtu.be/ndGKjhzmLXc
Navigating the World of Web Accessibility with Sara Soueidan
YouTube video by General Musings with Kevin Powell
youtu.be
September 12, 2025 at 2:06 PM
Accessibility is one of those things that can feel a bit overwhelming when you start learning about it, so I had a conversation with @sarasoueidan.com where we talked all about it, including what it is, why it matters, how to get started learning more about it, and a lot more.
youtu.be/ndGKjhzmLXc
youtu.be/ndGKjhzmLXc
We mentioned on Winging It that we might show some of our favorite browser tips. Here's one of many that I find delightful.
If you are working with shape-outside, then Firefox has a great path editor. I made a quick video to show how it works.
If you are working with shape-outside, then Firefox has a great path editor. I made a quick video to show how it works.
September 5, 2025 at 7:21 PM
We mentioned on Winging It that we might show some of our favorite browser tips. Here's one of many that I find delightful.
If you are working with shape-outside, then Firefox has a great path editor. I made a quick video to show how it works.
If you are working with shape-outside, then Firefox has a great path editor. I made a quick video to show how it works.
Reposted by Stacy Kvernmo
Please stop inheriting the box-model. The supposed use-case for that is extremely out-dated, inheritance doesn't really help, and it actively makes real box-sizing use-cases more difficult!
This #CSS best practice was never the best to begin with:
www.oddbird.net/2025/09/04/b...
This #CSS best practice was never the best to begin with:
www.oddbird.net/2025/09/04/b...
Don't Inherit the Box Model
It's time to stop spreading this out-dated practice
www.oddbird.net
September 4, 2025 at 9:39 PM
Please stop inheriting the box-model. The supposed use-case for that is extremely out-dated, inheritance doesn't really help, and it actively makes real box-sizing use-cases more difficult!
This #CSS best practice was never the best to begin with:
www.oddbird.net/2025/09/04/b...
This #CSS best practice was never the best to begin with:
www.oddbird.net/2025/09/04/b...
Reposted by Stacy Kvernmo
Tip 1: If you're using anchor positioning in a reusable component, add an anchor-scope to the component to help your positioned element find the right anchor.
Tip 2: Sign up for my free email course on anchor positioning .
Tip 2: Sign up for my free email course on anchor positioning .
Create Performant Layouts and Resilient Dropdowns
This CSS anchor positioning course teaches you how
oddbird.dev
September 3, 2025 at 8:25 PM
Tip 1: If you're using anchor positioning in a reusable component, add an anchor-scope to the component to help your positioned element find the right anchor.
Tip 2: Sign up for my free email course on anchor positioning .
Tip 2: Sign up for my free email course on anchor positioning .
Reposted by Stacy Kvernmo
I'll be Winging It live with @kizu.dev & @stacykvernmo.com in an hour (11am MT) to talk about future #CSS features like mixins, functions, and masonry!
youtube.com/live/ER4APBN...
youtube.com/live/ER4APBN...
What's coming in CSS? Mixins, Functions, Progress, and more…
YouTube video by Winging It
youtube.com
August 27, 2025 at 4:07 PM
I'll be Winging It live with @kizu.dev & @stacykvernmo.com in an hour (11am MT) to talk about future #CSS features like mixins, functions, and masonry!
youtube.com/live/ER4APBN...
youtube.com/live/ER4APBN...
Reposted by Stacy Kvernmo
I went down a rabbit hole trying to understand and visualize how fluid typography calculations work in #CSS. Here's a video and interactive codepen with the results:
www.oddbird.net/2025/08/26/t...
Adjust the values to see how they impact the rate of change, the viewport-size range, and page zoom!
www.oddbird.net/2025/08/26/t...
Adjust the values to see how they impact the rate of change, the viewport-size range, and page zoom!
Visualizing Responsive Typography
What do all the numbers in our clamp() do?
www.oddbird.net
August 26, 2025 at 6:59 PM
I went down a rabbit hole trying to understand and visualize how fluid typography calculations work in #CSS. Here's a video and interactive codepen with the results:
www.oddbird.net/2025/08/26/t...
Adjust the values to see how they impact the rate of change, the viewport-size range, and page zoom!
www.oddbird.net/2025/08/26/t...
Adjust the values to see how they impact the rate of change, the viewport-size range, and page zoom!
I wanted to play with some CSS trig functions and found you can calculate the width of a scrollbar in CSS when using container queries and registered custom properties. There’s so much more you can do, but here’s a little demo: codepen.io/stacy/pen/Qw...
Find the scrollbar width in CSS
Combining registered custom properties, container queries and a few CSS trig functions, we are able to find and display calculated values, like the scr...
codepen.io
August 22, 2025 at 3:26 PM
I wanted to play with some CSS trig functions and found you can calculate the width of a scrollbar in CSS when using container queries and registered custom properties. There’s so much more you can do, but here’s a little demo: codepen.io/stacy/pen/Qw...
Reposted by Stacy Kvernmo
When the CSS Working Group gets together for a face to face, the CSS meeting bot is busy and lots of Github issues get updated. If you can't keep up with it all, join Roma Komarov, @miriam.codes and @stacykvernmo.com as they recap the highlights on this month's Winging It.
What's coming in CSS? Mixins, Functions, Progress, and more…
YouTube video by Winging It
youtube.com
August 14, 2025 at 4:46 PM
When the CSS Working Group gets together for a face to face, the CSS meeting bot is busy and lots of Github issues get updated. If you can't keep up with it all, join Roma Komarov, @miriam.codes and @stacykvernmo.com as they recap the highlights on this month's Winging It.
There are so many CSS features rolling out these days but not enough time to experiment myself with everything. That’s why I’m loving @jamessw.com's arbitrary striped table CodePen demo using the new sibling-index() function codepen.io/jamessw/pen/...
Currently on Chrome & Edge 138+
Currently on Chrome & Edge 138+
Arbitrary Striped Table
...
codepen.io
August 15, 2025 at 5:55 PM
There are so many CSS features rolling out these days but not enough time to experiment myself with everything. That’s why I’m loving @jamessw.com's arbitrary striped table CodePen demo using the new sibling-index() function codepen.io/jamessw/pen/...
Currently on Chrome & Edge 138+
Currently on Chrome & Edge 138+
I love seeing the different stylistic alternates, ligatures, and swash variations of a typeface. I will often fork this pen and swap out the font-family variable to get a quick overview of what is available. I also have a version that will display numeric variants as well.
codepen.io/stacy/pen/dP...
codepen.io/stacy/pen/dP...
Preview Font Feature Settings
...
codepen.io
August 8, 2025 at 9:48 PM
I love seeing the different stylistic alternates, ligatures, and swash variations of a typeface. I will often fork this pen and swap out the font-family variable to get a quick overview of what is available. I also have a version that will display numeric variants as well.
codepen.io/stacy/pen/dP...
codepen.io/stacy/pen/dP...
Reposted by Stacy Kvernmo
When you use position-area, you're actually creating a new containing block for your positioned element. Learn more about how this makes anchor positioning just work in many situations in my email course here - oddbird.dev/learn/course...
August 6, 2025 at 4:04 PM
When you use position-area, you're actually creating a new containing block for your positioned element. Learn more about how this makes anchor positioning just work in many situations in my email course here - oddbird.dev/learn/course...
One of my favorite color updates in CSS is to use the relative color syntax to go from one color to another. When pairing with custom properties, you can create useful and reusable variants of your brand colors while keeping the relationship to the original color. codepen.io/stacy/pen/gb...
Relative Colors
...
codepen.io
August 1, 2025 at 5:53 PM
One of my favorite color updates in CSS is to use the relative color syntax to go from one color to another. When pairing with custom properties, you can create useful and reusable variants of your brand colors while keeping the relationship to the original color. codepen.io/stacy/pen/gb...
Reposted by Stacy Kvernmo
Dig into #CSS Container Queries with @miriam.codes & David Herron at OddBird:
Container Queries Videos youtube.com/playlist?list=PL4jAKUtAhpHkH3DMK8JNVPDjvKljPkNVU
For a Better Web oddbird.net/2025/04/08/better-web-8/
Container Queries: A Quick Start Guide oddbird.net/2021/04/05/containerqueries
Container Queries Videos youtube.com/playlist?list=PL4jAKUtAhpHkH3DMK8JNVPDjvKljPkNVU
For a Better Web oddbird.net/2025/04/08/better-web-8/
Container Queries: A Quick Start Guide oddbird.net/2021/04/05/containerqueries
Container Queries: a Quick Start Guide
Now is the time to begin experimenting with a long requested layout tool.
oddbird.net
July 30, 2025 at 8:56 PM
Dig into #CSS Container Queries with @miriam.codes & David Herron at OddBird:
Container Queries Videos youtube.com/playlist?list=PL4jAKUtAhpHkH3DMK8JNVPDjvKljPkNVU
For a Better Web oddbird.net/2025/04/08/better-web-8/
Container Queries: A Quick Start Guide oddbird.net/2021/04/05/containerqueries
Container Queries Videos youtube.com/playlist?list=PL4jAKUtAhpHkH3DMK8JNVPDjvKljPkNVU
For a Better Web oddbird.net/2025/04/08/better-web-8/
Container Queries: A Quick Start Guide oddbird.net/2021/04/05/containerqueries
Reposted by Stacy Kvernmo
We created Susy for CSS layout on 13 July, 2009 – 16 years ago! – & deprecated the project in 2020. But the Susy pages are still our most visited content on the @oddbird.dev website.
If you're interested in learning modern #CSS approaches, I'm working on a course:
www.oddbird.net/learn/course...
If you're interested in learning modern #CSS approaches, I'm working on a course:
www.oddbird.net/learn/course...
Designing With Code
CSS video course waitlist signup
www.oddbird.net
July 14, 2025 at 5:41 PM
We created Susy for CSS layout on 13 July, 2009 – 16 years ago! – & deprecated the project in 2020. But the Susy pages are still our most visited content on the @oddbird.dev website.
If you're interested in learning modern #CSS approaches, I'm working on a course:
www.oddbird.net/learn/course...
If you're interested in learning modern #CSS approaches, I'm working on a course:
www.oddbird.net/learn/course...