how to reset a CSS variable (aka custom properties) and use the fallback one?

by

You can unset the value using initial to use the fallback one:

:root {
  --border-width-top: 2px;
  --border-width-right: 2px;
  --border-width-bottom: 2px;
  --border-width-left: 2px;
  --border-width: 0;
}
div {
  margin:5px;
  border-color: red;
  border-style: solid;
  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));
}


div.box {
  --border-width:initial;
  --border-width-top: 10px;
}
<div>some content</div>
<div class="box">some content</div>

from the the specification:

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, which is explained in the section defining var().

and

To substitute a var() in a property’s value:

  1. If the custom property named by the first argument to the var()
    function is animation-tainted, and the var() function is being used in
    the animation property or one of its longhands, treat the custom
    property as having its initial value for the rest of this algorithm.
  2. 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,
  3. if the var() function has a fallback value as its second argument,
    replace the var() function by the fallback value. If there are any
    var() references in the fallback, substitute them as well.
  4. Otherwise, the property containing the var() function is invalid at
    computed-value time

More Related Contents:

  1. CSS scoped custom property ignored when used to calculate variable in outer scope
  2. Is there a way to interpolate CSS variables with url()?
  3. How do I apply opacity to a CSS color variable?
  4. How do I debug CSS calc() value?
  5. How can I define colors as variables in CSS?
  6. How to create color shades using CSS variables similar to darken() of Sass?
  7. CSS native variables not working in media queries
  8. How to store inherit value inside a CSS variable (aka custom property)?
  9. How to use a unitless CSS variables and later add the needed unit?
  10. Why can’t I animate custom properties (aka CSS variables)?
  11. Using attr to set css variable inline that work with CSP
  12. Is there a difference between CSS custom properties and CSS variables?
  13. Prevent content from expanding grid items
  14. Position deeply nested elements in a higher level grid container
  15. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  16. CSS Property Border-Color Not Working
  17. Browsers’ default CSS stylesheets
  18. What are -moz- and -webkit-? [duplicate]
  19. CSS: center element within a element
  20. Create a Masonry grid with flexbox (or other CSS)
  21. What is the current state of the “scoped” attribute for the style element in HTML5?
  22. Django Forms and Bootstrap – CSS classes and
  23. Apple-like scrollbars using CSS
  24. How do I extend a class/mixin which has dynamically formed selector
  25. Reuse CSS animation in reversed direction (by resetting the state?)
  26. Pure CSS animation visibility with delay
  27. Make table cells square
  28. How to make a Bootstrap 4 full width dropdown in Navbar?
  29. Why doesn’t my child element inherit color from its parent when parent has more specific selector?
  30. Stacking DIVs on top of each other?

Leave a Comment