Chrome 154が安定版に、HTTP接続時の確認と新CSSを整理

Chrome 154が安定版に、HTTP接続時の確認と新CSSを整理 ニュース

ニュースの概要

2026年9月22日、Chrome 154が安定版としてリリースされました。同じ日に公開された公式の「New in DevTools – October 2026」では、Chrome 153と154で入ったDevToolsの改善がまとめて紹介されています。この記事によれば、Chromeは月に2回のペースでリリースされるようになり、DevToolsの「What’s New」シリーズも月ごとのまとめ形式に変わりました。Web制作や開発に関わる人にとっては、CSSの新しいプロパティ、JavaScriptやネットワークAPIの追加、HTTPのサイトに対する扱いの変更、DevToolsの新機能と、確認したい項目が一度に増えるリリースです。

何が変わるのか

Chrome 154のリリースノート（developer.chrome.com）で確認できた主な変更は次のとおりです。

  • scroll-marker-groupに「links」「tabs」のモードが加わり、WAI-ARIAのパターンに沿ったフォーカス順とアクセシビリティの動作を制御できる
  • text-decoration-inset：下線・上線・打ち消し線を、テキストの端から内側へ縮める、または外側へ延ばす長さを指定できる新しいCSSプロパティ
  • CSS Typed OMのCSSStyleValueがWorkerでも使えるようになった（仕様とほかのブラウザに合わせるための変更と説明されています）
  • iframeを、埋め込んだ文書の大きさに合わせて可変サイズにできるオプトインの仕組み
  • FontFaceのwidth属性とfont-width記述子が、stretch・font-stretchの別名として使える
  • ポップオーバーとダイアログのライトディスミス（外側クリックで閉じる動作）が、pointerdownとpointerupの組み合わせではなくclickで閉じるようになった。タッチ画面でのスクロール操作や右クリックで、意図せず閉じてしまうのを防ぐ狙い
  • Iterator.includes()：イテレーターが特定の値を返すか調べる新メソッド
  • WebSocketのコンストラクターが、オプション辞書（protocolsと、ローカルの接続先向けのtargetAddressSpace）を受け付ける
  • Fetch APIで、中止の理由（abort reason）がResponseのメソッドとReadableStreamに伝わる
  • Background FetchにCORSの強制とLocal Network Accessの制限が適用される
  • HTTPで接続しようとすると、Chromeがデフォルトでユーザーに確認する（「Ask before HTTP」がデフォルトで有効。管理者は企業向けポリシーHttpsOnlyModeで動作を変えられる）

DevToolsについては、公式のまとめの一部を挙げると、次のような項目があります（個々の機能がChrome 153と154のどちらで入ったかは、記事から確認できませんでした）。Applicationパネルに、広告スクリプトを一覧で確認できる新しい「Ads」のセクションが加わりました（ビューポート内の広告密度・広告数・広告によるCPUとネットワークの使用量といった実験的な指標も表示）。Performanceパネルでは、Insightsでソフトナビゲーションの分析ができるようになり、CDP経由で調整済みのCPU性能の段階を上書きできます。Elementsパネルでは、以前は選択中の要素に当たっていたが今は当たらなくなったスタイルが、無効の印つきで残って表示され（inactive styles）、アドーナー（View Source、Starting Style、Scroll Snap、Reveal）がキーボードで操作できます。Device Modeのプリセットは、モバイル・折りたたみ・タブレットとデスクトップ・スマートディスプレイといった形状別に整理されました。

読者への影響

最も多くの制作者に関係するのは、HTTPサイトへの接続時の確認です。サイトがまだHTTPで公開されている場合、訪問者がHTTPで接続しようとすると、Chromeがデフォルトで確認を行います。どのような画面が出るか、どんな条件で出るかまでは、公式の記載から確認できませんでした。自分や顧客のサイトが全てHTTPSで、リダイレクトも正しく設定されているか、この機会に点検しておく価値があります。

CSSの新機能は、対応ブラウザの状況を確認したうえで、段階的に使うのが基本です。たとえばtext-decoration-insetやscroll-marker-groupの新しいモードは、現時点ではChrome以外での対応が分からないため、使えなくても表示が崩れない形（プログレッシブエンハンスメント）で試すのが安全です。ポップオーバーやダイアログを使っているサイトは、ブラウザが外側クリックで閉じる仕組みがclickベースに変わったので、閉じるタイミングを前提にしたコードがあれば、動作を確認してください。DevToolsの新機能は、バグの調査や性能の確認の効率を上げる道具として、すぐに試せます。

確認しておきたいこと

  • Chromeを154に更新し、自分のサイトがHTTPSで公開され、HTTPからHTTPSへの転送が正しく働いているか確認する
  • ダイアログやポップオーバーを使っている画面で、外側をクリックしたときの閉じる動作を確認する
  • DevToolsのElementsパネルで、無効の印つきで残るスタイルの表示を試し、使い勝手を確かめる
  • 新しいCSSやAPIを使う前に、MDNやcaniuseでほかのブラウザの対応状況を確認する
  • 公式のリリースノートとDevToolsのまとめは、日付とバージョンが付いた一次情報として手元に保存する

筆者の見解

私見では、Chromeが月2回のリリースになったことで、制作の現場には「何を追い、何を追わないか」を決める基準が必要になると考えます。今回なら、訪問者に直接見えるHTTP接続時の確認と、ポップオーバーやダイアログの閉じ方の変化を先に確かめ、text-decoration-insetのような新しいCSSは案件で必要になった時点で対応状況を調べる、という二段構えが現実的だと考えます。DevToolsでは、Adsセクションの広告指標や、以前は当たっていたスタイルを残して見せる表示のように、既存の調査を短くする機能から試すのが効率的だと考えます。ただし、公式のまとめは概要にとどまり、HTTP接続時の確認がどんな条件で出るかまでは書かれていないため、重要な変更ほど実機で動作を確かめてから、顧客への案内に反映すべきだと考えます。

出典

2026年10月6日時点の情報です。

タイトルとURLをコピーしました