@supports & Custom Properties

[00:00:00]
>> You might be wondering now, how do we provide fallbacks for unsupported features? Then we can't use the cascade anymore. We can't just specify a duplicate declarations and let the browser use what it can understand. Just like we were able to do for 20 years or so. So, again add supports to the rescue, we can use that supports.

[00:00:21]
Here's how we would use add support to specify LCH colors only if the browser supports LCH and fall back to a more typical and more classic sRGB color for browsers that don't support LCH. And that is the huge advantage of custom properties here as well. We can just do this once, if we just use that supports without custom properties we would have to fork our CSS in every place that defines a color.

[00:00:52]
And this is not something we could do with preprocessor variables either because preprocessor variables cannot be written based on what the browser supports. Because the preprocessor runs before the break before the CSS even gets to the browser. Here is a bit of code that actually tripped me up a while ago.

[00:01:11]
We have a font size in 20 pixels that every browser understands. And we also have a font size that uses a clump function to make sure that our font size is within this range of 16 to 24 pixels. And here we have a calculation of let's say 100% multiplied by a custom property.

[00:01:36]
So what happens in browsers that don't support the clump function, you would expect that since the browser can see that I'm using the clamp function there. If it doesn't understand it, it should use the full back on part at parse value time like it's at parse value times that it seems that when using the clamp function, the clump function is not actually behind the variable.

[00:01:57]
However, that's not what happens. What happens is again that we get the behavior of invalid that computed value time. Because once the browser sees that I'm using a VAR function in my value, it just assumes optimistically that this might end up being a valid value once substitution is performed.

[00:02:24]
Because it can't know what I have, what I plan to store in this value and that can change at any point. So the 20 pixel fallback will never be used and I would still have to go the supports route if I want to provide a fallback.