2025年09月03日 08時25分ソフトウェア

「Google Chrome 140」安定版リリース、CSSに多数の機能追加あり

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン140がリリースされました。CSSに対する機能追加や仕様変更が多数見られます。

Chrome 140 | Release notes | Chrome for Developers
https://developer.chrome.com/release-notes/140?hl=ja

◆CSS：contentプロパティの代替テキストにcounter()とcounters()を使用可能に
contentプロパティの代替テキストでcounter()関数とcounters()関数を使用できるようになりました。これらはいずれも引数に指定された「名前付きカウンター」の値を返す機能であり、counter()は単一の値を返すケースに、counters()は要素がネストしているケースに対応します。

.simple-list li::before {
  counter-increment: count;
  content: "第" counter(count, decimal) "章 ";
}

.duplex-list li::before {
  counter-increment: index;
  content: "第" counters(index, ".", decimal) "章 ";
}

上記の例では、前者はネストしない<li>要素への適用を前提としており、リスト項目の先頭に「第1章」「第2章」といった文字列を追加します。また後者はネストする<li>要素への適用を前提とし、リスト項目の先頭に「第1.1章」「第1.2章」といった文字列を追加します。このように、要素の構造をより理解しやすい文字列を自動生成して付加することによって、アクセシビリティを向上させることを意図しています。

◆CSS：scroll-target-groupプロパティ
scroll-target-groupプロパティはその要素がスクロールマーカーのグループコンテナであるかどうかを指定できます。指定可能な値は以下の2つです。

・none：要素はスクロールマーカーのグループコンテナを確立しない
・auto：要素は、最も近い祖先スクロールマーカーのグループコンテナであるすべてのスクロールマーカー要素を含むスクロールマーカーグループを形成するスクロールマーカーのグループコンテナを確立する

ここで、「スクロールマーカーのグループコンテナを確立する」とは、そのようなコンテナ内のフラグメント識別子を持つアンカーHTML要素が::scroll-marker疑似要素相当になることを指します。そして、スクロールターゲットが現在ビュー内にあるアンカー要素は、:target-current疑似クラスを使用してスタイル設定できるようになります。疑似要素には様々な制約があり、例えば::scroll-markerを指定することで「スクロールターゲットをビューに表示する」機能は使用できるものの、「現在のスクロールマーカーを追跡する」といった機能は利用できません。しかしながら、scroll-target-groupプロパティを使用することでHTMLアンカー要素を疑似要素を使わずに「スクロールマーカー」として扱うことができるため、こうした制約を回避しながら:target-current疑似クラスを利用してアンカー要素のスタイルを設定するといったことが可能となります。scroll-target-groupプロパティの用途としては例えばカルーセルのような仕組みを容易に作成するといったものが想定されています。

◆CSS：型付き算術演算
型付き算術演算により、例えば「calc(10em / 1px)」や「calc(20% / 0.5em * 1px)」といった式をCSSで記述可能になります。より具体的な使い方としては、型付きの値を型なしの値に変換して数値を受け入れるプロパティに指定したり、ピクセルから度数へキャストして型なしの値を型付きの値で乗算したりもできるようになります。これまでは、単位情報を取り除くためには「tan(atan2(length_value, 1px))」といったトリックを使用する必要がありましたが、型付き算術演算により、「(length_value / 1px)」とするだけで単位のない値を取得できるようになりました。

◆CSS：ビュー遷移疑似要素がより多くのアニメーション系プロパティを継承
ビュー遷移の疑似ツリーが、animation-delayと、それ以外にも以下のアニメーション系プロパティを継承するようになりました。
・animation-timing-function
・animation-iteration-count
・animation-direction
・animation-play-state

CSS：@font-faceルールでfont-variation-settings記述子をサポート
@font-faceのfont-variation-settings記述子を使用すると、CSSで個々の要素に対してfont-variation-settingsプロパティを設定するのと同様に、フォントの太さ・幅・傾斜などの軸を調整できるようになります。

@font-face {
  font-family: "OpenTypeFont";
  src: url("open_type_font.woff2") format("woff2");
  font-variation-settings:
    "wght" 400,
    "wdth" 300;
}

◆ネストされたビューの切り替えが有効に
ビューの切り替えにより、フラットな疑似要素ツリーではなくネストされた疑似要素ツリーを生成できるようになりました。これにより、ビューの切り替えが元の要素や視覚的な意図に沿って表示されるようになるので、例えばクリッピング・ネストされた3D変換・不透明度・マスキング・フィルタなどといった効果を適切に適用できるようになることが期待できます。

◆ビューポートのoverscroll-behaviorの伝播元をルートからに変更
これまで、overscroll-behaviorは本文(<body>)から伝播していました。しかしながら、CSSワーキンググループによりこの挙動を廃止する決定が行われ、代わりにルート(<html>)から伝播することとされました。Chromeは長らくルートからではなく<body>からoverscroll-behaviorを伝播させる挙動をしていましたが、この変更により仕様に準拠するようになり、他のブラウザの挙動と等しくなります

◆ScrollIntoViewコンテナオプション
ScrollIntoViewコンテナオプションを使用することにより、デベロッパーは最も近い祖先スクロールコンテナのみをスクロールするscrollIntoViewオペレーションを実行できるようになります。例えば下記のスニペットを使用すると、target要素のスクロールコンテナのみをスクロールしてtargetをビューに表示させつつ、すべてのスクロールコンテナをビューポートまでスクロールすることはありません。

target.scrollIntoView({container: 'nearest'});

◆highlightsFromPoint API
highlightsFromPoint APIを使用すると、デベロッパーはカスタムハイライトを操作できるようになります。このAPIはドキュメント内の特定の時点に存在するカスタムハイライトを示すオブジェクトの配列を取得でき、複数のハイライトが重複したりシャドーDOM内にハイライトが存在するような複雑なドキュメントにおいて、ハイライトを適切に操作・管理するのに役立ちます。

const section = document.querySelector("section");
const pElem = document.querySelector(".highlightable-text");
const textNode = pElem.firstChild;
let highlightCount = 1;

pElem.addEventListener("dblclick", (event) => {
  const highlights = CSS.highlights.highlightsFromPoint(
    event.clientX,
    event.clientY,
  );

  section.innerHTML = "";
  for (highlight of highlights) {
    const range = highlight.ranges[0];
    const textSelection = range.toString();
    section.innerHTML += `<article>${textSelection}</article>`;
  }
});

◆ToggleEventにsource属性を追加
ToggleEventをトリガーした要素を把握するため、source属性が追加されます。例えば、ユーザーが popovertarget属性またはcommandfor属性が設定された<button>要素をクリックしてポップオーバーを開いた場合、ポップオーバーで発生したToggleEventのsource属性には呼び出し元の<button>要素への参照が設定されます。これを用いて、例えば押されたボタンに応じて異なるコードを実行するといった実装が簡単に実現できます。

const yesBtn = document.getElementById("yes");
const noBtn = document.getElementById("no");
const popover = document.getElementById("popover");
const output = document.getElementById("output");

if (yesBtn.command === undefined) {
  output.textContent = "Popover control command attribute not supported.";
} else {
  popover.addEventListener("toggle", (event) => {
    if (event.source === undefined) {
      output.textContent = "ToggleEvent.source not supported.";
    } else if (event.source === yesBtn) {
      output.textContent = "Cookie set!";
    } else if (event.source === noBtn) {
      output.textContent = "No cookie set.";
    }
  });
}

◆JavaScript：ビュー遷移完了のPromiseのタイミングを変更
これまで、ビュー遷移が終了する際にPromiseが返されるタイミングはレンダリングライフサイクルのステップ内にありました。そのため、Promiseを受けたコードが実行されるタイミングは、ビュー遷移を削除するビジュアルフレームが生成された後になっていました。これにより、アニメーションの最後にちらつきが発生する可能性がありました。今回の変更に伴い、ビュー遷移のクリーンアップ手順が全ての処理が完了した後に非同期で実行されるようになりました。これにより、ちらつきの発生が解消することが期待されます。

◆JavaScript：Uint8Arrayからbase64や16進数への変換をサポート
Base64は、任意のバイナリデータをASCIIとして表現する一般的な方法ですが、JavaScriptにはバイナリデータを扱うためのUint8Arrayクラスが用意されているものの、Uint8Arrayのデータをbase64としてエンコードしたり、base64データを受け取って対応するUint8Arrayを生成したりする組み込みメカニズムは用意されていませんでした。今回の更新から、これらをサポートするメソッドが追加されます。

・Uint8Array.prototype.setFromBase64()：base64エンコードされた文字列から取得したバイト列をUint8Arrayオブジェクトに格納
・Uint8Array.prototype.setFromHex()：16進エンコードされた文字列から取得取得したバイト列をUint8Arrayオブジェクトに格納
・Uint8Array.prototype.toBase64()：Uint8Arrayオブジェクトのデータに基づいて、base64エンコードされた文字列を返す
・Uint8Array.prototype.toHex()：Uint8Arrayオブジェクトのデータに基づいて、16進エンコードされた文字列を返す

const uint8Array = new Uint8Array(16);
const result = uint8Array.setFromBase64("PGI+ TURO PC9i Pg==");
console.log(result);
// { read: 19, written: 10 }
console.log(uint8Array);
// Uint8Array(16) [60, 98, 62, 77, 68, 78, 60, 47, 98, 62, 0, 0, 0, 0, 0, 0]

◆ウェブAPI：ReadableStreamBYOBReader minオプション
既存のReadableStreamBYOBReader.read()メソッドにminオプションが追加されます。このメソッドは、データを読み取るArrayBufferViewを受け入れるものの、読み取りが解決される前に書き込まれる要素の数を保証していません。そこで、minオプションを指定することにより、ストリームが少なくともその数の要素を使用可能になるまで、読み取りを解決する前に待機するように要求できます。これにより、ビューが保持できる要素よりも少ない要素で読み取りが解決される可能性がある、現在の動作が改善されます。

◆HTTP Cookieのプレフィックス
状況によっては、サーバーサイドで設定されたCookieとクライアントによって設定されたCookieを区別することが重要になる場合があります。例えば、通常サーバーによって設定されるはずのCookieが、XSSエクスプロイトなどの予期しないコードにより、クライアントで設定される可能性が考えられます。今回の更新では、Cookieがいずれによって設定されたのかを識別するシグナルが追加されました。具体的には、__Httpおよび__HostHttpプレフィックスを定義し、サーバーが設定したCookie名にプレフィックスを付けることで、そのCookieがスクリプトによってクライアント側で設定されたものではないことを認識できるようにします。

◆ローカルネットワークへのアクセス制限
ユーザーのローカルネットワークに対するリクエストの送信機能が制限され、このようなリクエストが発生した場合に権限を求めるプロンプトが表示されるようになります。対象となるのはパブリックウェブサイトからローカルIPアドレスやループバックへのリクエスト、およびローカルウェブサイト(イントラネットなど)からループバックへのリクエストです。この変更の目的は、ルーターなどのローカルネットワークデバイスに対するクロスサイトリクエストフォージェリ(CSRF)攻撃のリスクを軽減し、外部サイトにこれらのリクエストが悪用されることによりローカルネットワークのフィンガープリントを奪取される危険性を排除することにあります。

◆IWA：Controlled Frame APIの導入
独立したウェブアプリ(IWA)でのみ使用できるControlled Frame APIが追加されます。他のプラットフォームの同様の名前のAPIと同様に、Controlled Frameでは、<iframe>に埋め込むことができないサードパーティーのコンテンツを含め、すべてのコンテンツを埋め込むことが可能となります。また、APIメソッドとイベントのコレクションを使用して埋め込みコンテンツを制御することもできます。

controlled-frame/test_app at main · WICG/controlled-frame · GitHub
https://github.com/WICG/controlled-frame/tree/main/test_app

◆非推奨化：特定の要素内にある<h1>の特例フォントサイズルール
HTMLの仕様には、<article>・<aside>・<nav>・<section>といった要素内に含まれる<h1>タグに関する特別な規則のリストが含まれていました。しかしながら、これらの特別ルールがあることによりユーザー補助の観点からの問題を引き起こす懸念がありました。例えば、上記の要素に含まれる<h1>のフォントサイズを視覚的に小さくしてあたかも<h2>であるかのように見せかけるといった問題があり、当然ながらこういった視覚的なレトリックはユーザー補助ツリーに反映することはありません。そういった問題に対処するため、今回の更新からはこのようなフォントサイズルールの特例が非推奨となります。

◆非推奨化：プリフェッチと事前レンダリングからのPurpose: prefetchヘッダーの送信を停止
プリフェッチと事前レンダリングでSec-Purposeヘッダーが使用されるようになったため、Purpose: prefetchヘッダーは削除されることとなりました。

◆その他の更新
・CSS：caret-animationプロパティ
・SharedWorkerスクリプトがblobスクリプトURLのコントローラを継承可能に
・ServiceWorkerStaticRouterTimingInfoを追加
・Get Installed Related Apps API(navigator.getInstalledRelatedApps)のデスクトップ版サポート

◆オリジントライアル
・JavaScript：clipboardchangeイベントの追加
・Crash Reporting：Key-Value APIの導入
・PWA：着信通知の有効化
・SharedWorker：Androidで有効化

また、Google Chrome 140には多数のセキュリティバグフィックスが含まれています。

なお、次期安定版の「Google Chrome 141」は現地時間の2025年9月30日(火)にリリース予定です。

この記事のタイトルとURLをコピーする

・関連コンテンツ

2025年09月03日 08時25分00秒 in AI, ソフトウェア, Posted by log1c_sh

You can read the machine translated English article 'Google Chrome 140' stable release, many….