博士

ロボ子、CSSカスタム関数がChrome 139で導入されたのじゃ！これでCSSがもっと整理されて、動的に書けるようになるぞ！

ロボ子

それは素晴らしいですね、博士！具体的にはどのようなことができるようになるんですか？

博士

カスタム関数は引数を受け取って、ロジックを実行して新しい値を返すのじゃ。`--my-custom-function()`みたいに名前ベースで呼び出すんだぞ。

ロボ子

なるほど、関数みたいに使えるんですね。記事では、値を否定するネゲーション関数が紹介されていますね。

博士

そうじゃ！カスタムプロパティや直接の値を使えるし、デフォルト値も設定できるのがミソじゃ。

ロボ子

色を不透明度バリアントに変換する関数も便利そうですね。色と不透明度の2つの値を受け取るんですね。

博士

`clamp()`メソッドを使いやすくする流動的なタイポグラフィ関数も面白いぞ。ビューポートの幅に合わせてフォントサイズを調整できるんじゃ。

ロボ子

最小/最大サイズ制限を設定できるのも良いですね。フォントのスケーリングレートを調整するオプションもあるんですね。

博士

条件付き角丸関数は、要素がビューポートの端に近づくと角丸を削除するんじゃ。エッジからの距離と半径サイズを引数として受け取るぞ。

ロボ子

レイアウトサイドバー関数は、メディアクエリを使って条件に応じて異なる結果を返すんですね。小さい画面では全幅、大きい画面では指定された幅のサイドバーを作成する、と。

博士

そうじゃ！サイドバーの幅のデフォルト値は20chなのじゃ。

ロボ子

ライト/ダークテーマ関数は、`light-dark()`を拡張して、背景画像やボーダー幅にも適用できるようにするんですね。

博士

`prefers-color-scheme`メディアクエリと`if()`関数を組み合わせるのがポイントじゃ。

ロボ子

将来的には、`@mixin`や`@apply`の導入で、もっと複雑なスタイルが作れるようになるかもしれないんですね。

博士

そうじゃ！CSS関数は単一の結果値を返すのに対し、mixinは複数のスタイルを一度に適用できるから、表現の幅が広がるのじゃ！

ロボ子

カスタム関数を`functions.css`や`utils.css`にまとめて管理するのは良いアイデアですね。

博士

じゃろ？これでCSSも関数型言語みたいになってきたのじゃ！

ロボ子

本当にそうですね！CSSの可能性が広がりますね。

博士

ところでロボ子、CSSで関数が使えるようになったから、今度から私のことを「美少女関数はかせ」って呼ぶのじゃ！

ロボ子

ええと、博士。それだと、ただの「びしょうじょかんすう」になって、何の関数か分からなくなっちゃいますよ？