There is no way to say “the background should be red if –foo is set and white otherwise”.

With an extra variable, you can do this. For example have a --dark and --light switch where one is initial and the other one a space. Then use background-color: var(--light, white) var(--dark, black);.

One will resolve to its fallback, the other one will resolve to space and thus is ignored. See the pen below.

It doesn’t work with Firefox. Apparently, pausing the animation means FF never assigns the initial values.

If you’re looking for something that is going to totally re-invent how CSS works forever, I don’t think you’re gonna find it here. It’s a (wait for it) CSS trick.

But I do think it’s very neat to be able to set multiple properties when one custom property changes. Sure, that could be media-query-esque, but it could be something else like the fact that JavaScript changes it, or a :checked state change.

Would be extra neat to have a way to do it without it feeling like a hack.

Following the padding example at the top, here’s what I came up with:

:root {
  --width-below-200: initial;
}

@media (max-width: 200px) {

  :root {
    --width-below-200: ;
  }
}

.square-1 {
  --width-below-200-bg: var(--width-below-200) rgb(247, 161, 2);
  --width-below-200-border: var(--width-below-200) 6px solid rgb(247, 121, 1);
  --width-below-200-border-radius: var(--width-below-200) 50%;

  --width-above-200-bg: rgb(129, 201, 0);
  --width-above-200-border: 6px solid rgb(2, 178, 1);
  --width-above-200-border-radius: none;

  background-color: var(--width-below-200-bg, var(--width-above-200-bg));
  border: var(--width-below-200-border, var(--width-above-200-border));
  border-radius: var(--width-below-200-border-radius, var(--width-above-200-border-radius));
}

.square-1 {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 12px;
}

and… this works.

But it’s exactly the same as this:

.square-2 {
  background: rgb(129, 201, 0);
  border: 6px solid rgb(2, 178, 1);
  border-radius: none;  
}

@media (max-width: 200px) {

  .square-2 {
    background: rgb(247, 161, 2);
    border: 6px solid rgb(247, 121, 1);
    border-radius: 50%;
  }
}

.square-2 {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 12px;
}

Now, obviously I’ve missed something (and no doubt it will seem obvious once I finally grasp it) but what is it exactly that the Space Toggle enables that isn’t just a clever way to insert @media query values into non-media-query-contained style declarations?

@carter – it might be shorter but it’s missing the point that you want one-single boolean variable to control a multiple aspects of your CSS, therefore you need an actual single-variable --bool, or whatever name. You code only affects simple things (my demo also, but I thought it delivers the point, in a way that shows how calculating a 0/1 boolean can be used in many situation, which one of them is with keyframes).

Imagine you have a 400 lines of CSS, and you incorporate this boolean variable in much of the code, in many ways. you wouldn’t want keyframes created for each and every situations. First you try everything you can without using the keyframes hack, and only if it’s impossible – utilize it as a last-resort, because it generates too much CSS and pollute the global env with named keyframes.

! ^ This is next-level Space Toggle usage. They’ve essentially created an index-addressable array in pure CSS

Anyone wanting to do significantly advanced script-free CSS game programming (for the fun of a challenge) may want to learn what @RockStarwind has invented here!

You misunderstand --foo: initial;.
The keyword initial sets, also in this case, the property to its initial value.

The W3C says:

The initial value of a custom property is an empty value; that is, nothing at all. This initial value has a special interaction with the var() notation …
If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property.
Otherwise, if the var() function has a fallback value as its second argument, …

Carter Li has already described the effect of --mq-sm: initial;:

… So the truth is that --mq-sm: initial behaves like --mq-sm is not defined, which makes var(--mq-sm) an invalid expression. Since var(--mq-sm) an invalid, --padding-when-small: var(--mq-sm) 2rem; is an invalid expression, which makes --padding-when-small undefined. …

An even simpler version: https://codepen.io/CarterLi/pen/xxOWWyX

She sure does, that’s why I talked about it in the article and included her demo and quotes from her.

https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

Ok … since the “boolen-like” values never pop out of a calc(), you can keep NOT values explicit. I get that.
The animation-technique is quite interesting!
Thanks for your answer!

computedStyleMap and getComputedStyle for browsers having no typed cssom support are very good helpers for debugging css properties.

But --mq-sm: initial is an exception. --mq-sm: initial behaves like --mq-sm is not defined at all, instead of the value initial.

#div { --mq-sm: initial }

div.computedStyleMap().get('--mq-sm') // => null

It seems that browser does recognize CSS keywords initial unset inherit when defining custom properties. The truth is if initial is not recognized, --padding-when-small: var(--mq-sm) 2rem should be parsed as ---padding-when-small: initial 2rem, while initial 2rem is a perfect valid value of css properties.

#div { --padding-when-small: initial 2rem; }

div.computedStyleMap().get('--padding-when-small') // => CSSUnparsedValue {0: " initial 2rem", length: 1}

Another proof is that if we define --mq-sm something other than initial, the example doesn’t work.

#div { --mq-sm: wtf; --padding-when-small: var(--mq-sm) 2rem; }

div.computedStyleMap().get('--padding-when-small') // => CSSUnparsedValue {0: "  wtf 2rem", length: 1}

So the truth is that --mq-sm: initial behaves like --mq-sm is not defined, which makes var(--mq-sm) an invalid expression. Since var(--mq-sm) an invalid, --padding-when-small: var(--mq-sm) 2rem; is an invalid expression, which makes --padding-when-small undefined.

Thus padding: var(--padding-when-small, var(--padding-when-large)); works.

See the Pen Using Space Toggles and Paused/Negative-Delayed Animations to create numerical options by Rock Starwind
(@RockStarwind) on CodePen.