How to Use Commas in a CSS Variable Fallback

How to use commas in a CSS variable fallback?

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 Variables inheritance and fallback

As JoseAPL has stated, the reason var() expressions accept a fallback argument instead of defaulting to inheritance is simply because while custom properties do inherit, not all of the standard properties you will use them with do.

On the other hand, if you're asking why a var() expression doesn't default to the next best-cascaded value, that's because by the time the var() expression is evaluated, there are no other values to fall back to, because every other declaration in the cascade has been erased. See section 3.1, which defines the term invalid at computed-value time:

Note: The invalid at computed-value time concept exists because variables can’t "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values.

Having said that, you can provide a custom property as a fallback value (as long as it's not the same one, for the same reason explained above) — that custom property just needs to appear in its own var() expression, since the fallback value is, well, a declaration value, not a property name.

So the result is a var() nested inside another var():

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4, var(--color3));
}

:root { --color1: red;}
body { color: var(--color1);}
body p { color: var(--color2); --color2: blue;}
body span {  --color3: green;  color: var(--color3);  color: yellow;  color: var(--color4, var(--color3));}

<body>  Text 1  <p>    Text 2  </p>  <span>    Text 3  </span></body>

Can I use CSS variables in a font list and have it work in legacy browsers?

Yes, it will break, you must use fallback font for legacy browser without using CSS variables.

For example:

   .header {
       font-family: sans-serif; /* This is fallback font for old browsers */
       font-family: var(--common-font);
    }

Also you can use a @supports condition with a dummy feature query:

.header {
    @supports ( (--a: 0)) {
      /* supported */
      font-family: var(--common-font);
    }

    @supports ( not (--a: 0)) {
      /* not supported */
      font-family: sans-serif; /* This is fallback font for old browsers */
    }
}

How do I apply opacity to a CSS color variable?

You can't take an existing color value and apply an alpha channel to it. Namely, you can't take an existing hex value such as #f0f0f0, give it an alpha component and use the resulting value with another property.

However, custom properties allow you to convert your hex value into an RGB triplet for use with rgba(), store that value in the custom property (including the commas!), substitute that value using var() into an rgba() function with your desired alpha value, and it'll just work:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

How do you make a LESS mixin for gradients with a variable number of stops?

No Separate Variable Needed

All that you need is to make sure you use a semicolon as a separator for the parameters, even if that happens to just be only one parameter you are passing. So this works:

LESS

@white: #fff;
.gradient (@origin: left, @fallback: @white,  @stops){
    background-color: @fallback;
    background: -webkit-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:    -moz-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:    -ms-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:      -o-linear-gradient(@origin, @stops) @fallback no-repeat;
    background:         linear-gradient(@origin, @stops) @fallback no-repeat;
}

.test {
   .gradient(@stops: #fff 0, #000 20px, #000 20px, #f00 20px;)
}                                                           |
                                                    this final semicolon 
                                                    causes the commas to 
                                                    become list separators
                                                    instead of parameter
                                                    separators making the whole 
                                                    thing part of one variable

CSS Output

.test {
  background-color: #ffffff;
  background: -webkit-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: -moz-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: -ms-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: -o-linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
  background: linear-gradient(left, #ffffff 0, #000000 20px, #000000 20px, #ff0000 20px) #ffffff no-repeat;
}

Node canvas use fallback font for unknown characters

You just need to specify 'Code2000' when you're setting the font. Consecutive fonts separated by commas are used as fallback fonts.

ctx.font = '50px Uni Sans, Code2000'

I tested this myself, and it worked perfectly.

Unable to use gradient along with image in CSS

The key is to use background-image for image and background for gradient.

I have included redundancies for other browsers.

.Blue{
    background:#47b; /* Old browsers */
    background:-webkit-linear-gradient(top,#47b 0%,#249 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,#47b 0%,#249 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top,#47b 0%,#249 100%); /* IE10+ */
    background:linear-gradient(to bottom,#47b 0%,#249 100%); /* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477bb',endColorstr='#224499',GradientType=0); /* IE6-9 */

    background-image: url("/Style Library/Images/Recurr.png") center no-repeat;
}

How to Use Commas in a CSS Variable Fallback