What’s !important #13: @function, alpha(), CSS Wordle, and More

CSS functions, expertly explained

Jane Ori expertly explained how CSS functions work. @function will probably be the biggest CSS feature to probably become Baseline this year, so I definitely found it a bit intimidating at first. That is, until I read Jane’s baby-step-by-baby-step walkthrough, which eases you into it really well.

In addition, Declan Chidlow wrote our @function documentation, which you might want to bookmark for quick reference in the future.

The alpha() function

Speaking of functions, the alpha() function caught me by surprise. Firstly, because I hadn’t heard of it, and secondly, because…why? We can already change the alpha channel:

/* This */
color: alpha(from var(--color) / 0.5);

/* Instead of this */
color: oklch(from var(--color) l c h / 0.5);

Well, this comment from Jason Leo sums it up. Firstly, it means that we won’t need to hard-code color values when we already have CSS variables. For years I’ve circumvented this by only storing the actual values in CSS variables, but having to wrap them in the color function every single time is really monotonous:

/* Just the values */
--color: 0.65 0.23 230;

/* Then use them flexibly */
color: oklch(var(--color));
color: oklch(var(--color) / 0.5);

But it’s better than this (in my opinion):

/* Function and values */
--color: oklch(0.65 0.23 230);

/* Delightful */
color: var(--color);

/* Delightless */
color: oklch(from var(--color) l c h / 0.5);

alpha() offers the best of both worlds:

/* Less delightless */
color: alpha(from var(--color) / 0.5);

Secondly, the color format is actually irrelevant in this context, so alpha(from var(--color) / 0.5) communicates the intention more clearly than oklch(from var(--color) l c h / 0.5) does. It also makes the declaration inherently shorter.

Credit to Adam Argyle for bringing alpha() up.

The Field Guide to Grid Lanes

WebKit launched the Field Guide to Grid Lanes (formerly known as CSS masonry layout). If you’ve ever read one of our CSS-Tricks Guides, it’s similar to that (their words — just sayin’). It’s a smooth introduction with a variety of barebones and real-world demos.

Quality-of-life upgrades for

Una Kravets talked about two quality-of-life upgrades for

— the new closedby attribute, which isn’t supported by Safari yet, and overscroll-behavior: contain. There are some nuggets in the comments too, including a tip about scrollbar-gutter: stable.

✅ Nice lil btn scale-down
🙈 Layout change bc the scroll bar disappears
🙈 No light dismiss

These UX problems can easily be solved with:

– closedby=”any”
– overscroll-behavior: contain

[image or embed]

— Una Kravets (@una.im) 13:28 · Jun 3, 2026

Also, Chris Coyier showed us how to animate

s, which I think many of us know how to do already, but it’s so easy to mess up. I have to Google it every time (it’s those bleeping @starting-styles).

What happened at CSS Day 2026?

CSS Day, the annual CSS community conference, was held in Amsterdam on the 11th and 12th of this month (so two days, technically). While there wasn’t a livestream this year, recordings will become available in late June. Until then, check out CSS Day on Bluesky as well as the #CSSDay Bluesky feed to see what happened on stage, what happened behind the scenes, and even the slides from some of the talks.

And no, there weren’t any flamethrowers this year, but it wasn’t DOOM-free either (if you know, you know).

CSS Wordle

What a week it’s been, especially with everything that transpired at CSS Day, but if you have any energy left I highly recommend a round (or several rounds) of Sunkanmi Fafowora’s CSS Wordle, which I’ve literally been obsessed with for the last week.

New web platform features and updates

Until next time!