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...

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/

Thanks so much to Alice Boxhall for supporting our open source work! @jamessw.com focuses on Popover & Anchor Positioning polyfills, @miriam.codes works on #CSS specs for functions, mixins, and responsive typography. Help us keep that work sustainable & focused! opencollective.com/oddbird-open...

I've talked to many teams struggling with #CSS – still, after trying the branded answers: utilities! obscure-naming_conventions! frameworks! You don't need all that. Learn to work with the language. Need help? Schedule a call, or bring me in to tailor a plan: oddbird.dev/services/arc...

For spacing values on a website – is it better to respond to font-size, or available space, or stick with static units? You don't have to choose! Sometimes the best unit in #CSS is a combination – with calc()/clamp() or min()/max() or round() & other math functions. www.oddbird.net/2025/09/23/t...

A recent post by @miriam.codes where she looked at why `box-sizing` shouldn't be inherited got me wondering if we even need to reset it to border-box in the first place... youtu.be/PtAcpV6TAGM

We're excited to be starting a new series on the Winging It channel called CSS Tips & Tricks! These are short videos each focused on one specific CSS feature from @miriam.codes, @stacykvernmo.com, and @jamessw.com. Subscribe for updates. youtube.com/playlist?list=PL4jAKUtAhpHlOm3Lfv83ZHpfdJ4zHCDyv

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

There's one CSS 'rule' I always come back to – the heart of what I'm calling Poetic CSS: What are we trying to express, and how clearly can we express it? There's no best unit, best layout mode, or best selectors – only the ones that express our goals most clearly. Use the whole language. #CSS

The BEST way to work with CSS shape-outside - @oddbird.dev www.youtube.com/watch?v=hKiL...

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!

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...

So many FOMO-inducing posts from @smashingconf.com Freiburg. Wish I was there! But I'll be in NY next month, talking about CSS types & validation. I want to change how you see vars now & prepare you for functions. You can also join my workshop on CSS architecture! smashingconf.com/ny-2025/work...

I enjoyed taking @miriam.codes CSS cascading layouts workshop course earlier this year. Thanks for continuing to help others improve their understanding of CSS, what’s possible with the language, and the history of the web!

a very thought provoking article on why we perhaps shouldn't default to or inherit box-sizing: border-box; from @miriam.codes www.oddbird.net/2025/09/04/b...

Have you played with `anchor-size()`? It's more flexible then `anchor()` and can be used for sizing and margins in addition to the inset. It's been fun to play around with and make demos like this but I'm curious- what use cases have you found for it?

There are tools for generating responsive type in CSS, but the result is a clamp() function with mysterious numbers. @miriam.codes explores what those numbers do with her visualizer using #CSS gradients. Level up your CSS with more free demos like this in your inbox! www.oddbird.net/oddnews/

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.

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...

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 .

had a CSS challenge that would have been GNARLY yesterday and then remembered CSS layers exist now and solved it in +3 lines and no !important hacks CSS is so good now 💜💜 @miriam.codes @tabatkins.com fantasai thank you for your work on the layers spec

This was a helluva great discussion. I got a lot of perspective from @hidde.blog and @miriam.codes. The funny thing about roundtables with amazing people like this is that I'm always more interested in what others have to say than what I do. Feels like having a front seat to all the awesomeness!

The last post of a fantastic series by Mia here. There’s some great visualisations that’ll help you really understand fluid/responsive typography. www.oddbird.net/2025/08/26/t...

Anchor positioning is not yet baseline, but you can use it in production with a polyfill - anchor-positioning.oddbird.dev (and in fact, we're using it on oddbird.dev). If you're curious about anchor positioning, now is a great time to learn, and my email course will help you dive deep!

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...

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!

Responsive Type has been around for a long time, popularized with tools like @utopia.fyi. But there are still questions to ask! Get caught up on @miriam.codes's exploration with this series, and watch for a fun new demo coming tomorrow! Reimagining Fluid Typography www.oddbird.net/2025/02/12/f...

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...

Any other OSS contributors getting recruited to do annotations and labeling work for AI coding tools? :backing away slowly:

Big CSS progress today. Scope v1 issues are all resolved: github.com/orgs/w3c/pro... Progress on gamut mapping colors: github.com/orgs/w3c/pro... Masonry will get a unique `display` value from grid. Name TBD: github.com/w3c/csswg-dr...

Thanks to @localghost.dev for helping sustain our open source work! If you use the features @miriam.codes, @jamessw.com, and others helped create, like mixins & functions and popover polyfill, support at: opencollective.com/oddbird-open... or attend Winging It: www.youtube.com/watch?v=ER4A...

With CSS anchor positioning, the anchor() function can be used as a length, so you can use it with functions like round() and mod(). Here's a 2-track abacus, and I'll leave it up to you to add more. My email course covers anchor() and much more- sign up today! oddbird.dev/learn/course...

If you appreciate the features I've helped develop - container queries, cascade layers, mixins & functions, scope, progress, logical shorthands - consider supporting that work though open collective: opencollective.com/oddbird-open... or hire me to teach a workshop: www.oddbird.net/talks/

Last week, Container Queries became baseline widely available. We shared resources to get you up to speed. But if you have limited time to expand your #CSS skills, we recommend focusing on CSS Grids! Playlist www.youtube.com/playlist?lis... CSS Grid in Practice www.youtube.com/live/kQu-bSW...

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.

looking at implementing @oddbird.dev's baseline support web component (via @miriam.codes) into my articles. github.com/oddbird/brow...

🎉 Happy 30-month anniversary to Container Queries – in every browser since Feb, 2023. It was supposed to be impossible, but here we are! Why 2.5 years? Nothing will change tomorrow, but Baseline uses this milestone to signal confidence a feature has gained "wide" support. youtu.be/bhHV0rQ3-CQ

Are you using position-area on a popover? Make sure to unset that margin!

Once it seemed #CSS Container Queries might be impossible to implement. Aug 14 they become Baseline widely available! Book a workshop to get your team up-to-speed: oddbird.dev/workshops/cascading-layouts/ Learn more with these articles, videos, and podcasts: oddbird.dev/tags/container-queries/

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...

The other day @davatron5000.bsky.social shared a link to the new `stretch` keyword in CSS – and I saw a lot of questions about how it's different from 100% (or 100vh when doing full-screen layouts). So I made a quick video to show how these all work! #CSS youtu.be/iZZXOuLxagE

CSS Working Group gets together in Aug to discuss various issues. Join @miriam.codes and @stacykvernmo.com afterward, on Aug 27, for a chat with #CSS expert ‪@kizu.front-end.social.ap.brid.gy about what's new in CSS, what happened in the meetings, and what's coming! youtube.com/watch?v=ER4APBNgV88

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...

Dig deeper into #CSS Cascade Layers with @miriam.codes, Ed Rivas, and @stacykvernmo.com of OddBird. For beginners through advanced developers. Cascade Layers Video Playlist www.youtube.com/playlist?lis... A Complete Guide to CSS Cascade Layers oddbird.net/2022/02/21/layers-guide/

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...

This was such a good conversation!

If you missed it live, you can now watch @miriam.codes & @jamessw.com Winging It with @kilianvalkhof.com about tools for developers. Including Why work on developer tools? Ways developers’ needs have changed New Polypane features Additional accessibility tools #CSS www.oddbird.net/2025/07/17/w...

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

CSS mixins & functions are coming! And the best way to prepare is by re-visiting CSS variables. Don’t let the Guaranteed Invalid value & Invalid at Computed Value Time behavior trip you up. Watch my CSS Day talk, or book a workshop to go in depth with modern #CSS! www.oddbird.net/talks/mixins/