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

CSS functions, the alpha() function, Grid Lanes, some things about Dialog that you might not know, CSS Wordle, and more — this is What’s !important right now.

DS

Daniel SchwarzCSS-Tricks

·June 15, 2026·Articles

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

The new `@function` rule, explained

Jane Ori has written a thorough, beginner-friendly walkthrough of how CSS functions work. The piece breaks down the upcoming @function rule step by step, which is helpful given that it may be one of the biggest CSS features to reach Baseline this year. For quick reference later, Declan Chidlow has also put together documentation for @function.

Why `alpha()` earns its place

The alpha() function might seem redundant at first — the alpha channel is already adjustable:

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

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

But as Jason Leo points out, there’s a real benefit: no more hard-coding colors when working with CSS variables. The usual workaround — storing raw values and wrapping them in a color function each time — gets tedious fast:

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

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

The alternative is arguably worse:

/* 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() sits in the middle:

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

There’s also a readability win. Since the color format doesn’t matter here, alpha(from var(--color) / 0.5) communicates intent more clearly than spelling out oklch(from var(--color) l c h / 0.5). It keeps the declaration shorter, too. Adam Argyle first raised the idea of alpha().

WebKit’s Field Guide to Grid Lanes

WebKit has released the Field Guide to Grid Lanes, the project formerly known as CSS masonry layout. Structured similarly to CSS-Tricks Guides — WebKit’s words, not ours — it offers a smooth entry point with a mix of simple 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.

Two upgrades for `<dialog>`

Una Kravets highlighted a couple of handy improvements for <dialog>: the new closedby attribute (not yet in Safari) and overscroll-behavior: contain. The thread’s comments add useful tips, including one about scrollbar-gutter: stable. These address common dialog annoyances like layout shifts from disappearing scrollbars and missing light-dismiss behavior.

✅ 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

Chris Coyier has also shared a guide to animating <dialog>s. Many of us know the basics, but the details — especially around @starting-style — are easy to get wrong.

CSS Day 2026 recap

CSS Day took place in Amsterdam on the 11th and 12th of this month. There was no livestream this year, but recordings are expected in late June. In the meantime, CSS Day on Bluesky and the #CSSDay feed have updates from the stage, behind-the-scenes posts, and even some talk slides.