Does CSS var() fallback work in unsupported browsers?

Question

I'm working with CSS vars these days so one thing has got my mind, I wanna know if I set a fallback for CSS var() function, how will this fallback work in old browsers which do not support CSS var completely. Whether will it be applied or considered as an unknown CSS feature?

To make long story short now I write two lines of CSS for a property like this:

:root{
   --box-height: 350px;
}

.box{
   height: 350px; // FALLBACK for older browsers.
   height: var(--box-height);
}

my intention is to give fallback for older browsers, but it will be okay if I write that way:

:root{
   --box-height: 350px;
}

.box{
   height: var(--box-height, 350px); // Does it work in older browsers really?
}

Will it work in older browsers or no? there is no transparent documentation about what I am talking about what is your thought?

Answer 1

Will it work in older browsers or no?

No it won't. If a browser doesn't recognize var() then there is no way to consider the fallback value you defined there. The whole value will be invalid.

You should stick to your first syntax if you want to consider old browsers.