お忙しい皆さんへ、What’s !important #14では、ブラウザの更新が少ない中でも盛りだくさんのここ数週間を駆け足で紹介します。CSS QuakeからCSS Gap Decorationsまで、見逃せない内容です！

Hyperblam: HTMLで音楽を作る

Heydon Pickeringは、Web Componentsを使ってJavaScriptなしで音楽を作成できる、Web Audio APIのHTML駆動実装であるHyperblamを作成しました。

Hyperblamのウェブサイトスクリーンショット。黒い背景に白いスタイリッシュなロゴ、ナビゲーションリンク、大きく手書き風のテキスト「WRITE MUSIC NOT JAVASCRIPT」、HyperblamがHTMLで音楽を作れることを説明する簡単な導入文が続きます。

CSSっぽくはありませんが、それでもかなりクールです！

CSS Quake

PolyCSSを活用して、Layoutitは1996年の革新的なゲーム「Quake」の移植版であるCSS Quakeを作成しました。

Quakeの最初のプレイ可能シーンのスクリーンショット。

非常に CSSっぽく、最近公開されたCSS DOOMにぴったりの相棒です。

CSS Gap Decorationsへの正面からの探求

Temani Afifはギャップ装飾のスタイル設定方法を紹介しました。ご想像のとおり、「ギャップ」とはflexbox、グリッドレイアウト、または段組みレイアウトでgapが占めるスペースのことです。正直、ギャップ装飾は長らく待たれていましたが、Temaniが示したように、実際にできることはたくさんあります。

CSS random()の実験

PolypaneはCSS random()の実験を紹介しました。どのブラウザもまだサポートしていないこの捉えどころのないCSS関数について疑問をお持ちの方に、Polypaneはボケ効果、落ちる花びら、散らかったポラロイドの山、詩、アニメーションオーロラなどを作成しました。random()でできることを網羅的に示す、かなり深い内容です。

出典: Polypane。

<select>を流動的にする方法

Manuel Matuzovićは、field-sizing（より具体的にはfield-sizing: content）を使って<select>の幅を選択された<option>の幅に設定する方法を紹介しました。これは2週間前にFirefox 152で実装され、Baselineになりました。

もう1つ注意点として、size属性（例: <select size="3">）を使うと、デフォルトで3つの<option>を表示するスクロール可能なリストボックスに変わりますが、field-sizing: contentを使うとすべての<option>を表示するよう上書きされます。

CSSテーマ設定の新基準

Una KravetsはモダンなCSSテーマ設定の仕組みを解説しました。最近このトピックはよく見かけますが、Unaは@property、light-dark()、contrast-color()、そして@container style()について語っています。これらはすべて最近Baselineになった機能なので、これらがどのように連携して動作するのかを見る良い機会です。

その関連で、私はcontrast-color()を初めて探求した後にそのことについて記事を書きました。

なぜウェブサイトは全員に同じように動作する必要がないのか

Bramusはなぜウェブサイトは全員に同じように動作する必要がないのかを解説しました。例えば、異なるプラットフォームには異なる主要な入力方式があり、ユーザーは好みの副次的な入力方式を接続している場合もあるため、プラットフォーム間でウェブサイトを完全に同一にするという考えを捨てる必要があります。

彼はまた、プラットフォームによって動作が異なる必要がある3つの非常に興味深いウェブプラットフォーム機能 — interest invokers、overscroll actions、Document Picture-in-Picture API — についても触れています。

Web Engines HackfestでのMarina Aísa

みんながまだCSS Dayについて話している中（私も含めて）、Web Engines Hackfestがガリシア州ア・コルーニャで始まっていました。これらのイベントで私が好きなのは（もちろんトーク以外に）、参加者がトークについて話したり、会った人々について話したり、町で何をしたかについて話したりすることです。

こちらはMarina Aísaが2日間のイベントを記録したもので、ガリシアの森でのハイキングから始まり、ウェブエンジンとウェブ標準に関する2日間のトーク（壁登りも交えながら）、最後にウェブアクセシビリティの改善にブラウザができることについての議論で締めくくられています：

今週私はガリシアのア・コルーニャで@webengineshackfest.org 👩‍💻に参加し、ウェブエンジンと標準の未来について議論しています。 将来のウェブ開発への潜在的な影響を考慮し、イベントからの個人的なメモを共有することが役立つと思いました。✍️👇

— Marina Aísa (@marinaaisa.com) 14:31 · Jun 16, 2026

来年の個人的な目標：これらのイベントのいずれかに参加すること！

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

はい、安定版ブラウザにとっては退屈な2週間でしたが、本当にエキサイティングなことが近づいています。Quick Hitsに注目してください。そこではこれらのウェブプラットフォームの更新を最初に共有しています（開発版ブラウザからのものも含めて）。実際、Chrome 150は今日中にリリースされる予定です。

2週間後にまたお会いしましょう！