「Google Chrome 149」安定版リリース、CSSのgapのスタイルを指定できる「CSS gap decorations」に対応

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン149がリリースされました。グリッドやフレックスボックスなどのレイアウトの「gap」にけい線や装飾を追加できる「CSS gap decorations」に対応したほか、WebSocket接続中のページをバックフォワードキャッシュ(bfcache)に保存できるようになるなどの変更が加えられています。

New in Chrome 149  |  Blog  |  Chrome for Developers
https://developer.chrome.com/blog/new-in-chrome-149

◆CSSの「gap」にけい線を描画できるようになる
Chrome 149では、CSSの「CSS gap decorations」が導入されました。これはCSS GridやFlexbox、マルチカラムレイアウトなどで使われる「gap」にけい線や装飾を追加できる機能です。

従来、グリッドやフレックスボックスのアイテム間に線を入れるには各要素にborderを指定したり、疑似要素を配置したり、背景画像や複雑なCSSで疑似的に線を表現したりする必要がありました。Chrome 149以降は「column-rule」や「row-rule」を使うことで、レイアウトの隙間そのものに装飾を加えられます。

例えば、Flexboxのgapに線を入れる場合は以下のように記述できます。以下では2px幅、「#d4d0c8」色の点線と実線を指定しています。

CSS gap decorationsに対応したブラウザで見ると以下の通り。最初のgapに点線、2つ目のgapに実線で2px幅、「#d4d0c8」色の線が引かれていることが分かります。

なお、非対応のブラウザでは以下の通り単純に設定が無視されるとのこと。

また、「column-rule-inset」や「row-rule-inset」を使って線の端を内側に縮めたり、「column-rule-visibility-items」や「row-rule-visibility-items」を使って隣接するアイテム間にだけ線を表示したりすることも可能です。線の幅、色、insetはアニメーションにも対応しているため、ホバー時に装飾を変化させるといった表現も可能になります。

◆WebSocket接続中のページもbfcacheに保存可能に
Chrome 149では、アクティブなWebSocket接続があるページでもバックフォワードキャッシュ、通称「bfcache」に保存できるようになりました。

bfcacheはユーザーが「戻る」「進む」操作をした際にページをメモリから即座に復元するための仕組み。これまではWebSocket接続がアクティブなページはbfcacheの対象外となり、ユーザーがページから離れると破棄されていました。

Chrome 149では、ページがbfcacheに入るタイミングでWebSocket接続を先に閉じることで、ページ自体をメモリ内に保存し、戻る・進む操作時に高速に復元できるようになっています。

◆Intl.Localeで言語バリアントを取得可能に
JavaScriptの「Intl.Locale」に「variants」プロパティが追加されました。これにより、Unicodeロケール識別子に含まれる言語バリアントを取得・設定できるようになります。

例えば、以下のようなコードでロケール「sl-rozaj-biske」に含まれるバリアント「rozaj-biske」を取得できます。

const locale = new Intl.Locale("sl-rozaj-biske");
console.log(locale.variants); // "rozaj-biske"

この機能はFirefoxやSafariでは既に実装済み。Chrome 149でChromeにも追加され、主要ブラウザで対応が出そろいました。

◆テキストの省略表示が操作時に一時解除されるように
CSSで「text-overflow: ellipsis」が指定されているテキストに対して、ユーザーが編集やカーソル移動などの操作を行った場合、一時的に省略記号表示からクリップ表示へ切り替わるようになりました。

これにより、省略されて隠れていたテキストの末尾部分を、ユーザーが確認・操作しやすくなります。この変更は編集可能な要素だけでなく、編集不可の要素にも適用されます。

◆shape-outsideで指定できる図形が拡充
CSSの「shape-outside」プロパティで、「path()」「shape()」「rect()」「xywh()」といった図形関数を利用できるようになりました。

shape-outsideは、画像や図形の周囲にテキストを回り込ませる際に使われるプロパティです。Chrome 149では、より柔軟な形状を指定できるようになったほか、図形のアニメーションにも対応しやすくなっています。

◆その他の更新点
・table要素のUAスタイルシートからHTML仕様には存在しない「border-color: gray」指定が削除され、borderの色がcurrentColorを基準に決まるようになりました。
・「:hover」「:active」「:focus-within」の親要素へのマッチングが、top layer要素の境界で止まるように変更されました。
・CSSキーワード「AccentColor」「AccentColorText」および「accent-color: auto」から取得できるシステムアクセントカラーの範囲が、ウェブアプリと初期プロファイルコンテキスト内に制限されました。
・「image-rendering: crisp-edges」がサポートされ、画像を拡大した際に輪郭を保った表示が可能になりました。
・SVGの「pathLength」属性に対応するCSSプロパティ「path-length」が追加されました。
・Payment Request APIで、支払いハンドラーが「ユーザーによるキャンセル」と「支払いアプリ内部エラー」を区別して返せるようになりました。
・Windowsのタッチキーボードで、入力欄に「autocorrect="off"」が指定されている場合に自動修正を抑制できるようになりました。
・Async Clipboard APIで、実際のクリップボードデータ取得を「getType()」呼び出し時まで遅らせる「Selective Clipboard Format Read」が導入されました。

◆オリジントライアル
Chrome 149では、以下の新しいオリジントライアルが追加されています。

・Gamepad event-driven input API
・Permissions Policy: focus-without-user-activation
・WebAssembly custom descriptors

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