The usage of comma in CSS declarations

Question

What it the logic behind the usage of the comma in CSS declarations?

Sometimes it is required, sometimes it is optional, and sometimes it generates an error.

<         


        

Answer 1

For background we need comma because it's multiple background layer. So each time we add a new background layer we need a comma. Technically they are independant layers. We can ommit the comma before the final layer if it's a defined as a color.

For the filter, we are applying one filter which is the combination of multiple filter functions. The same as with transform property. Technically they aren't independant values.

---

In all the cases you should refer to the specification to get the syntax of each property as there is no magic rule behind the use of comma, space or any other character. The main purpose is to have a clear and non-ambiguous syntax.

For background

Value: <bg-layer># , <final-bg-layer>

 <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

 <final-bg-layer> =  <\'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

A hash mark (#) indicates that the preceding type, word, or group occurs one or more times, separated by comma tokens (which may optionally be surrounded by white space and/or comments). It may optionally be followed by the curly brace forms, above, to indicate precisely how many times the repetition occurs, like #{1,4}. ^ref

For colors:

The format of an RGB value in the functional notation is rgb( followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ). The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values.

For filter

Value: none | <filter-value-list>

 <filter-value-list> = [ <filter-function> | <url> ]+

A plus (+) indicates that the preceding type, word, or group occurs one or more times.

---

Worth to note that in background you can have comma, space and also / to separate different values like described in the above syntax.

 background:linear-gradient(red,red) left/100% 50px,
            linear-gradient(blue,blue) top/50px 20px yellow;

Comma is the separation between layers and space is the separation between different properties. We can write it differently like below:

 backgrund-image:linear-gradient(red,red),linear-gradient(blue,blue);
 background-position:left,top;
 background-size:100% 50px,50px 20px;
 background-color:yellow;

Answer 2

brightness and contrast are two separate values of the filter property.

rgba and individual rgb values are parameters of the rgba and linear-gradient functions, in this case linear-gradient is the value of the background property.

Edit: also worth noting there is a major exception to this rule: font-family takes several values separated by commas... So no this isn't entirely consistent.