Space Toggles

[00:00:00]
>> Let's talk a little bit about space toggles. So that's kind of a strange name, space toggles. What does that mean? Space toggles allow us to turn parts of a value on and off. It's a technique some would say a hack I agree it's a hack but it's quite useful.

[00:00:18]
So let's see how these work again we have the same two lines of code you're used to that now and then effects and color is set to an empty value. What do we get? We get the full back the empty value is basically treated the same as initial.

[00:00:40]
Until recently, it was actually a part time error, but we changed that behavior very recently. It doesn't make a difference in the actual output because when it was a part time error it was as if accent color was not specified at all. So we still got the full back.

[00:00:57]
Now what if actual color is set to just whitespace? What do we get then? We get transparent. We actually get transparent in the same way that we get transparent when we specify 42 degrees. Because whitespace is an invalid value for background. What does background white space mean nothing.

[00:01:24]
So it becomes invalid at computed value time. And thus, we get the background's initial value, but what happens in this case? So here, if accent color is said to the empty string, well, if it said to an empty value. Then we get the full back orange. So we get a gradient from white to transparent and that is thrown over orange.

[00:01:51]
Now what happens if accent color is set to the to whitespace. If accent color is set to whitespace then when it's substituted we still get a valid value for background. We just get the linear gradient from white to transparent. So we still get a value, it's just a part of it has been turned off Whitespace is a perfectly valid value for custom property.

[00:02:25]
If the second declaration is not invalid, it looks invalid to many people, but it's actually perfectly fine. It's perfectly fine to have whitespace as a value. It's whether the resulting value is going to be valid after the custom property has been substituted at the point of usage. That depends on what we have, what value we have for our property after all these whitespaces have been substituted.

[00:02:49]
So whitespace is perfectly valid and very useful in turning parts of a value off and on. It can also be used as a fallback, and it can also be useful as a fallback. So we want to add an inset property as well to control whether the shadow is inset or not.

[00:03:10]
So we would start by going to the main role and resetting it to initial to cancel inheritance. So it would be book shadow inset in a show, and then we would go here to reference it but now all the shadows disappeared. That's because it's not actually set. While we could go here and do insert, or nothing even we could even set it to whitespace.

[00:03:43]
We don't wanna have to set it every time we use these long hands of shorts. So what do we do? We just specify whitespace as the fallback, and then it works just fine. It just turns this part of the value off if we don't need it. So whitespace is perfectly useful as a fallback as well not just as the value of the property.

[00:04:06]
Now let's look at a slightly more practical example. So here we have two variations of this button, one that is completely flat, and one that has a subtle gradient over it that we call shiny. And right now we have to apply a class to apply this gradient, which is not very practical.

[00:04:25]
We don't wanna be adding and removing classes to our HTML just to change the style of a button. It would be nice if we could just summon this shininess straight from the CSS wouldn't it. What if we could do like is shiny with some sort of value here that turns the shyness off and on.

[00:04:48]
Well, we can actually do that. This gradient that we have here, it can just be the full back of this value of this property. So we can do var is shiny with the entire gradient As the fallback and now what happens. If it's shiny is initial, we get the full back, if it's whitespace, we just get whitespace.

[00:05:18]
And this means we can even combine these right here because we can just turn the gradient off and on so whitespace no shininess. Initial, we get shininess. Let's try this from an inline style as well. Because right now we're still using this class. We can go here and specify initial for is shiny and we would need to specify a base of Whitespace because we don't want it to be active on the regular button.

[00:06:02]
And notice that now, we can alternate between these values to turn the subtle gradient on and off. However, the counterpoint to this is, this makes no sense to anybody looking at my code. I don't wanna have to explain this to any other developer. This is awful. Like having to specify initial to turn things on, and whitespace to turn them off, good luck explaining that to my colleagues and I agree.

[00:06:34]
Indeed this is very confusing. But there are ways to make it easier to read. We can define aliases like ON and OFF. And ON can be initial since that's what turns the value on. So, here, we can come and say, is shiny is off. So the base button has shininess turned off.

[00:07:06]
And then if we wanna turn it on, we do this and nobody has to care how this actually works. They just use these on and off keywords. And now despite this might be a little more palatable and it's actually kind of easy to read I find it. And obviously here it just turning one part of one value on and off but we could do an entire variations.

[00:07:35]
Essentially this allows us to emulate a lot of types of mixins. If you look at the notes, I have a link to an article of mine that has a more elaborate use case for styling this button. So the takeaway here is that you can turn off multiple different parts have custom properties in one go with whitespace and this is called space toggle.