What's Important in CSS: Functions, Grid Lanes, and Dialog Upgrades

CSS functions, the alpha() function, Grid Lanes, some things about <dialog> that you might not know, 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 become Baseline this year, so it can feel a bit intimidating at first — until you read Jane’s baby-step-by-baby-step walkthrough, which eases you into it really well.

In addition, Declan Chidlow wrote the @function documentation on CSS-Tricks, which you might want to bookmark for quick reference.

The `alpha()` Function

Speaking of functions, the alpha() function is worth knowing about. Firstly, because it hasn’t gotten much attention, and secondly, because the reason it exists isn’t immediately obvious — 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);

This comment from Jason Leo sums up the reasoning well. It means we won’t need to hard-code color values when we already have CSS variables. For years the workaround has been storing only 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 that’s better than this:

/* 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);

The color format is also 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, and 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). It’s a smooth introduction with a variety of barebones and real-world demos.

Six CSS Grid Lanes demos organized in a three-by-two grid — Photos, Recipes, Newspaper, Mega Menu, Timeline, and Pinboard. Source: WebKit.

Quality-of-Life Upgrades for `<dialog>`

Una Kravets talked about two quality-of-life upgrades for <dialog> — the new closedby attribute (not yet supported in Safari) and overscroll-behavior: contain. There are useful nuggets in the comments too, including a tip about scrollbar-gutter: stable.

Also, Chris Coyier covered how to animate <dialog> elements. It’s easy to get wrong — those @starting-style rules have a way of tripping people up every time.

What Happened at CSS Day 2026?

CSS Day, the annual CSS community conference, was held in Amsterdam on June 11th and 12th. There wasn’t a livestream this year, but recordings will become available in late June. In the meantime, check out CSS Day on Bluesky and the #CSSDay Bluesky feed to see what happened on stage, behind the scenes, and to find slides from some of the talks.

Portrait photos of the event speakers for CSS Day 2026. Source: CSS Day.