CSS関数、alpha()関数、Grid Lanes、<dialog>について知っておくべきこと、CSS Wordleなど — 現在話題のWhat’s !importantをお届けします。

CSS関数を専門家が解説

Jane OriがCSS関数の仕組みを専門家目線で解説しています。@functionは今年中にBaseline入りする可能性が非常に高いCSS機能なので、最初は少し難しく感じるかもしれません。しかしJaneのステップバイステップの解説を読むと、とてもわかりやすく理解できます。

また、Declan Chidlowが@functionのドキュメントを書いているので、将来的に素早く参照したい場合にブックマークしておくと便利です。

関数といえば、alpha()関数が意外と知られていませんでした。まずこの関数自体を聞いたことがなかったこと、そしてなぜ必要なのか？という点です。すでにアルファチャンネルを変更する方法はあります：

/* こちら */
color: alpha(from var(--color) / 0.5);

/* 代わりにこちら */
color: oklch(from var(--color) l c h / 0.5);

Jason Leoのこのコメントがその理由を端的にまとめています。まず、CSS変数ですでに色を持っている場合にハードコードする必要がなくなる点です。私は長年、CSS変数に実際の値だけを保存し、使うたびに色関数でラップする方法で回避していましたが、これは本当に面倒です：

/* 値だけ */
--color: 0.65 0.23 230;

/* 柔軟に使用 */
color: oklch(var(--color));
color: oklch(var(--color) / 0.5);

しかし、これは（私見ですが）以下よりはマシです：

/* 関数と値 */
--color: oklch(0.65 0.23 230);

/* 快適 */
color: var(--color);

/* 不快 */
color: oklch(from var(--color) l c h / 0.5);

alpha()は両方の利点を提供します：

/* やや不快が軽減 */
color: alpha(from var(--color) / 0.5);

次に、この文脈では実際の色形式は関係ないため、alpha(from var(--color) / 0.5)の方がoklch(from var(--color) l c h / 0.5)よりも意図が明確に伝わります。また、宣言自体も短くなります。

alpha()を紹介してくれたAdam Argyleに感謝します。

Grid Lanesのフィールドガイド

WebKitがGrid Lanesのフィールドガイド（旧称：CSS masonryレイアウト）を公開しました。当サイトのCSS-Tricks Guidesを読んだことがある方には似た形式（彼らの言葉 — 念のため）です。さまざまなシンプルなデモと実用的なデモを備えたスムーズな入門ガイドです。

Six CSS Grid Lanes demos organized in a three-by-two grid — Photos, Recipes, Newspaper, Mega Menu, Timeline, and Pinboard.
出典: WebKit。

<dialog>の使い勝手向上

Una Kravetsが<dialog>の2つの使い勝手向上について語っています — 新しいclosedby属性（Safariではまだサポートされていません）とoverscroll-behavior: containです。コメント欄にもいくつか有益な情報があり、scrollbar-gutter: stableのヒントも含まれています。

✅ ボタンの少しの縮小 🙈 スクロールバーが消えることによるレイアウト変更 🙈 ライトディスミスなし これらのUXの問題は簡単に解決できます： – closedby="any" – overscroll-behavior: contain

[画像または埋め込み]

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

また、Chris Coyierが<dialog>のアニメーション方法を紹介しています。多くの人がすでに知っている内容かもしれませんが、ミスしやすいポイントです。私は毎回Googleで検索しています（あの厄介な@starting-styleです）。

CSS Day 2026で何が起こったか？

年次CSSコミュニティカンファレンスであるCSS Dayが、今月11日と12日（つまり2日間）にアムステルダムで開催されました。今年はライブ配信はありませんでしたが、6月下旬に録画が公開される予定です。それまではCSS Day on Blueskyや#CSSDay Blueskyフィードで、ステージ上での出来事、舞台裏の様子、一部のトークのスライドを確認できます。

Portrait photos of the event speakers for CSS Day 2026.
出典: CSS Day。

そして、今年は火炎放射器はありませんでしたが、DOOMフリーでもありませんでした（わかる人にはわかるでしょう）。

CSS Wordle

CSS Dayでの出来事など、忙しい一週間でしたが、エネルギーが残っている方はSunkanmi Fafowora氏のCSS Wordleをぜひプレイしてみてください。過去1週間、本当に夢中になっていました。

An online game interface for CSS Wordle featuring a completed puzzle.
出典: CSS-Questions（ご安心ください、これは昨日の答えです）。

新しいウェブプラットフォーム機能とアップデート

次回まで！