Lightnews — Scholar-powered news

Tag: CSS Mixins & Functions

www.youtube.com

3 1 17

Stacy Kvernmo @stacykvernmo.com · 8d

I'm really excited for a future with CSS Mixins and Functions. @oddbird.dev has some great content on these features if you want to browse our collection: www.oddbird.net/tags/css-mix...

What are you most excited about?

For more posts, return to the full posts list or browse all tags.

Exploring Color Fonts (COLRv1)

1 2 6

Reposted by Stacy Kvernmo

OddBird @oddbird.dev · 15d

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/

2 2

Stacy Kvernmo @stacykvernmo.com · 21d

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

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

Create Performant Layouts and Resilient Dropdowns

2 4

Reposted by Stacy Kvernmo

James Stuckey Weber @jamessw.com · 25d

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!

This CSS anchor positioning course teaches you how

oddbird.dev

1 3 3

Stacy Kvernmo @stacykvernmo.com · 29d

Today feels like a good day to make this announcement.

We got a puppy.

1 3

Stacy Kvernmo @stacykvernmo.com · 29d

That’s really helpful, thanks Kevin!

Stacy Kvernmo @stacykvernmo.com · 29d

That’s really good feedback. We will look into a podcast feed in the future.

1 1

Reposted by Stacy Kvernmo

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

Navigating the World of Web Accessibility with Sara Soueidan

1 7 14

Reposted by Stacy Kvernmo

Kevin Powell @kevinpowell.co · 29d

Accessibility is one of those things that can feel a bit overwhelming when you start learning about it, so I had a conversation with @sarasoueidan.com where we talked all about it, including what it is, why it matters, how to get started learning more about it, and a lot more.

youtu.be/ndGKjhzmLXc

YouTube video by General Musings with Kevin Powell

youtu.be

1 9 40

Stacy Kvernmo @stacykvernmo.com · Sep 5

Here's the CodePen that I used in the video if you want to check it out yourself:

codepen.io/stacy/pen/zj...

Starfish CSS Shape-Outside Demo

Don't Inherit the Box Model

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 Stacy Kvernmo

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

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

Create Performant Layouts and Resilient Dropdowns

7 22 110

Reposted by Stacy Kvernmo

James Stuckey Weber @jamessw.com · Sep 3

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 CSS anchor positioning course teaches you how

oddbird.dev

4 5

Reposted by Stacy Kvernmo

Mia (online) @miriam.codes · Aug 27

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

What's coming in CSS? Mixins, Functions, Progress, and more…

Visualizing Responsive Typography

youtube.com

7 14

Reposted by Stacy Kvernmo

Mia (online) @miriam.codes · Aug 26

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!

What do all the numbers in our clamp() do?

Find the scrollbar width in CSS

20 89

Stacy Kvernmo @stacykvernmo.com · Aug 22

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

Combining registered custom properties, container queries and a few CSS trig functions, we are able to find and display calculated values, like the scr...

What's coming in CSS? Mixins, Functions, Progress, and more…

5 9

Reposted by Stacy Kvernmo

James Stuckey Weber @jamessw.com · Aug 14

When the CSS Working Group gets together for a face to face, the CSS meeting bot is busy and lots of Github issues get updated. If you can't keep up with it all, join Roma Komarov, @miriam.codes and @stacykvernmo.com as they recap the highlights on this month's Winging It.

youtube.com

7 18

Stacy Kvernmo @stacykvernmo.com · Aug 15

There are so many CSS features rolling out these days but not enough time to experiment myself with everything. That’s why I’m loving @jamessw.com's arbitrary striped table CodePen demo using the new sibling-index() function codepen.io/jamessw/pen/... 

Currently on Chrome & Edge 138+

Arbitrary Striped Table

Preview Font Feature Settings

6 26

Stacy Kvernmo @stacykvernmo.com · Aug 8

I love seeing the different stylistic alternates, ligatures, and swash variations of a typeface. I will often fork this pen and swap out the font-family variable to get a quick overview of what is available. I also have a version that will display numeric variants as well.
codepen.io/stacy/pen/dP...

1 1 4

Reposted by Stacy Kvernmo

James Stuckey Weber @jamessw.com · Aug 6

When you use position-area, you're actually creating a new containing block for your positioned element. Learn more about how this makes anchor positioning just work in many situations in my email course here - oddbird.dev/learn/course...

A rough diagram showing how position-area works, with an anchor in the center of a 3x3 grid, and a positioned element below it inside of a larger containing block.

7 22

Stacy Kvernmo @stacykvernmo.com · Aug 1

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

Relative Colors

Container Queries: a Quick Start Guide

10 44

Reposted by Stacy Kvernmo

OddBird @oddbird.dev · Jul 30

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

Now is the time to begin experimenting with a long requested layout tool.

oddbird.net

6 9

Reposted by Stacy Kvernmo

Mia (online) @miriam.codes · Jul 14

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

Designing With Code

CSS video course waitlist signup

5 23

Stacy Kvernmo @stacykvernmo.com · May 14

Send us your questions! @miriam.codes and I will answer CSS-related questions on tomorrow's Winging It at 1pm ET.

Do you want to know how to apply layers to an existing project?

What CSS syntax we always need to look up when writing?

Ask away ... then join us!

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

CSS Q&A Party!