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

CSS features, expertly defined

Jane Ori expertly defined how CSS features work. @perform will most likely be the largest CSS function to most likely change into Baseline this 12 months, so I positively 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 need 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 an alternative of this */
coloration: oklch(from var(--color) l c h / 0.5);

Nicely, this remark from Jason Leo sums it up. Firstly, it implies that we gained’t must hard-code coloration values once 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);

But it surely’s higher than this (in my view):

/* Operate 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 perfect 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 often called CSS masonry structure). Should you’ve ever learn one in all our CSS-Tips Guides, it’s just like that (their phrases — simply sayin’). It’s a clean introduction with a wide range of barebones and real-world demos.

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: include. 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 gentle dismiss

These UX issues can simply be solved with:

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

[image or embed]

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

Additionally, Chris Coyier confirmed us the right way to animate

s, which I feel many people know the right way to do already, however it’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 group 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 out there in late June. Till then, try 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 few of the talks.

And no, there weren’t any flamethrowers this 12 months, however it wasn’t DOOM-free both (if you already know, you already know).

CSS Wordle

What every week it’s been, particularly with the whole lot that transpired at CSS Day, however you probably have any power left I extremely suggest a spherical (or a number of rounds) of Sunkanmi Fafowora’s CSS Wordle, which I’ve actually been obsessive about for the final week.

New internet platform options and updates

Till subsequent time!