You may have missed my #CSS anchor positioning livestream with @miriam.codes and @jamessw.com earlier today, but that’s okay! The geeks at YouTube figured out some kinda magic capture thing that lets you play back live events whenever you want. Here’s ours: www.youtube.com/watch?v=qOXY...

I'm Winging It live with @meyerweb.com and @miriam.codes in 10 minutes to talk anchor positioning- join us with your questions!

I'm excited to talk with Eric Meyer from Igalia and @miriam.codes this Thursday about the patterns, problems and possibilities we're seeing as CSS Anchor Positioning becomes available across browsers. Join us on Thursday- what questions do you have for us? Get notified when we go live!

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

So far this morning, I have dealt with Python environment issues after an OS upgrade and timezone issues. I think I'm probably due for a good old fashioned git disaster.

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!

The @firefoxdevtools.bsky.social JSON viewer got better in @firefoxnightly.bsky.social : the console offers access to the original json data via `$json`. This allows to easily manipulate the underlying data to get what you want

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

Monday me will be unhappy, but I have a document.querySelector crashing Safari so... Have a good weekend!

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

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most. css-tip.com/position-area/ Example with position-area: top 👇

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

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.

🌈 Color.js is growing so much, we had to automate updating the millions of npm downloads counter in its readme. Currently at 84M total / 3M per week. 🤩 Speaking of, v0.6.0-beta.1 is fresh out the oven! github.com/color-js/col... Aiming for a stable next week if no issues 🤞🏼

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

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.

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 (@[email protected]) for the PR and being an awesome open source contributor!

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.

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 you need to know about my college experience 20 years ago is that the campus security guard still remembers my name, even though I was never caught.

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

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

Good bird migration the last couple nights, but managed to botch recording both nights. Ah well, I took a nice walk in the woods and saw a few warblers and thrushes.

The WebDX Community Group is hosting an AMA on the r/webdev subreddit tomorrow. This is the group behind the "State of ..." surveys and Baseline, so if you have questions about those initiatives—or anything else around developer experience, join us! web.dev/blog/baselin...

I have a CSS workshop coming up soon at @smashingconf.com in NY, where we'll talk more about units & layouts & naming conventions – using Poetic CSS: smashingconf.com/ny-2025 I'm also working on a video course, and happy to send you updates if you're interested: www.oddbird.net/courses/desi...

Oh fun, Voiceover reads the `menuitem` ARIA role as mah-NEW-adum.

While making an update to a course chapter that includes the use of CSS-generated content in the accName computation, I noticed that support for alt text in CSS has improved since I gave a talk about CSS & a11y at CSS Day last year. So I thought it's time to do a proper, long overdue writeup!

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!

Curious about what we do on the WebDX community group (i.e Baseline and web-features)? We're organizing a Reddit AMA on Thursday. Ask your questions here: www.reddit.com/r/webdev/com...

I had about 600 warbler call detections overnight, with 38 calls in just 30 seconds. #nfc #migration #birds

I've been using a "follow-the-leader" pattern with CSS anchor positioning lately so I decided to write about it! You set up a "follower" element and dynamically update the anchor on an event/state. Surprisingly simple and effective. Read more with demos!: 👀➡️ una.im/follow-the-a...

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!

This was such a fun project to work on!

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/

Tailwind class names are too short. I would much prefer the ergonomics of "align-self_end" over guessing which part of the property name gets dropped...

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

Composition with the Shadow DOM is more powerful than you think. You can do a lot with the default named slot assignment, but manual slot assignment is a pathway to many abilities some consider to be… unnatural.</emperor-palpatine>

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 .

This demo helped me visualize how `position-try` works in CSS Anchor Positioning. It was so much fun to design & build! 😄 Learn more in the article: ishadeed.com/article/anch...

Not yet baseline, but part of Interop 2025 so should soon reach baseline "newly available". Now is a good time to adopt anchor positioning (with the polyfill) in place of JS calculations, and then just remove the polyfill when anchor positioning reaches your baseline threshold.

Almost everything I know about anchor-positioning is thanks to James' articles on it, and this email course. It's definitely worth learning (I still get excited with how easy it makes a lot of things), and this is as good a resource as you'll find on the topic.

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!

My policy of "wait until Ahmad writes about it before you try to fully understand it" paying dividends again ishadeed.com/article/anch...

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!

Today's lunch video is "Cascading Layers of !mportance" - "Cascade Layers are now widely available, with the potential to fundamentally change how we think about the cascade and how we collaborate across design systems, component libraries, & third-party tools." #CSS www.youtube.com/watch?v=4Pkh...

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