CSS 関数表記法

CSS 関数表記法は CSS 値の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。

構文

selector {
  property: functional-notation( [argument]? [, argument]! );
}

構文は、関数表記の名前から始まり、左括弧 ( で始まります。次に記法の引数が続き、関数は閉じ括弧 ) で終わります。

関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によって、複数の引数がカンマで区切られていたり、空白を使用していたりします。

一連の CSS 仕様書で定義されている関数表記は以下のとおりです。

仕様書	状態	備考
CSS Values and Units Module Level 4	編集者草案	`toggle()`, `attr()`, `calc()`, `min()`, `max()`, `clamp()`, `round()`, `mod()`, `rem()`, `mod()`, `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`, `pow()`, `sqrt()`, `hypot()`, `log()`, `exp()`, `abs()`, `sign()` の関数表記を追加。
CSS Values and Units Module Level 3	勧告候補	`calc()` の関数表記を追加。
CSS Color Module Level 4	草案	`rgb()`, `rgba()`, `hsl()`, `hsla()` の関数表記にカンマなしの構文を追加。 `rgb()` と `hsl()` にアルファ値を許可し、 `rgba()` と `hsla()` をそれらの (非推奨の) 別名とした。 `hwb()`, `device-cmyk()`, `color()` 関数を追加。
CSS Color Module Level 3	勧告	`rgba()`, `hsl()`, `hsla()` の関数表記を追加。
CSS Images Module Level 4	草案	`element()`, `image()`, `image-set()`, `conic-gradient()` の関数表記を追加。