Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能

Chrome 125で追加された、CSSの新しい機能4つを紹介します。
今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！

New in Chrome 125
Chrome 125 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• はじめに
• CSSによるアンカーのポジション
• CSSのステップ値関数 round(), mod(), rem()
• 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去
• スクロールバーのカラースキーム

はじめに

5/15にリリースされたChrome 125で4つのCSSの新しい機能が追加されました。対象となるChrome 125は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その4つの新しいCSSの機能を紹介します。

CSSによるアンカーのポジション

アンカーのポジションは今まではJavaScriptを使用しないと取得できませんでしたが、CSSだけで絶対位置に配置された要素をページ上の1つ以上の要素（アンカー）に結びつけることができるようになりました。アンカーのポジションは、アンカーがスクロール可能な場合に機能します。

一般的な使用例としては、ツールチップなどのポップオーバーを呼び出した要素の隣に表示したり、セレクトメニューとそのポップオーバーのオプションリストを表示することです。今まではこういったアンカーの位置を決める際はJavaScriptでポップオーバーを動的に表示し、呼び出した要素がスクロールされてもアンカーを維持する必要がありました。

CSSによるアンカーのポジションを使用すると、これらのユースケースをパフォーマンス的かつ宣言的に実装できます。

CSSによるアンカーのポジション機能は、多数のプロパティで構成されています。主要なプロパティは、下記の通りです。

• anchor-name: 要素を他の要素のアンカーとして設定します。
• position-anchor: アンカーの位置決めに使用するデフォルトのアンカーを設定します。
• anchor(): アンカー要素の位置を参照するために使用します。
• inset-area: 相対位置を設定します。

ツールチップに使用すると、下記のように自動でアンカーのポジションを設定できます。

Anchor positioning comes w/a new layout mechanism called inset-area, and its pretty neat!

So I'm building a little anchor tool to help you learn it and anchor things!https://t.co/7kNWFXJvyP

*Browser support is still very limited, only works in Chrome Canary (125+) for now pic.twitter.com/9WxuFo7xNE

— Una (@Una) April 8, 2024

実際の動作は、デモページでご覧ください。

• Anchor position tool

:has()と組み合わせると、さらに面白いことができます。

CSS Anchor Positioning && :has() for a magnetic hover effect

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --preview; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}pic.twitter.com/xBT7UfJ22F

— jhey ▲ (@jh3yy) April 12, 2024

CSSのステップ値関数 round(), mod(), rem()

CSSのステップ値関数 round(), mod(), rem()は、与えられた値を別のステップ値に従って変換します。

round()関数は、選択されたラウンドに基づいてラウンドされた数値を返します。

mod()関数は、JavaScriptの剰余演算子（%）と同様に、第1引数を第2引数で割ったときの剰余を返します。剰余は、1つのオペランドである被除数を2つ目ののオペランドである除数で除算したときに残る値です。これは常に除数の符号を取ります。

rem()関数は、JavaScriptの剰余演算子（%）と同様に、第1引数を第2引数で割ったときの余りを返します。余りは、1つのオペランドである被除数を2つ目ののオペランドである除数で除算したときに残る値です。これは常に除数の符号を取ります。

明度が100%または0のOklabおよびOklchカラーの不連続性を除去

この変更の適用前は、明度が100%のLab, LCH, Oklab, Oklchカラーは他の2つのパラメータに関係なく、すべてホワイトとしてレンダリングされていました。そして、明度が0の場合は、すべてブラックとしてレンダリングされていました。しかし、これら2つはグラデーションに不連続性をもらたらし、デベロッパーにとって予期せぬものでした。

不連続性を削除することで、これらのカラーは人為的にマッピングされなくなり、結果として表示さえっるカラーは近くのカラーと連続し、ディスプレイの色域マッピングに依存するようになります。

スクロールバーのカラースキーム

ページでサポートされているカラースキーム値がnormalまたは指定されておらず、ルート要素のcolor-schemeの計算値がnormalである場合、ブラウザはユーザーの優先カラースキームを使用してビューポートのスクロールバーをユーザーの好みの配色でレンダリングします。ビューポートのスクロールバーは、コンテンツの外側にあるとみなすことができます。従って、デベロッパーが明示的にカラースキームを指定していない場合、ユーザーエージェントはスクロールバーを描画する際にユーザーの好みの配色を尊重する必要があります。

この変更は、デベロッパーがスクロールバーの配色を制御することを妨げるものではありません。デベロッパーがルート要素の配色をしていない場合に限り、ブラウザはユーザーの好みの配色を使用してビューポートの非オーバーレイスクロールバーを描画します。