Fallbacks Solution

[00:00:00]
>> So to remind you, here we have a corner size custom property that lets us set cutout corners with any kind of CSS length, even viewport units, whatever. And we want to explore how we could have separate properties that set the horizontal and vertical cut out size. Or the corner size property that sets the entire corner so that we could have a 45 degree cut out.

[00:00:28]
So we wanna support both in the same way that CSS gives us longhands and shorthands. So how would we do that? And remember this section is about fullbacks, so that's kind of essential. So let's see. How would this look like? We want to be able to set a corner size x property and the corners size y property, let's set it to, I don't know, 3em.

[00:00:51]
So how can we make this work? And notice that here we also left the corner size property for the second div because we also want that to work. So we would go here and change this to corner size x cuz this is the horizontal coordinates and we will change this to corner size y cuz that's the vertical coordinates.

[00:01:13]
And note that now the first one worked, the first paragraph worked, but now we lost the second one because the second one was still specifying corner size. So how can we enable both to work? We can just use a dynamic fullback here that sets this to corner size, if corner size x is not set.

[00:01:36]
And we would set the same fullback here as well. And now both of these work, so we get the best of both worlds. Now who could tell me, is this exactly like a shorthand? What's the difference between this and an actual real CSS shorthand? All right, I'll give it away, so the difference comes up if we include all three in the same rule.

[00:02:06]
If this was a real CSS shorthand, this declaration would override the first two. But here, this is independent, it doesn't matter where we put it, it will always be a fullback and nothing more. So if corner size x and corner size y are present, corner size will never be applied, very much unlike a real shorthand.

[00:02:31]
So another takeaway is that fullbacks can be dynamic, via our references we can basically daisy chain as many of our reference as we want in the fullback parameter. And also that default values allow us to create shorthands of sorts, but we should be careful because these are not real shorthands.

[00:02:51]
And maybe we should not be thinking of them as shorthands.