Can CSS Variables Have Undefined Syntax

On the 30 pages of the book "CSS World", it introduces a scene where transform animation and transform positioning conflict. You may see this description: "If a center positioning element such as a bullet box is implemented using the transform: translate(-50%,50%) offset, if the display animation of the positioning element includes a transform change, a conflict will occur, making the positioning invalid."

For this problem, the common solution is to set the width and height to fit-content, so that you can use inset:0 + margin: auto to achieve a center alignment effect that does not affect the transform animation.

We've recently discovered that there's actually an even more subtle way to deal with this, which is the CSS custom property syntax with empty space after the comma, for example:

transform: var(--transform, ) scale(1);

1. In-depth Analysis of CSS Variable Default Values

CSS variables support default values, which are values ​​used when CSS custom properties are not defined, such as the usage example below.

color: var(--color, skyblue);

If --color is not defined, we use skyblue as the color value.

However, I am afraid that many people don't know that the default value of the default pocket at the back can be omitted. Note that it is not written, not without this parameter. The parameters are still there, and the effect is that there is a bare comma in the parentheses, like the following.

color: var(--color, );

What does it mean? That is, if --color is not defined, this variable is considered to not exist and is not set. Note that this syntax is vastly different from the following syntax, not the same thing.

color: var(--color);

Let's look at an example to see where the difference lies. See the HTML and CSS below.

<p class="testa">What color is it？</p>
<p class="testb">What color is it？</p>

.testa {
  color: deeppink var(--color, );
}
.testb {
  color: deeppink var(--color);
}

At this point, the color of the <p> element corresponding to the .testa class name is different from the color of the <p> element corresponding to the .testb class name. (Real-time rendering, desktop browsers can open the console to view the source code).

In our tests, we can see that the color of the text on the top line is dark pink, while the text color on the bottom line is black.

The reason is that when --color is not defined, deeppink var(--color, ) is equivalent to deeppink , so the color is dark pink. And deeppink var(--color) can be regarded as deeppink undefined. The syntax is invalid, so the inherited black is used.

2. The Application in Multi-value CSS Properties

For single-value CSS properties, the value of blank defaults is not immediately obvious, because using or not using them doesn't make much difference. Please see the following two pieces of code.

div {
    border-radius: var(--radius, );
}

div {
    border-radius: var(--radius);
}

Their rendering performance is consistent. But in multi-valued CSS properties, the situation is completely different. Let's go back to the transform conflict scene from the beginning. If our transform animation is set up like this, we can largely avoid the problem of conflicting use of transform properties.

@keyframes scaleIn {
    from {
        transform: var(--transform, ) scale(0.1);
    }
    to {
        transform: var(--transform, ) scale(1);
    }
}

At this point, if the element needs to be positioned using transform, it's okay.

.target {
    position: fixed;
    left: 50%; top: 50%;
    --transform: translate(-50%, -50%);
}

At this point, the property value of --transform is automatically inserted into it when the animation is executed. It doesn't matter if the element doesn't have the --transform variable set. The animation will simply be animated according to scale(.1) -> scale(1), and the function will not be affected at all.

Several multi-value CSS properties

There are still many CSS multi-valued properties, one is abbreviated properties (separated by spaces and slashes), and the other is infinite-valued properties (separated by commas). In addition to the transform property, the following are common, as well as grid, border-image, columns, offsets, text-decoration, and many other properties, so I won't list them one by one.

By the way, for comma-separated multiple group values, when defining CSS variables, remember to write commas in front.

filter: invert(1) hue-rotate(.5turn) var(--filter,);
background: linear-gradient(deeppink, deepskyblue) var(--bgcolor,);
box-shadow: 2px 2px 4px #0003 var(--box-shadow,);

Hope the above content is helpful to you.