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
</div>


    CSS Howto..

    How to get CSS background property to work with toggleClass() in jQuery?

    How to make a conjoined input with flexible width

    How can I make responsive JQuery left margin?

    How to add another line on overflow in a text input?

    webkit just cuts off decimals in css number … how to workaround?

    How can i make 3 independently scrollable columns

    How do I disable warnings from Aspx files (HTML,CSS)

    How to go from scrolling to fixed header [closed]

    How can I change the color of my body when using Bootstrap?

    How to come back to original state with a toggle button in jQuery?

    How to center an icon inside css shapes?

    How to prevent table row from re-sizing when hidden text is displayed?

    How to make partial scrolling div?

    How to test print output of browsers with online tools?

    Showing the div when display is set to none

    How do I center my content inside the menu?

    sunken border when background-color css specified - how to avoid?

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    How to use a different stylesheet for iphone or android?

    How to solve css double hover issue? Making an image map

    How to implement a navbar with HTML / CSS

    How to get rid of space between buttons and content/paragraph? (CSS)

    How do I get my divs to ease in right after eachother on page load?

    CSS--how to detect screen aspect ratio and apply styling accordingly? [duplicate]

    How can I give each
  • its own bullet image?
  • CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How to achieve a lightbox effect with css only? Example available

    Creating an animated image slider - how to animate and restrict multiple clicks?

    How to create a gullwing shape with CSS

    Transition animation to show hidden content