CSSの進化が止まらない! 自分でオリジナルの関数を定義できるようになります
昨日アップデートされたChrome 139に追加された、CSSの新しい機能を紹介します。
今回のアップデートの目玉は、CSSでオリジナルの関数を定義できるカスタム関数、角を自由にスタイルできるcorner-shapeプロパティ(アニメーションもできます!)など、Web制作者は要チェックです!
New in Chrome 139
Chrome 139 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
はじめに
8/6にリリースされたChrome 139で6個のCSSの新しい機能が追加されました。対象となるChrome 139は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その6個の新しいCSSの機能を紹介します。
CSSのカスタム関数
ついにCSSでカスタム関数が使えるようになります。
これで、CSSでオリジナルの関数を定義できるようになります!
一見、カスタムプロパティと似ていますが、CSSのカスタム変数は単一の固定値を返すのではなく、カスタムプロパティ・パラメータ・条件式に基づいて値を返します。
下記のCSSは、カスタム関数の簡単な例です。
CSSのカスタム関数を呼び出すと、var()などを必要とせずに、値が受け入れられる場所であればどこでも使用できます。
CSSのカスタム関数の可能性について詳しくは、下記をご覧ください。
CSSの進化がすごすぎる! CSSで関数を自分で定義できるカスタム関数が使えるようになります
var()とattr()の短絡
フォールバックが使用されない場合、var()関数とattr()関数はそのフォールバックのサイクルを探さずに評価されます。下記のCSSでは、--greenと--blueが存在するため機能します。

