Lightnews — Scholar-powered news

James Stuckey Weber @jamessw.com · 2d

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 · 3d

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 · 6d

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 · 9d

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 · 10d

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 · 12d

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 · 16d

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 · 20d

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 · 20d

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 · 22d

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 14

Reposted by James Stuckey Weber

Mia (online) @miriam.codes · 22d

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 · 22d

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

1 2

Reposted by James Stuckey Weber

Sara Soueidan @sarasoueidan.com · 22d

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 · 23d

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 · 23d

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 · 24d

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 · 27d

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 · 28d

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 · 28d

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 · 29d

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

Reposted by James Stuckey Weber

Stacy Kvernmo @stacykvernmo.com · Sep 5

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.

1 6 21

Reposted by James Stuckey Weber

Mia (online) @miriam.codes · Sep 4

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

Don't Inherit the Box Model

It's time to stop spreading this out-dated practice

www.oddbird.net

7 22 110