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.1 Using CSS Variables With Media Queries and JavaScript

In this lesson, you’ll learn how to use CSS variables inside media queries, and also how to change their value with JavaScript. Let’s begin.

Related Links

3.1 Using CSS Variables With Media Queries and JavaScript

Welcome back to the course in this lesson, you'll learn how to use CSS variables inside media queries, and also how to change the value with JavaScript. So let's begin. For this I'm gonna revisit an old demo that I created in a previous lesson. And that's the grid that we created using CSS grid layout. So let's quickly do that. As markup, we have a div class grid with five grid items inside and for CSS. Let's start by giving some padding to the body and then for the grid itself. We're gonna set the display to grid. And then we're gonna do grid template columns or repeat with min max and also we're setting a grid gap. Let's go ahead and define some variables inside here, column width. Now by default, we're going to set this to 100% because we're going mobile to desktop, right, and I'm gonna set the gap to one REM. So as you can see, all of my grid items are now stacked one on top of the other. And to make this more visible, let's set the style sort of grid item. Just setting up a background color and display flux and aligning everything inside. Let's actually define, Our grid item color in here. And I'm gonna say 64 c86, just like that. All right, so this is a version of the grid. That's gonna work right now on all screen sizes. But I wanted to split up into multiple columns when it reaches or it surpasses a certain screen width. So for that, we're gonna use a media query. So media, Screen, and we're gonna set the minimum width to, let's say, 720, pixels. And for that we're gonna target our grid, again, and we're simply gonna change the column width to 10 rams. And we're gonna set the gap to a calculation of var, column width and we gonna divide that by 10, right? So now, as you can see, when we go past 720 pixels, which is about now. Our grid changes from like the stacked version to using actual columns. And that's all thanks to media query, and you saw that I didn't have to write any other properties, all I did was change the value of these variables. Pretty cool, right? To make things a bit more visible, we can even change the grid color items. So grid grid, Sorry, it's item color. It's actually 2eb67c, this is the color that I chose. So this is a green. And when it's in mobile mode, it's a blue. Cool. So that's how you can use variables in media queries. Now what about JavaScript? Because you can actually read CSS variables from JavaScript and you can also change their color. And to demonstrate I'm gonna do something really, really simple here. I'm gonna start by defining a variable called target elements. And this is where I'm gonna put the element that has all of the variables or the element where all of the variables are defined. In my case, it's this grid. So I'm gonna say documents. Query selector and I'm gonna say .grid, right? So then I can say, targetelements.style.setproperty. And then I'm gonna input the name of my variable. grid item color, and I wanna set that to let's say cyan, right? So now you'll see that when we go back to the original code, right? The one outside the media query, this actually changes the color to whatever I want. Here, I just set it to change to red, and I'm doing this from JavaScript, okay? And the way I'm doing it is that I'm taking the parent or the element where my variables are defined. I do .style.setProperty. I specify the name of the variable that I wanna change, and I put in the new color. That's pretty simple. Now what do you think will happen if I would delete this variable from here? Well, let's find out. What, nothing happens. Do you know why? Because if the variable doesn't exist, well, JavaScript creates it. So I'm gonna create a variable called grid item color inside my target element, which in my case is grid with the value of red. And because grid item is a child of grid, it inherits that variable and it sets it up as a background color. And this is where I think you can understand the lesson about setting fallback values, right. Let me quickly give you an example. So I'm gonna say on the grid item background colors set a VAR grid item color, but I'm also going to give it a full back to yellow, right? And I'm gonna comment this line. Okay, so right now, grid item color is not defined in my CSS, this is commented out. So on the grid item, we're instructing the browser to use grid item color, but if that doesn't exist. If it's not defined, then use the color yellow, which it does. The browser uses the color yellow. However, by setting this property with JavaScript. The browser now sees this variable as being available. So it uses the value that we set right here from JavaScript which is red. So I hope that makes a little bit more sense. Now by doing this, I'm actually creating or changing the variable that is inside my target element, okay? And my target element currently is my grid. But what if I want to, create a variable inside the route in here, like I showed you previously. Well, if you wanna create a variable with a global scope like that, there's only one small change you have to make. And that is to set the target elements as documents.document element. Right so that will create the grid item color variable inside the route and that is a global location. So any element can use that variable pretty cool. Now let's go back to this bit and let's actually comment this bit and let's define our color, like it use to inside my CSS like this. What if I want to read this value? So far, I showed you how to create or modify a variable. But what if you want to read the value of a variable defined in CSS? Well, that's actually really easy to do from JavaScript. Let's define a variable called color. And this is how you read it. You say getcomputerstyle then you would specify your target element, where that variable is defined. In my case, it's the grid. And then you would say getpropertyvalue. And you would specify, the name of the variable. In my case, it's grid item color. Okay, and then if we just do a console log, for color. Yeah, we'll be able to see that our color is 64c8d6. And there it is, 64c8d6. It's really that simple. Getcomputed style, of your target element and then from that, getpropertyvalue and you pass in the name of your variable. If that variable is not defined well, you simply get nothing. That's all there is to it. All right. As you can see variables can be very useful when combined with media queries and they can also be created or changed directly from JavaScript, which again, can prove to be very useful sometimes. Now, did you know that CSS variables can also be manipulated from the browser's dev tools? Well, they can. And I'm gonna show you how in the next lesson. So I'll see you there.

Back to the top