2月10日、Bramusが「CSS Custom Functions are coming … and they are going to be a game changer!」と題した記事を公開した。この記事では、新たに導入されるCSSカスタム関数（CSS Functions）とそれがもたらす可能性について詳しく紹介されている。
以下に、その内容を紹介する。
本記事は、以下のエキスパートに監修していただきました:
現在Chromeは、このCSSカスタム関数をプロトタイピングしている段階である。まだ正式に使用できるわけではないが、Chrome Canaryで「Experimental Web Platform Features」のフラグを有効にすることで試験的に触ってみることは可能だ。
Chromeが取り組んでいるのは、css-mixins-1仕様にあるCSSファンクションに関する部分である。仕様書には次のような記述がある。
A custom function can be thought of as an advanced custom property, which instead of being substituted by a single fixed value, computes its substitution value based on function parameters and the value of custom properties at the point it’s invoked.
カスタム関数は、高度なカスタムプロパティと考えることができます。カスタム関数は単一の固定値に置換されるのではなく、関数のパラメーターと、呼び出された時点でのカスタム プロパティの値に基づいて置換されます。
以下は仕様書に掲載されている非常にシンプルな例で、シンタックスのイメージをつかむのに役立つだろう。
@functionに続けて関数定義を行う- 関数は引数を（複数）取ることができる
- 関数の実行結果は
resultというプロパティに指定する。（Sassの @return 、JavaScriptの return のようなもの）
@function --negate(--value) {
result: calc(-1 * var(--value));
}
今回の機能は、上記の--negateのような単純な例よりも、はるかに大きな可能性を秘めていると考えられる。たとえば、CSS light-dark()関数は色値（<color>）のみを対象とする制限があるが、カスタム関数によって独自の--light-dark()を記述すれば、あらゆる値を引数として受け取ることができる。
@function --light-dark(--light, --dark) {
result: var(--light);
@media (prefers-color-scheme: dark) {
result: var(--dark);
}
}
ダークモードを使用している環境下では--darkの値が返され、それ以外の場合は--lightが返される。たとえば、ダークモード時には異なるfont-weightを適用することもできる。
:root {
font-weight: --light-dark(400, 700);
}
原文からリンクされていたデモコードでは、font-sizeやborder関連のプロパティも併せて切り替える仕組みになっている（Chrome Canaryでの閲覧が必要）。
以下に、Chrome Canaryで動作させた実行結果のイメージを掲載する（監修者の 鹿野壮さん、画面キャプチャーありがとうございます！）
Chromeの開発の進捗状況を追いたい場合は、Chromiumのバグトラッカー（crbug/325504770）をサブスクライブすると良い。
詳細はCSS Custom Functions are coming … and they are going to be a game changer!を参照していただきたい。
