What’s !essential #13: @perform, alpha(), CSS Wordle, and Extra

CSS features, the alpha() perform, Grid Lanes, some issues about

that you just won’t know, CSS Wordle, and extra — that is What’s !essential proper now.

CSS features, expertly defined

Jane Ori expertly defined how CSS features work. @perform will in all probability be the most important CSS characteristic to in all probability change into Baseline this 12 months, so I undoubtedly discovered it a bit intimidating at first. That’s, till I learn Jane’s baby-step-by-baby-step walkthrough, which eases you into it very well.

As well as, Declan Chidlow wrote our @perform documentation, which you would possibly wish to bookmark for fast reference sooner or later.

The `alpha()` perform

Talking of features, the alpha() perform caught me abruptly. Firstly, as a result of I hadn’t heard of it, and secondly, as a result of…why? We are able to already change the alpha channel:

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

/* As a substitute of this */
coloration: oklch(from var(--color) l c h / 0.5);

Properly, this remark from Jason Leo sums it up. Firstly, it signifies that we gained’t have to hard-code coloration values after we have already got CSS variables. For years I’ve circumvented this by solely storing the precise values in CSS variables, however having to wrap them within the coloration perform each single time is actually monotonous:

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

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

Nevertheless it’s higher than this (for my part):

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

/* Pleasant */
coloration: var(--color);

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

alpha() provides the most effective of each worlds:

/* Much less delightless */
coloration: alpha(from var(--color) / 0.5);

Secondly, the colour format is definitely irrelevant on this context, so alpha(from var(--color) / 0.5) communicates the intention extra clearly than oklch(from var(--color) l c h / 0.5) does. It additionally makes the declaration inherently shorter.

Credit score to Adam Argyle for bringing alpha() up.

The Discipline Information to Grid Lanes

WebKit launched the Discipline Information to Grid Lanes (previously referred to as CSS masonry format). In case you’ve ever learn one among our CSS-Methods Guides, it’s much like that (their phrases — simply sayin’). It’s a clean introduction with a wide range 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. — Supply: WebKit.

High quality-of-life upgrades for

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

— the brand new closedby attribute, which isn’t supported by Safari but, and overscroll-behavior: comprise. There are some nuggets within the feedback too, together with a tip about scrollbar-gutter: steady.

✅ Good lil btn scale-down
🙈 Structure change bc the scroll bar disappears
🙈 No mild dismiss

These UX issues can simply be solved with:

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

[image or embed]

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

Additionally, Chris Coyier confirmed us how you can animate

s, which I feel many people know how you can do already, but it surely’s really easy to mess up. I’ve to Google it each time (it’s these bleeping @starting-styles).

What occurred at CSS Day 2026?

CSS Day, the annual CSS neighborhood convention, was held in Amsterdam on the eleventh and twelfth of this month (so two days, technically). Whereas there wasn’t a livestream this 12 months, recordings will change into accessible in late June. Till then, take a look at CSS Day on Bluesky in addition to the #CSSDay Bluesky feed to see what occurred on stage, what occurred behind the scenes, and even the slides from a number of the talks.

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

And no, there weren’t any flamethrowers this 12 months, but it surely wasn’t DOOM-free both (if you realize, you realize).

CSS Wordle

What every week it’s been, particularly with all the things that transpired at CSS Day, however when you’ve got any vitality left I extremely advocate a spherical (or a number of rounds) of Sunkanmi Fafowora’s CSS Wordle, which I’ve actually been obsessive about for the final week.