CSSの進化がすごすぎる！ CSSで関数を自分で定義できるカスタム関数が使えるようになります
Post on:2025年2月27日
sponsors
CSSの関数って、便利なものが多いですよね。calc()が登場したときも衝撃でしたが、最近ではattr()関数がパワーアップしたり、レスポンシブ対応に必須のmin(), max(), clamp()関数、ライトテーマとダークテーマのlight-dark()関数、ほかにも:is()や:where()といった疑似クラス関数、sin(), cos(), tan()などの三角関数もCSSで使えます。
そして2025年、これまでとは全く違う新しい関数がCSSで使えるよう開発が進んでいます。新しい関数はカスタム関数で、自分オリジナルの関数をCSSで定義して使用できます。
CSS Custom Functions are coming
by Bramus!
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
Chromeは現在、CSSのカスタム関数のプロトタイプを開発しています。これは非常に興味深い機能で、これまでのCSSを大きく変えるゲームチェンジャーです！
2025年2月現在、CSSのカスタム関数はブラウザに実装されていません。ただし、Chrome Canaryではフラグを有効にすると、機能します。
CSSのカスタム関数とは
Chromeは現在、CSS Functions and Mixins Moduleの仕様に基づくCSS関数のプロトタイプを作成しています。
仕様によると、
CSSのカスタム関数は、単一の固定値に置換されるのではなく、関数のパラメーターとそれが呼び出された時点でのカスタムプロパティの値に基づいて置換値を計算する、高度なカスタムプロパティと考えることができます。
簡単に言うと文字通り、CSSでオリジナルの関数を定義できるというものです。下記のCSSは、カスタム関数がどのようなのものかを知るための簡単な例です。
|
1 2 3 |
@function --negate(--value) { result: calc(-1 * var(--value)); } |
CSSのカスタム関数を呼び出すと、var()などを必要とせずに、値が受け入れられる場所であればどこでも使用できます。
たとえば、下記をご覧ください。
|
1 2 3 |
:root { padding: --negate(1px); /* = -1px */ } |
Chrome Canaryでの実装はまだプロトタイプで、リリース日も未定ですが、Experimental Web Platform Featuresフラグを有効にすることでCSSのカスタム関数を試すことができます。
CSSのカスタム関数の可能性
私はこの新機能にとても期待しています。
CSSのカスタム関数によって多くの可能性が開かれ、仕様書の--negateの例よりもはるかに大きな影響を与えるからです。
たとえば、CSSのlight-dark()関数には制限があり、<color>値でしか機能しません。しかし、カスタム関数を使用すると、どんな値でも機能する独自の--light-dark()関数を使用できるようになります。
|
1 2 3 4 5 6 7 |
@function --light-dark(--light, --dark) { result: var(--light); @media (prefers-color-scheme: dark) { result: var(--dark); } } |
ダークモードでサイトにアクセスしている場合は--dark値が返され、それ以外の場合は--light値が返されます。
これで<color>値以外を扱えるようになり、たとえば下記のようにフォントのウェイトを変更することもできます。
|
1 2 3 4 5 6 7 8 |
:root { color-scheme: light dark; font-family: "Literata", serif; color: light-dark(#333, #e4e4e4); background-color: light-dark(aliceblue, #333); font-weight: --light-dark(500, 300); } |
下記のデモページは、上記のCSSを使用したデモです。font-sizeとborder-関連のプロパティも変更されます。
※デモはChrome Canaryでご覧ください。
See the Pen
Custom CSS Custom Functions: --light-dark() by coliss (@coliss)
on CodePen.
📝カスタム関数の--light-dark()は、light-dark()関数の完全なコピーではないことに注意してください。light-dark()関数は要素の使用されているカラースキームに基づいて異なる値を返すことができますが、--light-dark()カスタム関数はグローバルな明暗の設定に依存します。使用された値に反応できることは、@function自体ではカバーされていません。そのため、CSSのif()関数も必要になりますが、現在これはまだプロトタイプ化されていません。
️また、<color>値については、ここではlight-dark()関数を使用していますが、カスタム関数で使用することもできます。light-dark()関数の方が高速に動作する予感がしますが、ベンチマークで測定する必要があります。
終わりに
この記事では基本的な例のみに限定し、詳細についてはあまり触れませんでした。たとえば、関数のパラメーターのデフォルト値や型の指定方法については触れていません。それらについては仕様で詳細を読んでください。Chromeが実装中のプロトタイプから得られた知見によっては仕様が左右されるため、仕様にはまだ多くの可動部分があることに注意してください。
Chromeのプロトタイプの進捗状況は、crbug/325504770をご覧ください。
sponsors
