7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Working With Invalid Variables and Fallback Values

Welcome back to the course. In this lesson, you’ll learn what happens when certain variables are invalid and also how to provide fallback values to CSS variables. Let’s begin.

Related Links

2.3 Working With Invalid Variables and Fallback Values

Welcome back to the course in this lesson, you'll learn what happens when certain CSS variables are invalid and how the browser deals with that. And also how to provide fallback values for CSS variables. Let's begin. Now I'm going to start with a very simple example here I'm going to define a paragraph and some text inside it. And then inside CSS, I'm going to write the following routes. I'm going to define a variable color that has a value of one, REM. Obviously, this is invalid. And we'll see how the browser deals with that in just a little bit. And for the body I'm just gonna set up display flex in a line these items on the on the center. Now, the interesting part comes here I'm going to find a paragraph. Let's set this to a max width of 50%. And let's set the color to var color. Let's see what happens. And actually nothing happens because the color variable is invalid. It has an invalid value for the color property. All right, in translation this would be color equals to 1rem. Now in these cases, the browser does the following. First, it checks if the color property can be inherited. That's true, so it looks at its parent To see if we have a color defined there, the body which is the parent of this paragraph doesn't have a color defined. In which case, the browser will revert to the initial value of the color which is black. So it displays a black text. Now if I were to set a color, let's say of green before this, it will still not work because due to the cascading nature of CSS, the color will receive this value. Basically this will overwrite the green. So by defining green here, it's totally irrelevant. However, if we were to define a color, let's say of blue on the body. Well, that's a different story, because again, this is an invalid variable. So the browser then Seeks to get the inherited value of color, in which case, this is blue because we have define the color on the body. If blue was not present here, then the browser will just revert to the initial value of color, which by default is black. So I hope that makes sense. That's how. The browser works when it comes to invalid variables. Now, let me show you another example in which I'm going to show you how to define some fallback values. For CSS variables. I'm gonna start with a simple markup. This is one of the menus that I showed you in the previous lesson. And for the CSS, I just added some demo styles for the body. These are not really important when it comes to CSS variables. So let's start Defining our menu by actually defining some variables. We're going to say item size 3RAM, font size 18 pixels. And also I'm going to define two more variables here item color-1. I'm going to set this to black and item Color-2 I'm going to set that to green. All right. Now I'm gonna set some resets list-style: none padding margin 0 and split a flex. So they're all set in line here. And because I'm using flexbox. I'm going to define a gap and I'm gonna set calc VAR items size, and I'm gonna divide this by. 4 and I'm also going to set the font size to var font size. All right, now, this is where it gets interesting. I'm going to say menu list item, and then for the background color I'm gonna do this var item color-1. And then red. And let me quickly fill in the rest of the styling for this element. And I'll explain exactly what's going on with this syntax. I just added. Width, height, aligned everything in the center, set the line height to the item size and give it a border radius. Now, if you're going to use the var function like this by adding a second parameter, you're basically saying, use item color-1 if it's defined. Otherwise, use this parameter. So if item color-1 was not defined, let's say for example, this is called 11. This doesn't exist, right? This variable item color-1 does not exist. So the browser will use Our backup our fallback value. Now I can even go one step further, instead of this value I can do, again var and I can say okay, so if item color-1 doesn't exist, then use item color-2. If that doesn't exist, use some other color, for example, blue. So now, if item color-1 was not defined, it uses item color-2. If this is not defined, then it's going to use the fallback, which is blue. Now this is very useful for situations when certain variables are not defined at runtime. Maybe you're defining them from a CMS or from JavaScript later on. And you want those values that you define To be used in your CSS, you don't want to change your CSS. Instead you just want to define certain variables later on. In this case, fallback values are super useful because you can start, with one of these default fallback values and then As you're defining these variables that are gonna be applied to your page. So for example, right now, if I were to generate item color-2 from JavaScript, the browser will automatically acknowledge that, hey, this variable is now available, so let's go ahead and use it, then if I were to define This variable from JavaScript, let's say, the browser will say that hey, this is actually the first choice. So it's available. Let's go ahead and use that. Now please be aware that this is not a solution for invalid variables, okay? So you cannot use. These fallback to fix invalid values for your variables. For example, in here. If I was to set this to 1rem, let's say That's just gonna disappear completely. It's not using the fallbacks, right because the browser found the variable item color-1, right? That the one that we defined here and. It used that value. But again, it went through the same process that I explained previously. Background Color-1 Ram. Okay, that's invalid. So, what does it do is background color, a property that can be inherited from a parent? It is. So let's check the parent. Let's go to menu. Do we have a background color defined here? We do not, so in which case we come back to this and we set background color to the initial value which is white. So that's why we can't actually see these. They're still here, but the background colour is white so we can only see them if I set a background colour let's say of Something to the, to the background to the body Excuse me. And actually I was wrong about that. The initial background color for any element is actually transparent. It's not white, my mistake. Sorry about that. So yeah, in this case, we have an invalid Variable and the browser checks for inherited values if it can find those. It checks for, or it applies initial values, which in the case of background color is transparent. But it does not use the fallback values, because this Value is defined. Now it uses them because the variable isn't defined. But as soon as it finds it, it's going to use that. That variable. So I hope that makes sense. All right, so now you know how the browser deals with Invalid variables. And even though there's no real way of getting around the problem, you can certainly know what to expect. So if you're writing your code, you're using CSS variables and you're. Getting some results that you don't understand, then this could be what causes those problems, an invalid variable. And by understanding how the browser deals with this situation will hopefully help you fix those problems a lot faster. Also You saw how fullback values work for variables and you saw how it can actually nest a variable inside a variable to get up to two fullback values for a single property, which is pretty awesome. Now, Did you know that variables can be used with inline styles? Well, now you do. And while this is not something that I would recommend for production, so for the final stages of a project, it can certainly be useful for testing. Let me show you some examples in the next lesson. So I'll see you there.

Back to the top