iiinova — where your digital self keeps evolving

OddBird @oddbird.dev · 31/03/2026

March OddNews... ...is all about quick & easy UI wins using baseline #CSS features. Read @stacykvernmo.com's article or watch the latest Winging It show episode. We cover: - AVIF - Lazy Loading - @starting-style - Backdrop-filter - Relative colors - Text-box Read: mailchi.mp/oddbird/quic...

image gallery in codepen with pictures of cute small dogs

021

OddBird @oddbird.dev · 17/11/2025

OddNews Is. 31 | - CSS video course update from @miriam.codes - Anchor Positioning is available across browsers. Now what?! from @jamessw.com - Wrangling complex navigation design patterns from @sondrae.bsky.social and @stacykvernmo.com Read archive: mailchi.mp/oddbird/cros...

The word update typed on page sticking out of a typewriter.

031

OddBird @oddbird.dev · 07/11/2025

Winging It E25 @stacykvernmo.com, @sondrae.bsky.social and @clayton.social.coop.ap.brid.gy debate thorny #UX design questions in costume. www.oddbird.net/2025/10/23/w... - Complex navigation - Ever a case for infinite scroll? - Pagination or load more button? - Click to open or hover? - Truncatio…

Sondra E, Stacy, and Clayton Dewey wear Halloween costumes and laugh.

043

OddBird @oddbird.dev · 27/10/2025

OddNews Is. 30 - We’re tiptoeing into spooky season 🎃 with Anchor Positioning, the best CSS Units, and Bad UX. Read & Subscribe: www.oddbird.net/oddnews/ #css #ux

CodePen demoing Anchor Pos Containing Block Shifting

020

OddBird @oddbird.dev · 06/10/2025

Want to go deeper with SQLAlchemy, FastAPI Path Operations, Django REST Framework & Channels? Check out this series of articles by Ed Rivas and various OddBirds emeritus. www.oddbird.net/tags/django/ #Django #python #backend #development

SQLAlchemy for Django Developers by Ed Rivas on Oct 23.
FastAPI Path Operations for Django Developers by Ed Rivas on Oct 19.

010

OddBird @oddbird.dev · 29/09/2025

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

0125

OddBird @oddbird.dev · 26/09/2025

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/

022

OddBird @oddbird.dev · 22/09/2025

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

YouTube playlist view showing 5 CSS Tips and Tricks videos from Stacy, Mia, and James on shape-outside, responsive type, container queries, anchor positioning, and a new stretch keyword.

051

OddBird @oddbird.dev · 08/09/2025

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.

053

OddBird @oddbird.dev · 29/07/2025

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

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

043

OddBird @oddbird.dev · 11/06/2025

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

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

0219

OddBird @oddbird.dev · 12/05/2025

Create performant layouts and resilient dropdowns with #CSS Anchor Positioning. @jamessw.com has created a new course that explains how, and you can read the introduction in OddNews No. 25. Read the course intro & subscribe to OddNews at: us19.campaign-archive.com?u=80219aa68d...

CodePen
A pink box with the text 'positioned element'.
Below that a blue box with the text 'I hope no one clicks me.'

001

OddBird @oddbird.dev · 16/04/2025

The 3rd demo video on Container Size Queries from @miriam.codes's #CSS Layouts Workshop is out tomorrow. Subscribe to get a notification on YT: www.youtube.com/@wingingitod... Sign up to get the demo in your inbox: www.oddbird.net/oddnews/ CSS Workshop details: www.oddbird.net/workshops/ca...

Cat sitting in a box saying, "OMG. I have so many Questions for this damn Box."

020

OddBird @oddbird.dev · 11/04/2025

Thanks to everyone who's sent questions about @miriam.codes's #CSS Layouts workshop! - Whether or not you attend live, a recording will be available immediately after the workshop for all registrants - Each of 3 days will be 2.5hrs with 2 sessions and dedicate Q&A www.oddbird.net/workshops/ca...

A cat sits in a box with a question mark on it.

012

OddBird @oddbird.dev · 18/03/2025

Author-defined Functions are coming to #CSS, and you can start to experiment with them now! @miriam.codes explains how to do it in OddNews No. 21. Subscribe for monthly articles like this: us19.campaign-archive.com?u=80219aa68d...

🗞️ Miriam’s W3C Report

Custom CSS Functions in the Browser
by Miriam Suzanne on March 13, 2025
There’s been a lot of progress in the CSS Working Group lately, but I want to draw your attention to a prototype that landed in Chromium ‘Canary’ (v136+) browsers with the experimental platform features flag enabled. Author-defined Functions are coming to CSS, and you can start to experiment with them now!

Back in 2009 I was using Natalie Downe’s responsive layout technique. This was before media queries, or Responsive Web Design(TM), or calc(), or modern layout methods like flexbox and grid. The process involved a lot of math. It wasn’t complicated math – a single division problem – but it was repeated for every element in the layout. At its simplest (not accounting for gutters), if we want to span 3 out of 10 columns using percentages, we need to divide those numbers and multiply by 100%. Tired of doing that over and over, then copy-pasting the results into my CSS, I installed Sass.

Soon, we'll be able to solve these problems directly in CSS, without any third-party tools or preprocessing. Writing our own functions will allow us to take some repetitive bit of logic, give it a meaningful name, and reuse it anywhere we need. The simplest possible CSS function is something like this:

/* define the function */
@function --always-blue() { result: blue; }

0204

OddBird @oddbird.dev · 18/02/2025

OddNews is our monthly email with the latest in front-end web development and UX design. Feb issue is out: - @jamessw.com explores ways to track down why an anchor isn’t found - @miriam.codes reimagines fluid typography Read & Subscribe: oddbird.net/oddnews #CSS #UX #front-end

OddNews
Best practice is a conversation…
February 13, 2025 | 3 min read

Here’s a bit of what’s going on in our neck of the woods:

- Join a live conversation about debugging CSS Anchor Positioning with the Birds and guest, Tab Atkins-Bittner.
- James explores ways to track down why an anchor isn’t found.
- Miriam reimagines fluid typography and reports on the CSS Working Group progress for custom functions and more.
- Support bird conservation work.
- It’s our goal to build good things on the web for people. We’re here whenever you need us.

Share with a friend

🎙️ Upcoming Winging It LIVE

031

OddBird @oddbird.dev · 14/01/2025

OddNews is our monthly email with the latest in front-end web development and UX design. Next issue out Thu: - Special guest announced for Winging It LIVE - Who won the CSS IS AWESOME Game? - @miriam.codes's next steps for CSS functions & mixins Subscribe: oddbird.net/oddnews #CSS #UX #front-end

030

OddBird @oddbird.dev · 17/12/2024

OddNews Issue #18 has arrived! In this issue: - Winging It LIVE: CSS IS AWESOME Game Show - Sass indented syntax improvements - Anchor positioning is disruptive - A songbird without a song Featuring @stacykvernmo.com @miriam.codes @jamessw.com us19.campaign-archive.com?e=%5BUNIQID%...

031

OddBird @oddbird.dev · 15/11/2024

OddNews Is #17 is out! This issue: - Event: Baseline & Web Features - Most desired #CSS feature you can’t use yet - What do survey demographics tell us? - Air-speed velocity of an unladen swallow With @miriam.codes @jamessw.com @jgerigmeyer.bsky.social us19.campaign-archive.com?u=80219aa68d...

OddNews
Best practice is a conversation…
November 14, 2024 | 2 min read

This month:

- Winging It LIVE: Baseline & Web Features
- The most desired CSS feature you can’t use yet
- What do survey demographics tell us?
- New Awesome CSS Anchor Positioning Repo
- How to Support Anchor Positioning
- What is the air-speed velocity of an unladen swallow?

Share with a friend

🎙️ Upcoming Winging It LIVE
Baseline & Web Features: Rabbit Trails, Edge Cases, Insights

043