Web制作者は要チェック！今回は盛りだくさん、Chrome 135で新しく追加された14個のCSSの機能

Post on:2025年4月3日

sponsorsr

Chrome 135で追加された、CSSの新しい機能14個を紹介します。
今回のアップデートで目玉はスクロールオフセットのサポート、レスポンシブな自由形式のシェイプを作成できるshape()関数、インタラクティブなスクロールボタンを作成できる::scroll-button()疑似要素など、Web制作者は要チェックです！

ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。

New in Chrome 135
Chrome 135 beta

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

はじめに
アンカーポジショニングの記憶されたスクロールオフセット
shape()関数
::scroll-button()疑似要素
::scroll-markerと::scroll-marker-group
新しい属性commandとcommandfor
CSSの不活性化
overflowの論理プロパティ
符号関連関数: abs()とsign()
dynamic-range-limitプロパティ
::column疑似要素
ネストされた疑似要素のスタイル設定
訪問済みリンク履歴の分割
progress()関数
safe-area-max-inset-*変数

はじめに

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

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

アンカーポジショニングの記憶されたスクロールオフセット

記憶されたスクロールオフセットのサポートが追加されました。位置決めされた要素にデフォルトのアンカーがあり、一方の端でこのアンカーに固定され、もう一方の端では元の包括ブロックに固定されている場合、要素のサイズを決める際にスクロールオフセットが考慮されます。

つまり、与えられたスクロールオフセットでドキュメントがスクロールされたときに、アンカーで固定された要素のすべての可視スペース（position-area）を使用できます。ドキュメントがスクロールされる度にレイアウト（要素のサイズ変更）、がおこなわれるのを避けるために、ブラウザは常に現在のスクロールオフセットを使用するのではなく、記憶されたスクロールオフセットを使用します。

記憶されたスクロールオフセットは、アンカー再計算ポイントで更新されます。このアンカー再計算ポイントは、位置決めされた要素が最初に表示される位置、または異なる位置オプション（position-try-fallbacks）が選択された場合のいずれかです。

アンカーポジショニング（Anchor Positioning）について詳しくは下記をご覧ください。

CSSのアンカーポジショニング（Anchor Positioning）でマグネットのようにくっつくエフェクトを実装するテクニック

shape()関数

shape()関数を使用すると、clip-pathプロパティでレスポンシブな自由形式のシェイプを使用できます。これによりpath()のコマンドと同等のコマンドを定義できます。ただし、コマンドはレスポンシブな単位（%, vwなど）やカスタムプロパティなどの任意のCSS値を受け入れます。

shape()はSafari 18.4やFirefox 139でサポート予定で、SVGパスをレスポンシブ対応するときの解決方法になります。

See the Pen
CSS shape() by coliss (@coliss)
on CodePen.

::scroll-button()疑似要素

::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。

.scroller {
  overflow: auto;
}

.scroller::scroll-button(inline-start) {
  content: "<";
}

.scroller::scroll-button(inline-end) {
  content: ">";
}

.scroller {

overflow: auto;

}

.scroller::scroll-button(inline-start) {

content: "<";

}

.scroller::scroll-button(inline-end) {

content: ">";

}

これらはフォーカスが可能で、ボタンとして動作します。ボタンがアクティブになると、その方向にある量だけスクロールします。その方向にスクロールができない場合は無効化され（:disabledでスタイルされ）、それ以外の場合は有効化されます（:enabledでスタイルされます）。

セレクタには4つの論理方向（block-start, block-end, inline-start, inline-end）と4つの物理方向（up, down, left, right）のボタンを定義できます。

::scroll-markerと::scroll-marker-group

スクロールコンテナに::scroll-markerと::scroll-marker-groupが追加されました。これらの疑似要素を使用すると、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。

新しい属性commandとcommandfor

Chrome 135では新しく2つの属性、command属性とcomandfor属性が導入され、popovertargetaction属性とpopovertarget属性が強化されて置き換えられます。この2つの新しい属性はボタンに追加できるため、ブラウザはシンプルさとアクセシビリティに関するいくつかの問題に対処することができます。

下記のHTMLは、ボタンとメニューに宣言的な関係を設定し、ブラウザがロジックとアクセシビリティを処理できるようにしたものです。aria-expandedを管理したり、追加のJavaScriptを記述する必要はありません。

<button commandfor="my-menu" command="show-popover">
Open Menu
</button>
<div popover id="my-menu">
  <!-- ... -->
</div>

Open Menu

</button>

</div>

CSSの不活性化

要素を不活性にすると、その要素はフォーカスや編集や選択やページ内検索できるかどうかに影響を与えます。さらに、アクセシビリティツリーに表示されるかどうかにも影響を与えます。

interactivityプロパティは、要素とそのフラットツリーの子孫（テキストランを含む）が不活性かどうかを設定できます。interactivityプロパティで使用できる値は、以下の2つです。

auto
inert

overflowの論理プロパティ

overflowの論理プロパティが使用できるようになりました。

overflow-inline
overflow-block

overflow-inlineとoverflow-blockを使用すると、書き込みモードに対するインラインとブロック方向のオーバーフローを設定できます。overflow-inlineは横書きモードの場合はoverflow-xに対応し、縦書きモードの場合はover-flow-yに対応します。

overflow-inlineのサポートブラウザは、下記の通りです。

overflow-inlineのサポートブラウザ

符号関連関数: abs()とsign()

abs()とsign()の符号関連関数は、引数の符号に関するさまざまな関数計算をします。

abs(): 引数の絶対値を同じ型で返します。
sign(): 数値の符号（正または負）を計算します。

abs()のサポートブラウザは、下記の通りです。

abs()のサポートブラウザ

dynamic-range-limitプロパティ

HDRコンテンツの最大輝度を制限することができます。

dynamic-range-limitのサポートブラウザは、下記の通りです。

dynamic-range-limitのサポートブラウザ

::column疑似要素

::column疑似要素は、生成されたフラグメントに限定された一連のスタイルを適用することを可能にします。たとえｂは、レイアウトに影響を与えないスタイルに限定されるため、レイアウト後に適用できます。

ネストされた疑似要素のスタイル設定

他の疑似要素にネスト（入れ子）された疑似要素のスタイル設定が有効になりました。現在のところ、::before::makerと::after::makerの2つがサポートされており、将来的にはcolumn::scroll-makerもサポートされる予定です。

訪問済みリンク履歴の分割

ユーザーの閲覧履歴の漏えいを防ぐため、アンカー要素はトップレベルのサイトとフレームのオリジンから以前にクリックされたことがある場合にのみ:visitedとしてスタイルされます。このサイトとフレームで過去にクリックされたことがあるリンクのみスタイルを設定することで、訪問済みリンク（:visited）のスタイル設定情報を取得するために開発されてきた多くのサイドチャネル攻撃は、最早サイトに対してユーザーに関する新しい情報を提供しないため、時代遅れになります。

ただし、自己リンクには例外があり、サイト自身のページへのリンクはこのトップレベルのサイトとフレームのオリジンで以前にクリックされていなくても:visitedとしてスタイル設定できます。この例外はトップレベルとフレームと同じオリジンのサブフレームでのみ有効です。サイトはユーザーがどのサブページにアクセスしたかを既に知っているため、プライバシーの利点は依然として得られ、新しい情報は公開されません。これはユーザーエクスペリエンスを向上させるコミュニティからの要求による例外です。