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!を参照していただきたい。