CSSの新機能！元のカラーの透明度だけ変更できる相対アルファカラーなど、Chrome 152で新しく追加された5個の機能

サイト構築 -制作

Post on:2026年9月1日

sponsorsr

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

今回のアップデートで注目すべきは、元のカラーの透明度だけ変更できる相対アルファカラー、HTMLのグローバル属性「autocorrect」、ウインドウを動かせるwindow-dragプロパティなど、Web制作者は要チェックです！

次のChrome 153からはアップデートが2週間ごとに行われる予定です。

New in Chrome 152
Chrome 152 beta

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

はじめに
::backdrop, ::scroll-marker, ::view-transitionに対するCSSPseudoElementのサポート
HTMLのグローバル属性「autocorrect」
メディア要素の疑似クラス
元のカラーの透明度だけ変更できる相対アルファカラー
ウインドウを動かせるwindow-dragプロパティ

はじめに

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

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

::backdrop, ::scroll-marker, ::view-transitionに対するCSSPseudoElementのサポート

これまで::after, ::before, ::markerに対して定義されていたCSSPseudoElementのサポートが、以下の疑似要素にも拡張されました。

::backdrop: ダイアログの背景（backdrop）がクリックされた際、ダイアログ内のコンテンツでのクリックを妨げることなく、ダイアログを閉じやすくします。これにより複雑な判定ロジックは不要になります。
::scroll-marker: クリック統計情報を収集するために使用されます。
::view-transition: CSSOM View geometry utilities
のリリースに伴い、ジオメトリを考慮したビュー遷移のサポートや実行中のビュー遷移への介入を可能にします。

HTMLのグローバル属性「autocorrect」

HTMLのautocorrect属性を使用すると、<input>, <textarea>, およびcontenteditable属性を持つ編集可能な要素に対して、ユーザー入力にオートコレクト（自動修正）を適用するかどうかを制御できます。この機能によりHTMLのグローバル属性であるautocorrectがデベロッパー向けに公開されます。

<form autocorrect="off">
 <input type="search">
 <textarea autocorrect="on"></textarea>
</form>

</form>

上記のHTMLでは、input要素はautocorrect属性が設定されていないため、属性値がoffに設定されたform要素から継承され、オートコレクトは許可されません。その一方textare要素はautocorrect属性の値がonで設定されているため、オートコレクトが許可されます。
参考: HTML Living Standard#attr-autocorrect

メディア要素の疑似クラス

:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked これらの疑似クラスは<audio>要素や<video>要素の現在の状態に基づいて適用されます。
これらの疑似クラスは、Intertop 2026における重点分野の一つです。

元のカラーの透明度だけ変更できる相対アルファカラー

相対アルファカラーは、CSS Color Module Level 5に定義されているalpha()関数を使用して、基準となるカラーを参照して、アルファチャンネルのみを変更する色設定です。alpha()関数を使用することで、既存のカラーに対して相対的な透明度を設定することができます。

--mycolor:  oklch(60% 0.25 315 / 0.3);
 alpha(from var(--mycolor) / 80%);

1 2	--mycolor: oklch(60% 0.25 315 / 0.3); alpha(from var(--mycolor) / 80%);

カラーは元のカラーと同じですが、アルファ値は80%に変更されます。

ウインドウを動かせるwindow-dragプロパティ

window-dragプロパティは、CSS Basic User Interface Module Level 4に定義されているウィンドウをドラッグして移動できるプロパティです。

window-dragプロパティを使用すると、Webコンテンツにおいてインストール済みのWebアプリのUIでドラッグ可能なウインドウのタイトルバー領域を設定できます。このプロパティを適用すると、その領域でのクリック＆ドラッグなどのマウス操作は通常のページ操作を発生させるのではなく、最上位のアプリケーションウインドウを移動させる動作になります。

このプロパティは既存のapp-regionプロパティを標準化し、名称を変更したもので、値もmove, noneに変更され、明示的な継承挙動を追加しています。