CSS 関数表記法は CSS 値の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。
構文
selector { property: functional-notation( [argument]? [, argument]! ); }
構文は、関数表記の名前から始まり、左括弧 (
で始まります。次に記法の引数が続き、関数は閉じ括弧 )
で終わります。
関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によって、複数の引数がカンマで区切られていたり、空白を使用していたりします。
索引
一連の CSS 仕様書で定義されている関数表記は以下のとおりです。
A
B
blur()
(filter)brightness()
(filter)
calc
(math)character-variant()
(font)circle()
(shape)clamp
(math)color()
(colors)conic-gradient
cos()
(math)counter
counters
contrast()
(filter)cross-fade
cubic-bezier()
device-cmyk()
(colors)drop-shadow()
(filter)
grayscale()
(filter)
hsl()
(colors)hsla()
(colors)hue-rotate()
(filter)hwb()
(colors)hypot()
(math)
image()
image-set()
inset()
(shape)invert()
(filter)
opacity()
(filter)ornaments()
(font)
paint()
path()
(shape)perspective()
(transform)polygon()
(shape)pow()
(math)
radial-gradient()
rem()
(math)repeat()
repeating-linear-gradient
repeating-radial-gradient
repeating-conic-gradient
- rgb() (colors)
- rgba() (colors)
rotate()
(transform)rotate3d()
(transform)rotatex()
(transform)rotatey()
(transform)rotatez()
(transform)round()
(math)
saturate()
(filter)scale()
(transform)scale3d()
(transform)scalex()
(transform)scaley()
(transform)scalez()
(transform)sepia()
(filter)sign()
(math)sin()
(math)skew()
(transform)skewx()
(transform)skewy()
(transform)sqrt()
(math)steps()
styleset()
(font)stylistic()
(font)swash()
(font)symbols()
tan()
(math)target-counter()
target-counters()
target-text()
toggle()
translate()
(transform)translate3d()
(transform)translatex()
(transform)translatey()
(transform)translatez()
(transform)
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
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() の関数表記を追加。 |