6

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Danny
  • 3,670
  • 12
  • 36
  • 45

3 Answers3

12

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Your answer was informative and cited fantastic sources. I found the case of font:"italic small-caps bold 12px Times New Roman,sans-serif" to be problematic and accepted by CSS, even though Times New Roman has whitespaces. The way around this, for me, was to parse the CSS in a particular order and by supporting each value from left-to-right with the leftover being the font family name. – Danny Mar 25 '14 at 00:46
1

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.

Sideways S
  • 601
  • 7
  • 12
-2

First, your font tag is not formatted correctly. If you are declaring a font tag directly in HTML, it would be in this format:

<font face="Colaborate,Arial,Helvetica,sans-serif" size="12px" style="font-style: italic">Some Text</font>

But, declaring a font tag directly in HTML should only be done if you are not using HTML5. Most browsers today use HTML5. When using HTML5, you should define your fonts with CSS.

When defining your fonts with CSS, a space is a delimiter for different parameters that a css attribute can accept. For example, if you are defining a border there are different parameters that must be defined: the size, the style, the color. This is when you can use a space as a delimiter, because they define different parameters of the css attribute. For example, to put a black border that is one pixel in width with a solid line around your text, you would do this:

#yourItem {
    border: 1px solid #000000;
}

But, there are a few CSS attributes that can accept and evaluate a hierarchy of values. An example of this is the font-family attribute. You can define multiple values for your font-family. They will be processed in the order they are listed. For example, if I list the font-family for your item like this:

#yourItem {
     font-family: Colaborate, Arial, Helvetica, sans-serif;
     border: 1px solid #000000;
}

The first thing the browser is going to do is look to see if the Colaborate font is installed on the machine/device. If the Colaborate font does not exist, it will next look for Arial (which is a pre-installed font on most machines/devices). It will then render the text as Arial, since Colaborate was not available. If it did not find Arial, it would look for Helvetica. If it did not find Helvetica, it would default to the first font on the machine/device that does not have serif treatment. This is why a comma is used in this instance instead of a space. A space defines actual different parameters. The comma is used to define a hierarchy of choices for one css attribute parameter. The comma does not work with all css attributes. It will only work with some.

Hope this helps!

user2847376
  • 143
  • 1
  • 1
  • 9