CSS variables are gaining more and more usage in web design. There is a method that we can apply to use them in a way that doesn’t break the experience, in case the CSS variable value was empty for some reason.
max-width: calc(100% - var(--actions-width));
--actions-width is being used within the
max-width will compute to none.
We can avoid that ahead of time and add a fallback value to the var().
max-width: calc(100% - var(--actions-width, 70px));
That way, if the variable isn’t defined, the fallback
Examples and use cases
An invalid CSS variable
background-color: var(--brand-color, lightblue);
Support Defensive CSS
Do you like the content? You can buy me a cup of coffee. Thank you!