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>
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With