OddBird

A Complete Guide to CSS Cascade Layers Cascade layers are a new CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on spe...

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/

Relative Colors ...

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!

Tools for Developers With special guest Kilian Valkhof

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

Container Queries: a Quick Start Guide Now is the time to begin experimenting with a long requested layout tool.

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 Functions & Mixins Is sass dead yet?

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/

[css-logical] Flow-relative syntax for `margin`-like shorthands · Issue #1282 · w3c/csswg-drafts CSS currently assigns the values in the margin/padding/border shorthand to their physical longhands, i.e. margin: 1em 2em 3em 4em; is equivalent to margin-top: 1em; margin-right: 2em; margin-bottom...

Threw some money to @oddbird.dev to get this done!

Throw more money to Open Source and not Anthrophic/Amazon or OpenAI/Microsoft!!

github.com/w3c/csswg-dr...

Thank you!! We appreciate it!

A picture of a handdrawn letter A and a bit of text from a book about Format that is very zoomed in with a visible tooltip "Zoom out on this image."

In the latest OddNews, @miriam.codes writes about when she tried setting browser font-size preferences, and found it broke more sites than it improved. And @jamessw.com gives an update on the new Vite default.

Read Issue 27: us19.campaign-archive.com?e=%5BUNIQID%...

Create Performant Layouts and Resilient Dropdowns This CSS anchor positioning course teaches you how

After giving a talk on anchor positioning, I feel like I've unleashed a fire hose of info, and wonder how much will be retained.. That's why I launched a free weekly email course, to slow things down and help add anchor positioning to your tool set. Sign up today!

CSS Logical Properties - Web Platform Feature of the Week Unveiling CSS logical properties for a more inclusive, streamlined web development experience!

A new edition of the newsletter is ready for your reading and watching pleasure 😁Big shoutout to @miriam.codes for the great work she is doing in the realm of the logical properties 🙏 buttondown.com/schalkneethl...

Designing for User Font-size and Zoom | OddBird Using modern CSS units and math functions

I've been exploring different ways to interact with a user preferred font size. Could the max() function work better than a classic px-to-em conversion?

Along the way: How Best Practice ruined text-only zoom! 😬

Still thinking about units & type in #CSS …

www.oddbird.net/2025/07/22/s...

Polypane on the Winging It Live stream | Polypane Last week I joined Miriam Suzanne and James Stuckey Weber on the Winging It Live stream to talk about tools for developers, and Polypane in particular. We had a…

Kilian was on the @oddbird.dev Winging It Live stream to chat about Polypane and devtools. Watch it back here: polypane.app/blog/polypan...

OddBird Open Source - Open Collective We love contributing to the languages & tools developers rely on. Our focus is Popover & Anchor Positioning polyfills, and CSS specifications for functions, mixins, and responsive typography. Help us ...

I've just contributed to @oddbird.dev Open Source - #CSS Logical Shorthands. Consider supporting them too — every little helps! opencollective.com/oddbird-open...

Thanks so much!! We really appreciate it.

YouTube video by Winging It Tools for Developers

Tools for Developers - @oddbird.dev @kilianvalkhof.com

www.youtube.com/watch?v=ou6V...

Designing With Code CSS video course waitlist signup

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

Tools for Developers Join Kilian Valkhof, Miriam Suzanne, and James Stuckey Weber live to talk about developer tools on July 17.

I've been so appreciative of the tools (like Polypane) that @kilianvalkhof.com provides for developers, and I'm excited to talk with him next week on Winging It! Join us!

Create Performant Layouts and Resilient Dropdowns This CSS anchor positioning course teaches you how

I just wrapped up the last email of my anchor positioning course. It's full of tips and info, and I think it'll be useful whether you've played with anchor positioning or haven't touched it yet.

Sign up, and share it with someone who might find it useful!

Speeding Up Your Sass Compilation in Vite and Webpack A quick guide to adopting the modern Sass API

Since @vite.dev 7.0 is hitting your Dependabot queue, it's a great time to make a quick change to speed up your Sass compilation.

While Vite now uses the Sass Compiler API by default, you'll likely need to switch to `sass-embedded` to see the speed improvement.

#sass #css #webdev

We had an interesting CSSWG discussion yesterday about how the `&` selector should behave inside `@scope` - and I think we made a big improvement. Here's a quick explanation of the change.

(the issue was raised by @kizu.dev)

css.oddbird.net/scope/parent...

If you think this looks neat, and you'd like to learn more about anchor positioning, I'd strongly recommend @oddbird.dev's email course by @jamessw.com

One of the few emails I look forward to getting each week 😊

www.oddbird.net/learn/course...

Create Performant Layouts and Resilient Dropdowns This CSS anchor positioning course teaches you how

Want to try learning CSS anchor positioning at a manageable pace? Sign up for OddBird's free email course to get weekly lessons, and learn how to create performant layouts and resilient dropdowns (with bonus Discworld references in week 5). #css #webdev

In @oddbird.dev stand up this morning, we're discussing that CSS pixels are defined in reference to "a nominal arms length of 28 inches."

Does having a 28in arm make you better at CSS? Where do you measure from? Does the W3C have an official mannequin reference arm?

www.w3.org/TR/css-value...

Create Performant Layouts and Resilient Dropdowns This CSS anchor positioning course teaches you how

CSS anchor positioning is going to be in all major browsers by the end of the year! 🎉 Sign up for OddBird's free weekly email course to learn how it's going to make layouts more performant and resilient, and unlock new design possibilities. #css #webdev

First pass is complete, working from the MDN prop reference & double-checking against the spec prop index.

I think this is all the places in CSS where the axis or side is implied by a positional syntax based on physical orientation (TRBL or XY):

css.oddbird.net/logical/prop...

What the Spec?! Season 1 Episode 3: CSS, Cascade Layers and Power with Miriam Suzanne.

📣 Ep 3 of @whatthespec.bsky.social is here 🥳
@miriam.codes talks CSS history, Cascade Layers and rethinking `!important`. Available on your fav podcast app & RSS.

Apple: podcasts.apple.com/us/podcast/c...

Spotify: open.spotify.com/episode/6o4S...

Transcript: lolaslab.co/what-the-spe...

Thanks to @chriscoyier.net for supporting our goal to unblocking #CSS logical shorthands!

Get the latest update from @miriam.codes on this work at css.oddbird.net/logical/properties/.

You can support her work too at:
opencollective.com/oddbird-open-source/contribute/css-logical-shorthands-86141

Make the Web a More Colorful Place! A guide to using new color spaces & formats with OddContrast Image of OddContrast with a dropdown menu of color spaces and formats including Hex, HSL, Lab, LCH, Oklab, Oklch, P3, sRGB

Make the Web a More Colorful Place!

Stacy @stacykvernmo.com created a tutorial for using new color spaces & formats with OddContrast.

Convert colors
See gamut boundaries
Check contrast
Share, bookmark combinations
Copy, swap colors

In OddNews
us19.campaign-archive.com?u=80219aa68d...

#ux #design

I started working through the long list of css properties, along with associated keywords & functions, to document where we have logical syntax, physical syntax, or both.

Day 1: css.oddbird.net/logical/prop...

Support this effort! opencollective.com/oddbird-open...