ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるように、Chrome 144で新しく追加された8個のCSSの機能

サイト構築 -制作

Post on:2026年1月15日

sponsorsr

1/13にアップデートされたChrome 144に追加された、CSSとUIに関する新しい機能を紹介します。

今回のアップデートで注目すべきは、ページ内検索の検索結果をスタイルする::search-text疑似要素、スクロールの方向を探知する@scroll-stateなど、Web制作者は要チェックです！

また、ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるようになりました！

New in Chrome 144
Chrome 144 beta

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

はじめに
1つのタブ内を分割して2つのWebページを表示
CSSのアンカーポジショニングとトランスフォーム
ページ内検索でハイライトする疑似要素
アンカーポジショニングにaria-detailsを使用しない
スクロールした方向を記憶するクエリ@scroll-state
キーボード操作によるスクロールはoverscroll-behaviorを尊重
スクロール不可のスクロールコンテナでもoverscroll-behaviorを尊重
ツリースコープを無視したコンテナ名の一致処理
SVG2 CSS カスケード

はじめに

1/13にリリースされたChrome 144で8つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 144は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その8つの新しいCSSとUIに関する機能を紹介します。

1つのタブ内を分割して2つのWebページを表示

ついにChromeでも分割表示がネイティブにできるようになりました。

1つのタブでマルチタスクを行えるようになり、2つのサイトを並べて表示するために新しくウインドウを開く必要はなりなります。ChatGPTを開きながら作業するときとかに便利ですね。

Chromeで分割表示をするのは、簡単です。
タブを右クリックして「新しい分割ビューにタブを追加」を選択するだけです。

タブを右クリック

分割表示の操作はウインドウの下部、タブの右クリックからもできます。さらにはリンクの右クリックから「分割ビューでリンクを開く」などもできます。

分割表示の操作

CSSのアンカーポジショニングとトランスフォーム

CSSのアンカーポジショニングが設定された要素がトランスフォームを適用されたアンカー（またはトランスフォームを適用された要素に含まれている場合）に紐付けられている場合、ブラウザはトランスフォームされた後のアンカーの境界ボックスを基準にしてanchor()関数とanchor-size()関数を計算します。

ページ内検索でハイライトする疑似要素

ページ内検索の検索結果のスタイルを::search-text疑似要素として公開します。これは選択範囲やスペルミス表示に使用されるのと同様にテキストをハイライトする疑似要素です。::search-text疑似要素では前景と背景の色を変更したり、テキスト装飾を与えることができます。これはブラウザのデフォルト設定がページの色と充分なコントラストがない場合に役立ちます。

アンカーポジショニングにaria-detailsを使用しない

ポップオーバー以外の用途でアンカーポジショニングにaria-detailsを使用するのは間違いです。ポップオーバーなどのセマンティック要素にはaria-detailsが作成されますが、その他の用途ではセマンティックではない可能性が高いため、Chromeではセマンティックではない使用例ではこれらの関係を構築しません。

スクロールした方向を記憶するクエリ@scroll-state

スクロールの方向を探知する@scroll-stateをサポートしました。たとえば、コンテナの子要素をスクロールの方向に基づいてスタイルできます。

.scrolling-up {
  translate: 80px 0;
  transition: 0.4s translate;
}

html {
  container-type: scroll-state;
}

@container scroll-state(scrolled: top) {
  .scrolling-up { translate: 0 0; }
}

.scrolling-up {

translate: 80px 0;

transition: 0.4s translate;

}

html {

container-type: scroll-state;

}

@container scroll-state(scrolled: top) {

.scrolling-up { translate: 0 0; }

}

使い方など、詳しくは下記をご覧ください。

CSSの新しいクエリscroll-stateを使用すると、ページの途中で上にスクロールした際にヘッダだけを再度表示が簡単に実装できるようになります

キーボード操作によるスクロールはoverscroll-behaviorを尊重

overscroll-behaviorをauto以外の値にした場合、ブラウザはスクロールチェーンを実行すべきではありません。Chromeはマウスやタッチ操作によるスクロールではこれを尊重していますが、キーボード操作によるスクロールでは無視していました。今回の変更により、キーボード操作によるスクロールでもoverscroll-behaviorの動作が尊重されるようになりました。

スクロール不可のスクロールコンテナでもoverscroll-behaviorを尊重

overscroll-behaviorは要素にオーバーフローするコンテンツがあるか、ユーザーがスクロール可能であるかに関わらず、すべてのスクロール要素に適用されます。overflow: hidden;の背景やoverflow: auto;の要素においてoverscroll-behaviorを使用すると、オーバーフローの有無を考慮せずにスクロールチェーンを防ぐことができます。

ツリースコープを無視したコンテナ名の一致処理

ブラウザは、@containerクエリのコンテナ名の一致処理においてツリースコープを無視します。従来は@containerクエリのコンテナ名の一致処理ではツリースコープの名前または参照が使用されていました。そのため、@containerルールとコンテナ型プロパティが異なるツリーに定義されている場合や、起源ツリーが異なる場合では同じ名前でも一致しませんでした。

今回の変更により、@containerルールやcontainer-type宣言の起源にかかわらず、コンテナ名の値が一致するようになりました。