The usage of comma in CSS declarations

Issue

What is 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.

<div>test</div>

<style>
div {
    height: 200px;

    background:
        /* Comma between colors is required. */
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        /* Comma between 1st and 2nd line is optional. */
        rgb(255, 0, 0);

    /* There must not be a comma. */
    filter: brightness(90%) contrast(90%);
}
</style>

Solution

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 independent layers. We can omit the comma before the final layer if it's 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;

Answered By - Temani Afif