Is it possible to check if a CSS variable is defined or not?

Question

I wonder if it is possible to have a CSS rule only applied if a css variable is defined. I've seen it is possible to define a default value, something like:

background-color: var(--bgColor, red);

But I don't think this will work in my project, Because what I would like is that when the variable is not defined to get the style that it will have if that line was not there in the CSS.

I added a codepen, to make it easier to understant what I am talking about:

https://codepen.io/xmorelll/pen/bGWLoaL

.container {
  margin: 5px;
}
.content {
  padding: 5px;
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid black;
  background-color: var(--bgColor) !important;
}

<div class="container">
  <div class="content" style="background-color: blue">blue</div>
</div>

<div class="container">
  <div class="content" style="background-color: yellow">yellow</div>
</div>

<div class="container" style="--bgColor: red">
  <div class="content" style="background-color: green">red</div>
</div>

<div class="container">
  <div class="content" style="--bgColor: green">green</div>
</div>

What are you trying to do exactly? If a CSS variable is not defined, it simply won’t be applied, exactly like you said. So if `--bgColor` is not defined and you set `background-color: var(--bgColor)`, that declaration won’t do anything. — Andy Jakubowski, Jul 27 '21 at 14:43
If that was true in my codepen the first two boxes would have the background color in blue and yellow. — Xavier Morell Llorens, Jul 27 '21 at 14:49
will you accept an answer saying "No it's not possible"? because it's the case — Temani Afif, Jul 27 '21 at 14:51
If you can use Javascript there is a solution for your problem, you can catch missing var() and add/update them with javascript, see this related question : https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-through-javascript — Camille, Jul 27 '21 at 15:11
@XavierMorellLlorens In that case please click the check mark ✔️ next to Temani Afif's answer to mark it as accepted. — CherryDT, Jul 27 '21 at 15:15

score 7 · Accepted Answer · answered Jul 27 '21 at 15:01

Because what I would like is that when the variable is not define to get the style that it will have if that line was not there in the CSS.

This is not possible even if you use an invalid value.

From the specification

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not

And

If a property contains one or more var() functions, and those functions are syntactically valid, the entire property’s grammar must be assumed to be valid at parse time. It is only syntax-checked at computed-value time, after var() functions have been substituted.

So any property using a css variable will be valid whatever its content. It will be invalid only at computed time and will fallback to inherit or initial (never to another value specified somewhere else)

See the below example.

html {
   background:red;
   background:lol-gradient(var(--c), super-power-red-color);
}

The background will not be red and that strange value is valid even if the css variable is not defined and I using a clearly invalid value.

score 0 · Answer 2 · edited Jun 06 '23 at 09:12

0

If you don't know what was the previous value of the css prop you are gonna change so you don't have a way of falling back to it.
In this case, if it is possible for you, I recommend that the place that sets the variable will also add a class that you will use the variable only if it exists.

edited Jun 06 '23 at 09:12

Nicholas K

15,148
7
31
57

answered Jan 10 '23 at 09:03

Haim

321
1
10

score -2 · Answer 3 · answered Jul 27 '21 at 14:33

-2

you cannot set default value in variable but,
You can define same key for default value then variable value

:root {
  --bg: pink;
}

div {
  background-color: red;  /*Default value*/
  background-color: var(--bg);
}

<div> 123</div>

answered Jul 27 '21 at 14:33

Dibash Sapkota

617
5
8

1

There is no way I get a div with the color red in your example. The CSS variable has been defined globaly. – Xavier Morell Llorens Jul 27 '21 at 14:41
if some browser doesn't support variables in that case bg color will be red. – Dibash Sapkota Jul 27 '21 at 14:42
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#browser_compatibility – Dibash Sapkota Jul 27 '21 at 14:50
all the browser support CSS variables (I am not considering the dead IE) – Temani Afif Jul 27 '21 at 14:52
@DibashSapkota Yes but that was not the question. The point was to get, in your example, `red` when you remove the line `--bg: pink`. – CherryDT Jul 27 '21 at 15:12

Is it possible to check if a CSS variable is defined or not?

3 Answers3

Linked