ウェブブラウザ「Google Chrome」の最新安定版となるバージョン154がリリースされました。iframeを埋め込んだコンテンツの高さに合わせてサイズ調整する機能や、スクロールマーカーをリンクまたはタブとして扱う機能などが追加されています。また、安全ではないHTTP接続を開く際にユーザーへ確認する設定がデフォルトになりました。
New in Chrome 154 | Blog | Chrome for Developers
https://developer.chrome.com/blog/new-in-chrome-154
Chrome 154 | Release notes | Chrome for Developers
https://developer.chrome.com/release-notes/154
◆iframeを中身に合わせて自動でサイズ調整可能に
Chrome 154ではウェブページ内に別のHTML文書などを埋め込む「iframe」について、埋め込まれたコンテンツの大きさに合わせて自動的にサイズ調整できるようになりました。
iframe内のコンテンツ量に合わせて高さを変化させたい場合、これまではJavaScriptで埋め込み先の高さを測定し、「postMessage()」などを使って親ページへサイズを伝えた上でiframeの高さを変更するといった処理が必要でした。
Chrome 154では親ページ側のiframeに以下のようなCSSを指定できます。
さらに、埋め込まれる側のHTMLに以下のmeta要素を記述すればiframeの高さを埋め込み文書のレイアウトに合わせることが可能になります。JavaScriptで高さを逐次計算する必要がなくなるため、ブログパーツやコメント欄、外部ウィジェットなど、内容によって高さが変わるコンテンツを埋め込む際の実装を簡素化できます。
◆スクロールマーカーを「リンク」または「タブ」として扱えるように
横スクロールするカルーセルなどにおいて現在位置を示したり目的の項目へ移動したりするための「スクロールマーカー」を作成する機能であるCSSの「scroll-marker-group」がChrome 154で拡張され、「links」と「tabs」という2種類のモードを指定できるようになりました。
「links」はデフォルトの動作で、スクロールマーカーのグループがナビゲーション、個々のマーカーがリンクとして扱われます。Tabキーを押すと各マーカーへ順番にフォーカスでき、マーカーを選択すると対象のコンテンツへフォーカスが移動します。
一方の「tabs」を指定すると、マーカーのグループはタブリスト、各マーカーはタブ、対応するコンテンツはタブパネルとして扱われます。フォーカス対象になるのは現在選択されているマーカーのみで、マーカー間は矢印キーで移動可能です。また、選択されていないタブのコンテンツはアクセシビリティツリーから除外されます。
見た目だけでなくWAI-ARIAに沿ったアクセシビリティ上の意味付けも切り替わるため、カルーセルやタブUIをCSS主体で実装する際に、キーボード操作やスクリーンリーダーへの対応を行いやすくなります。
◆HTTPサイトへの接続時に確認を表示
Chrome 154では、安全ではない「http://」で始まるウェブサイトへ接続する際、ユーザーに確認する「Ask before HTTP」がデフォルトになりました。HTTPSではブラウザとウェブサイト間の通信が暗号化されますが、HTTP通信は暗号化されないため、通信経路上で内容を盗み見られたり改ざんされたりする危険性があります。
今回の変更によって、HTTPサイトを開こうとした場合にはChromeが確認を行うようになり、安全ではない接続へ意図せずアクセスしてしまうリスクを抑えられます。企業環境では「HttpsOnlyMode」ポリシーを使ってこの動作を管理することも可能です。
◆その他の更新点
・「CSSStyleValue」「CSSKeywordValue」「CSSNumericValue」「CSSUnitValue」「CSSUnparsedValue」などCSS Typed OMのコンストラクタをWorkerから利用可能になりました。
・「FontFace.width」と「@font-faceのfont-widthディスクリプタ」が追加され、それぞれ「stretch」「font-stretch」の別名として使用可能になりました。
・ポップオーバーやダイアログの外側をクリックして閉じる「Light dismiss」の判定が改善され、タッチ画面でのスクロール操作や右クリックでは意図せず閉じないようになりました。
・JavaScriptに「Iterator.prototype.includes()」が追加され、イテレータが指定した値を生成するかどうかを「Array.prototype.includes()」と似た方法で確認可能になりました。
・WebSocketのコンストラクタの第2引数に「WebSocketInit」オプションを渡せるようになりました。「protocols」の指定に加え、将来新たなオプションを追加できる形式になっています。
・WebSocketに「targetAddressSpace」オプションが追加され、接続先を「local」または「loopback」アドレス空間として扱うよう指定可能になりました。ユーザーがローカルネットワークへのアクセスを許可している場合、HTTPSに対応していないローカルサーバーへの接続などに利用できます。
・AbortControllerでfetchを中断した際に指定した中断理由が、fetchのPromiseだけでなくResponseやReadableStream側にも伝わるようになりました。
・Background Fetch APIにCORSが適用されるようになりました。
・Background Fetchでローカルまたはループバックアドレスへアクセスする際に、Local Network Accessの権限が必要になりました。
・Secure Payment Confirmationで「locale」に指定された言語タグが決済確認ダイアログの言語と一致しない場合、「NotSupportedError」が返されるようになりました。
・ChromeOSの許可リストに登録されたIsolated Web Apps向けに「Window Shape API」が追加されました。長方形ではないウィンドウや、分離した複数領域を持つウィンドウ形状を定義でき、ウィジェットやフローティングパネルなどの作成に利用できます。
なお、Chrome 154のリリースノートにはCSSの「text-decoration-inset」プロパティに対応したと書かれていますが、ChromeStatusによるとChrome 156にリリースが延期されています。
◆オリジントライアル
Chrome 154では「Private Verification Tokens(PVT)」のオリジントライアルが実施されています。
Private Verification Tokensは、通常のブラウジング中にユーザーが確立した信頼情報を、シークレットウィンドウへプライバシーに配慮した形で持ち込むための仕組み。通常のブラウジングセッション中にウェブサイトがトークンを発行し、シークレットブラウジング時にそのトークンを利用することで、CAPTCHAなどによる追加認証の頻度を減らす用途などが想定されています。
次期安定版となる「Google Chrome 155」は現地時間の2026年10月6日(火)にリリース予定です。
ソース元はコチラ
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。