CSSの進化が止まらない！自分でオリジナルの関数を定義できるようになります、Chrome 139で新しく追加された6個のCSSの機能

サイト構築 -制作

Post on:2025年8月7日

sponsorsr

昨日アップデートされたChrome 139に追加された、CSSの新しい機能を紹介します。

今回のアップデートの目玉は、CSSでオリジナルの関数を定義できるカスタム関数、角を自由にスタイルできるcorner-shapeプロパティ（アニメーションもできます！）など、Web制作者は要チェックです！

New in Chrome 139
Chrome 139 beta

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

はじめに
CSSのカスタム関数
var()とattr()の短絡
CSSのcaret-animationプロパティ
角をスタイルできるcorner-shape
初期値に切り替えても、実行中のトランジションを継続する
svg要素の幅と高さをプレゼンテーション属性としてサポート

はじめに

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

以下、その6個の新しいCSSの機能を紹介します。

CSSのカスタム関数

ついにCSSでカスタム関数が使えるようになります。
これで、CSSでオリジナルの関数を定義できるようになります！

一見、カスタムプロパティと似ていますが、CSSのカスタム変数は単一の固定値を返すのではなく、カスタムプロパティ・パラメータ・条件式に基づいて値を返します。

下記のCSSは、カスタム関数の簡単な例です。

@function --negate(--value) {
	result: calc(-1 * var(--value));
}

@function --negate(--value) {

result: calc(-1 * var(--value));

}

CSSのカスタム関数を呼び出すと、var()などを必要とせずに、値が受け入れられる場所であればどこでも使用できます。

:root {
  padding: --negate(1px); /* = -1px */
}

:root {

padding: --negate(1px); /* = -1px */

}

CSSのカスタム関数の可能性について詳しくは、下記をご覧ください。

CSSの進化がすごすぎる！ CSSで関数を自分で定義できるカスタム関数が使えるようになります

var()とattr()の短絡

フォールバックが使用されない場合、var()関数とattr()関数はそのフォールバックのサイクルを探さずに評価されます。下記のCSSでは、--greenと--blueが存在するため機能します。

--green: green;
--blue: blue;
--a: var(--green, var(--b));
--b: var(--blue, var(--a));

--green: green;

--blue: blue;

--a: var(--green, var(--b));

--b: var(--blue, var(--a));

CSSのcaret-animationプロパティ

Chromeではすでにcaret-animationプロパティのアニメーションをサポートしていましたが、アニメーション化を行うと、キャレットのデフォルトの点滅動作がアニメーションに干渉していました。

CSSのcaret-animationプロパティにはautoとmanualの2つの値があり、autoではブラウザのデフォルト（点滅）、manualではデベロッパーがキャレットのアニメーションを制御できます。このプロパティはユーザーがユーザースタイルシートを使用して点滅を無効にすることもできます。

角をスタイルできるcorner-shape

角のスタイルといえば、既存のborder-radiusが便利ですが、corner-shapeは角の形状や曲率を設定することで角をスタイルすることができるようになります。これにより、四角、ノッチ、スクープのような形状を作成したり、またそれらをアニメーションで切り替えることもできます。

corner-shapeのいろいろな角のスタイル方法については、Frontend Masters Blogをご覧ください。

初期値に切り替えても、実行中のトランジションを継続する

トランジション関連のプロパティが変更された場合、その変更は新たに開始されたトランジションにのみ影響することになっています。つまり、トランジションのプロパティを変更しても、アクティブなトランジションのアニメーションを持つプロパティも変更しない限り、それらのトランジションのアニメーションは以前に指定された継続時間やイージングなどで継続されます。

たとえば、トランジションのプロパティにnoneが設定されている場合、transition-durationのみを変更してもトランジションはキャンセルされないにもかかわらず、誤ってトランジションをキャンセルしていました。WebkitおよびGeckoは一貫性を保ち、プロパティ値が変更された新しいトランジションの更新がトリガーされるまで、アクティブなトランジションが実行され続けるようになります。