CSS Custom Property fallbacks

Here’s a thing I didn’t know you could do with var(): like font stacks, you can specify a fallback value if the specified custom property isn’t defined, like so:

Code language: CSS

body {
  color: var(--color-text-default, black); 
}

Mind you, this only applies to browsers that understand custom properties. To provide a fallback for browsers that don’t, use the tried and tested method of defining the fallback first and then the newer property declaration:

Code language: CSS

body {
  color: black;
  color: var(--color-text-default, black); 
}