今日已更新 80 条资讯 | 累计 20052 条内容
关于我们
开发者

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

Daniel Schwarz 2026年06月15日 21:15 3 次阅读 来源：CSS-Tricks

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. What’s !important #13: @function, alpha(), CSS Wordle, and More originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

CSS functions, the alpha() function, Grid Lanes, some things about 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 also makes the declaration inherently shorter. Credit to Adam Argyle for bringing alpha() up . The Field Guide to
本文内容来源于互联网，版权归原作者所有
查看原文
# Articles # news

相关文章

today ran my own tool over the whole django repo it indexed it in 2.5 minutes and generated a whole graph for each function i searched, its always awesome to look at something you build on your own works. T-T

07-15

DEA to Temporarily Schedule 7-Oh and Related Substances to Protect Public Safety

07-15

JBL’s Flip 7 speaker is small, versatile, and 40 percent off

07-15

People don't buy calm: revisiting Weiser's "The Computer for the 21st Century"

07-15

FreeBSD Laptop Support Continues Improving with WiFi, GPU and Audio Driver Work

07-15

My Midlife Crisis Corolla Is Fast, Furious, and Modded

07-15