CSS 関数表記法

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

構文

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

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

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

索引

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

A B C D E F G H I L M O P R S T U V

仕様書

仕様書 状態 備考
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() の関数表記を追加。

関連情報