Lightnews — Scholar-powered news

James Stuckey Weber @jamessw.com · 15h

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

2 7

James Stuckey Weber @jamessw.com · 3d

As long as it doesn’t use em dashes for custom properties 😆

2

James Stuckey Weber @jamessw.com · 7d

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!

CSS Anchor Positioning Polyfill

anchor-positioning.oddbird.dev

2 3

James Stuckey Weber @jamessw.com · 8d

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.

1 4

James Stuckey Weber @jamessw.com · 11d

www.oddcontrast.com supports more formats than many, and includes gamut checks if you're using it to manipulate colors.

OddContrast

Color contrast checker with Oklch, Oklab, Display P3, and more – helping designers meet WCAG 2 accessibility standards.

www.oddcontrast.com

2

James Stuckey Weber @jamessw.com · 14d

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

3 8

Reposted by James Stuckey Weber

OddBird @oddbird.dev · 15d

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

5 12

James Stuckey Weber @jamessw.com · 17d

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.

2

Reposted by James Stuckey Weber

Mia (online) @miriam.codes · 21d

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

The Best CSS Unit Might Be a Combination

We don't have to choose between px and rem for spacing

www.oddbird.net

4 28

Reposted by James Stuckey Weber

Stacy Kvernmo @stacykvernmo.com · 25d

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

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

2 4

James Stuckey Weber @jamessw.com · 25d

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.

Reposted by James Stuckey Weber

Rachel Andrew @rachelandrew.bsky.social · 27d

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

Join the WebDX CG for an AMA on Reddit | Blog | web.dev

Join the AMA on r/webdev on September 18 and ask us anything!

web.dev

12 15

Reposted by James Stuckey Weber

Mia (online) @miriam.codes · 27d

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

Designing With Code

CSS video course waitlist signup

www.oddbird.net

4 9

James Stuckey Weber @jamessw.com · 27d

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

1 2

Reposted by James Stuckey Weber

Sara Soueidan @sarasoueidan.com · 27d

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!

CSS to speech: alternative text for CSS-generated content

— The personal website of Sara Soueidan, inclusive Web UI engineer

www.sarasoueidan.com

1 12 39

James Stuckey Weber @jamessw.com · 28d

You did it, with months to spare! I also missed out on a Red-necked phalarope last month. 😢

1 1

James Stuckey Weber @jamessw.com · 28d

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!

Create Performant Layouts and Resilient Dropdowns

This CSS anchor positioning course teaches you how

oddbird.dev

1 3 3

Reposted by James Stuckey Weber

Patrick Brosset @patrickbrosset.com · 29d

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

From the webdev community on Reddit: We are the W3C WebDX Community Group, working to improve developer experience with projects like Baseline. Ask Us Anything!

Explore this post and more from the webdev community

www.reddit.com

1 5 5

James Stuckey Weber @jamessw.com · Sep 12

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

Reposted by James Stuckey Weber

Una Kravets @una.im · Sep 11

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

una.im | Follow-the-leader pattern with CSS anchor positioning

Learn how to create a dynamically re-anchored pointer element.

una.im

2 22 110

Reposted by James Stuckey Weber

OddBird @oddbird.dev · Sep 11

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!

Mixins & Functions to Streamline CSS

With special guest Roma Komarov

www.oddbird.net

1 7 14

James Stuckey Weber @jamessw.com · Sep 10

This was such a fun project to work on!

Rachel Andrew @rachelandrew.bsky.social · Sep 9

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

web.dev

6

James Stuckey Weber @jamessw.com · Sep 9

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?

CSS Anchor Positioning- Anchor Size with Calc

...

codepen.io

3 6

Reposted by James Stuckey Weber

OddBird @oddbird.dev · Sep 8

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/

Screenshot of the CodePen visualization with options to adjust the font size, resize the viewport, and zoom page. The letter A as an example at a font-size of 100vw.

3 5

James Stuckey Weber @jamessw.com · Sep 5

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

3 2