Web制作者は要チェック！コンテナクエリの進化、動画の遅延読み込みなど、Chrome 148で新しく追加されたCSSの機能

Post on:2026年5月12日

sponsorsr

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

今回のアップデートで注目すべきは、コンテナクエリをcontainer-typeを設定しなくてもコンテナ名のみで機能するようになったこと、video要素やaudio要素も遅延読み込みに対応したこと、ユーザー操作によるテキストのオーバーフローの切り取りなど、Web制作者は要チェックです！

また、新しくPrompt APIが搭載され、ChromeにGemini Nanoが組み込まれました。右上のボタンが邪魔という場合は、右クリックで非表示にできます。

New in Chrome 148
Chrome 148 beta

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

はじめに
CSSにおけるコンテナ名のみによるクエリ
ユーザー操作によるテキストのオーバーフローの切り取り
dragEnter、dragLeave、dragOverイベントに対してdropEffectを正しく設定する
video要素とaudio要素の遅延読み込み
at-rule()関数
revert-ruleキーワード
text-decoration-skip-ink: all;

はじめに

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

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

CSSにおけるコンテナ名のみによるクエリ

コンテナクエリを使用する際に、要素にcontainer-typeを設定しなくても、container-nameに基づいてCSSコンテナをクエリできるようになります。

<div id="container">
  <div><input></div>
</div>

</div>

これまではcontainer-type: inline-size;が必要でしたが、下記のようにcontainer-name: --foo;を設定するだけでコンテナクエリを使用できます。

#container {
  container-name: --foo;
}
@container --foo {
  input { background-color: green; }
}

#container {

container-name: --foo;

}

@container --foo {

input { background-color: green; }

}

container-nameによるコンテナクエリはデベロッパーツールでもサポートされ、スタイルプロパティセクションで正しくレンダリングされ、リンクできるようになりました。

コンテナクエリについて詳しくは、下記をご覧ください。

CSS コンテナクエリ（@container）の便利な使い方を解説

ユーザー操作によるテキストのオーバーフローの切り取り

ユーザーがtext-overflow: ellipsis;が設定されているテキストを操作（編集やキャレットナビゲーションなど）すると、テキストは一時的に省略記号表示から切り取り表示に替わります。これにより、ユーザーは非表示になっているオーバーフローコンテンツを表示し、操作できるようになります。

この機能は、編集可能な要素と編集不可能な要素のすべてに適用されます。すでにtextareaやinputなどのフォーム要素ではこの動作がサポートされています。

dragEnter、dragLeave、dragOverイベントに対してdropEffectを正しく設定する

ドラッグ＆ドロップの仕様では、dataTransferオブジェクトのdropEffect属性に対して、dragEnter, dragOver, dragLeaveの各イベント時に特定の値を設定することが推奨されています。dragEnterとdragOverイベントでは、現在のeffectAllowedに基づいてdropEffectを設定する必要があります。dragLeaveイベントでは、dropEffectは常にnoneに設定する必要があります。これまでChromeはこの仕様に準拠していませんでしたが、Chrome 148+からはこの仕様に準拠し、dropEffect属性に対して正しい値を割り当てるようになります。

video要素とaudio要素の遅延読み込み

video要素とaudio要素にloading属性が追加されます。

これによりデベロッパーは、loading=lazyを設定することで、要素がビューポートに近づくまで動画・音声リソースの読み込みを遅延させることができます。これは既存のimgやiframeの遅延読み込みと同じ動作で、ページの読み込みパフォーマンスを向上させ、データ使用量も削減されます。

at-rule()関数

CSSの@supportsにat-rule()関数が追加されます。これによりデベロッパーは、CSSのat-ruleに対するサポート状況を検出できるようになります。

revert-ruleキーワード

revert-ruleキーワードはrevert-layerがカスケードを前のレイヤーに戻すのと同様に、カスケードを前のルールに戻します。

div { color: green; }
div { color: revert-rule; /* 実質的にはグリーン */ }

1 2	div { color: green; } div { color: revert-rule; /* 実質的にはグリーン */ }

これは条件付きルールで特に役立ちます。なぜなら、条件が満たされない場合に現在のルールを削除できるからです。

div {
  display: if(style(--layout: fancy): grid; else: revert-rule);
}

div {

display: if(style(--layout: fancy): grid; else: revert-rule);

}

text-decoration-skip-ink: all;

Chrome 148+で、text-decoration-skip-inkプロパティのall値がサポートされます。

text-decoration-skip-inkプロパティはすでに、autoおよびnoneをサポートしています。all値は、CJK文字（中国語と日本語、および韓国語）を含むすべてのグリフに対して無条件にインクスキップを適用します。対照的に、autoではインクスキップは表意文字の典型的な下線位置で望ましくない視覚効果を生み出す傾向があるため、CJK文字はスキップされません。

text-decoration-skip-ink: all;を使用すると、CJKの各グリフとの衝突を避けるためにtext-underline-positionやtext-underline-offsetを調整したデベロッパーは、それらの文字に対して明示的にインクスキップを適用するよう選択できます。