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

  • Overview
  • Transcript

3.2 Working With Variables Inside Browser DevTools

Welcome to the final lesson of this course, where I’ll quickly show you how to work with CSS variables inside the browser’s DevTools. Let’s go.

3.2 Working With Variables Inside Browser DevTools

Welcome to the final lesson of this course, where I'll quickly show you how to work with CSS variables inside the browser's dev tools, let's go. I'm gonna be showing you this in three browsers. Here we have Chrome, also Firefox and Microsoft Edge. This is on a Windows machine. And I'm loading the exact same page, it's a live view of one of the code pen demos I showed you in this course. So what can you do inside the dev tools? Well, let's start with maybe Firefox. And I'm gonna open up and I'm gonna select Inspect Element. Let's select the entire card. Now inside the dev tools in Firefox, you can see all of my variables in here. And you can also see a preview of the color, both on the variable, but also on regular rules like this background color. You can see a preview of the bg color here. And when you hover with your mouse over that var declaration, you can also actually see the computed value of that variable, which is 252525, that's really cool. If you want to disable a CSS value, you can simply uncheck this check box. And as you can see from the live preview here, that variable is not available anymore, so it cannot be used in these elements. It's really, really that simple. And if you want to use a variable in here, right? Let's say you wanna add a rule or something. You can say, I don't know, border-color, you can actually do var, --, and you'll have a list of all the available variables to choose from. It gives you the variable name, it gives you the value, and where applicable, it also shows you a preview of that color, which is fantastic. And just like that you, added a new property by using a CSS variable. So that's in Firefox, right? If we check out Chrome, let's do a quick inspect here as well. In Chrome, again, we have access to, To those variables. As you can see here, we also see the preview of those colors. Again, you can disable a variable by clicking the little check box here. And you again have an auto complete, so maybe you wanna add a border color, and you can say var --, you actually need to delete that parenthesis there. So --, and again, you have access to the variables. And after you choose one, that's actually completing the the parentheses altogether. Now this actually doesn't show you the computed value of that variable when you hover with your mouse over it. Instead, you have to click it, and that's gonna highlight the line that contains the value. So that's in Chrome. Now if we take a look in Edge, let's inspect this, this should actually behave roughly the same as Chrome. As you can see, we have color previews here, we can disable this. And if we wanna add, let's say border-bottom, 1 pixel, solid, var, right, as soon as I open that that parenthesis, I get a preview of all of my available variables. And this actually looks a lot better than Chrome, to be honest. I'm surprised about that because this is Microsoft Edge, but yeah, there you go. And also, you don't get the computed value by hovering over the variable name in here. Instead, you have to click, and it's just like Chrome, it's gonna highlight the line where that variable is defined. So basically, you can do exactly the same things in each of these browsers' dev tools when it comes to CSS variables. They just look a little bit differently. But so far, the one that I've seen which works the best is the one from Firefox. Because you get the color previews here, you get the computed value when you hover on a specific variable name. And you also get, I think, the best auto complete because you can just say var, and then move your cursor inside the parenthesis, and you can just choose it from here, so that is pretty cool. But regardless of the browser, you do have access to these variables inside your dev tools, and you can easily manipulate them. All right everyone, that's about it for this course. I hope you found it useful, and that you learned how to work with CSS custom properties, or as we call them, variables. I highly recommend you start using these in your own projects because they are very useful and they allow you to write code very efficiently. With that said, thank you very much for watching, I'm and until next time, take care.

Back to the top