When a CSS property can have multiple values, are those values always separated by whitespaces?

Question

The "font" property can include multiple values to specify font-style, font-weight, etc.

I'm playing with a CSS parser and can't seem to find a definite answer to: are CSS property values always separated by a white-space?

font: italic small-caps bold 12px arial,sans-serif

The example above has "arial,sans-serif" with no whitespace. All other w3c examples follow this same convention, implying that the whitespace is reserved for separating the values from each other -- it seems like a safe assumption, but I haven't seen it confirmed explicitly.

Other questions and discussions I've seen involve shorthand selectors, outputting the different property values (the answers for those also seem to assume whitespace separation), and whether or not multiple properties can be declared in a single line. None of them seem to make the final call, though: is whitespace the definitive separator?

Answer 1

The technical answer to your question is that it depends entirely on the property itself.

But generally, yes, whitespace is used to separate different components of a property value in CSS.

As you've seen in the font-family property however, the value that it takes is a comma-separated list of fonts (commonly called a font stack). The fact that it uses a comma as a delimiter is defined solely by the specification for that property, see CSS2.1, section 15.3:

The property value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, component values are separated by a comma to indicate that they are alternatives:

body { font-family: Gill, Helvetica, sans-serif }

And CSS Fonts level 3, section 3.1:

Unlike other CSS properties, component values are a comma-separated list indicating alternatives.

Whitespace is acceptable either in front of the comma or behind it, or both. It is not significant and will not alter the meaning of the property value. The convention that is shown in the W3C specs is a single space after the comma. The page you link to is W3Schools which may have its own conventions (which in fact it apparently does not — even its own examples aren't consistent in the use of whitespace).

Indeed, even the font property, despite being a shorthand, has a custom syntax: in order to specify line-height, font-size has to be specified followed by a forward slash, which means, for example, font: 12px/1.5 is equivalent to font-size: 12px; line-height: 1.5. See this answer.

But again, there is no definite all-encompassing answer to what character is used as a delimiter in a property value. Each CSS property has its own grammar of possible values which is always spelled out in its respective specification.

Answer 2

CSS transforms, and all the so-called functions except calc() use commas (if they take a list of values). CSS gradients use a mix of spaces and commas. SVG is far more flexible in this regard, spaces and commas are interchangeable as separators for lists of attribute values.