Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 602
Xavier Morell Llorens Avatar asked Jul 27 '21 14:07

Xavier Morell Llorens


People also ask

Can we define variable in CSS?

The var() function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.

How do you check if a variable is defined or not in JavaScript?

Use the typeof operator to check if a variable is defined or initialized, e.g. if (typeof a !== 'undefined') {} . If the the typeof operator doesn't return a string of "undefined" , then the variable is defined.

Can you pass variables to CSS?

For anyone stumbling across this in 2018, whilst not fully supported CSS variables now give you the ability to pass a variable directly into your class.

How do you define and use CSS variables?

To declare a variable in CSS, come up with a name for the variable, then append two hyphens (–) as the prefix. The element here refers to any valid HTML element that has access to this CSS file. The variable name is bg-color , and two hyphens are appended.


1 Answers

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.

enter image description here

like image 198
Temani Afif Avatar answered Oct 23 '22 12:10

Temani Afif