cssの値のスペース区切りとカンマ区切り

Question

cssの記述ルールに関する質問です。
値の数値を複数入力する際に
margin: 0 0 5px 5px　のようにスペースで区切る場合と
rgba(0,0,0,0.5)　のようにカンマで区切る場合があると思うのですが
この２つはどういった基準で使い分けの判断をすればよろしいでしょうか？
（関数で入れる場合はカンマ区切りかと思ったのですがそうでない場合もあるようです。）

Comments

[Lhankor_Mhy]

余談ですが、 / で区切るものもあります。
https://developer.mozilla.org/ja/docs/Web/CSS/background

[kaga]

ありがとうございます！都度調べた方がよさそうですね。

Answer 1

引数の数が固定がどうかは関係ありません。たとえば、linear-gradient() は可変引数でカンマを使います。

CSSプロパティの値を返す関数表記内で必要なときだけカンマ区切りになります。
規格に「rgba() は(空白区切りでもよかったのに)不必要にカンマ区切りになっている」というようなことが書いてあります。

https://www.w3.org/TR/css-values-4/#functional-notation

Some legacy functional notations, such as rgba(), use commas unnecessarily, but generally commas are only used to separate items in a list, or pieces of a grammar that would be ambiguous otherwise.

関数表記以外だと、transition や box-shadow のように複数の値の組のリストを指定するときはカンマ区切りになります。

Comments

[kaga]

そうだったんですね。都度調べる他なさそうですね。ありがとうございます！！勉強していきます！

Answer 2

rgba()などは引数の数がきまってますね
marginは指定する要素数で上下左右の指定が変わってきます
borderのように順番ではなく値でジャッジするものもあります

Comments

[kaga]

ありがとうございます！！引数の数が決まっているものはカンマ区切りなのですね。