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

news What’s !important #13: @function, alpha(), CSS Wordle, and More Daniel Schwarz on Jun 15, 2026 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. 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 al