How to use commas in a CSS variable fallback?

Tags: css,polymer,polymer-1.0,css-variables

Problem :

How can one use commas in the fallback value of a CSS variable?

E.g. this is fine: var(--color, #f00), but this is weird var(--font-body, Verdana, sans-serif).

The idea is to be able to set a font-family using a variable with a fallback value of say Verdana, sans-serif.

Edit: This actually works pretty well for browsers that support CSS properties, but the issue seems to come from Google Polymer's polyfills.

For future reference, I ended up using variables for both the font and the font family fallback like so (seems to be the cleanest way of doing it for now):

font-family: var(--font-body, Verdana), var(--font-body-family, sans-serif)

Solution :

The below is an extract from the W3C spec: (emphasis is mine)

Note: The syntax of the fallback, like that of custom properties, allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue; that is, anything between the first comma and the end of the function is considered a fallback value.

As you can see from the above statement, if your intention is to set Verdana, sans-serif as fallback value when --font-body is not defined then the syntax given in question is expected to work. It does not require any quotes as per spec.

I don't have a browser that supports CSS variables and hence I couldn't test the following code but it should work based on the spec:

.component .item1 {
  --font-body: Arial;
  font-family: var(--font-body, Verdana, sans-serif); 
  /* should result in font-family: Arial */
.component .item2 {
  font-family: var(--font-body, Verdana, sans-serif);
  /* should result in font-family: Verdana, sans-serif */
<div class=component>
  <p class=item1>Arial
  <p class=item2>Verdana, sans-serif

    CSS Howto..

    How to restrict Visual Studio 2012.2 from generating .css files in LESS editor?

    How do I use PHP to apply css properties? [closed]

    How to align images and unordered list

    How do I float a
  • to the right in CSS?
  • How to make element stay in the same position using css?

    How can I apply an existing CSS class style to a dynamically created div?

    How to make a HTML spinner with CSS

    how to repeat a small background image througout the page?

    how to change to color of pseudo-elements in css through jquery

    How to append a CSS rule to the another CSS rule

    How can I use development tools to find css class of a plugin item

    Using CSS or Java to Show or Hide Empty Content Area

    How to create CSS3 bounce effect with PURE CSS

    How to resize CSS Box with increase in content

    How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

    How can I make my jquery mobile collapsible set larger using css

    How do I center text relative to its parent div with CSS?

    How to place a css counter-increment below a paragraph of text?

    How to read CSS property of Psuedo class in javascript

    XPath how to find second element with CSS class name

    How to add text underneath the centered image

    Manual JavaScript Slideshow with Dynamic images

    How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates

    How to use `attr` when not on `content` property [duplicate]

    How to add style or put a class in a php form_submit button

    How do I use CSS to to vertically center align an image in a div?

    How browser renders HTML

    How to combine grouped inputs with aligned forms?

    How to change focus color when input is filled in with required attribute javascript/html/css

    How to get Bootstrap grid spans narrower than span1?