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

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

Lhankor_Mhy

2022/05/31 08:44

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

kaga

2022/05/31 09:03

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

行動規範の内容に同意します

回答2件

引数の数が固定がどうかは関係ありません。たとえば、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 のように複数の値の組のリストを指定するときはカンマ区切りになります。

投稿2022/05/31 09:47

編集2022/05/31 09:59