Join Ray Villalobos for an in-depth discussion in this video How do you use calc() in CSS?, part of Mastering Web Developer Interview Code.
- [Instructor] Calc is a feature that lets you perform mathematical calculations right in your CSS. It can be really useful when writing layout code, because it can make things a lot clearer. So let's take a look at how it works. Now, the first thing you need to know about calc is that it has fantastic browser support, even down to Internet Explorer 9, and that's great, because it means that you can use it today unless you're planning on working with older browsers. Now, if you do, you do need to use something like PostCSS or something that will translate your CSS to work in older browsers.
One of the cool features in calc is that you can mix and match units, so that you can ask for a percentage unit, but then subtract a pixel size from the percentage size, which is something you can't use with a lot of other pre-processors. One thing you do have to watch out for is that the plus and minus operators have to be surrounded by white space, so if you're not careful, this can create some very simple and difficult to debug problems. Now, you can easily nest calculations inside other calculations, or use CSS variables to make things easier.
So, let's take a look at an example. And here I have a pretty simple layout. Right now, it's not responsive, so it doesn't sort of have different breakpoints, it's just sort of the width of the browser and minus 90%, so if we wanted to improve on this, I can look at what's happening here in my CSS file. Now, if you are working with my Mastering Code Automation, you know that I'm using a Gulp process. This is one of those instances where you don't want to come from the previous video and just continue what we're doing, you do want to stop your terminal and then restart the Gulp process.
If you need more help with this, make sure you check out the video on using the exercises for this course. So, we have this section right here, called root. That is where we're using CSS variables. This is something that we covered on episode 13. They're very easy to do, though. You can see that this is the name of the variable, and in CSS, if you put two hyphens next to them, that's something different than a name and value pair. So, this would be a normal name. With two hyphens, it becomes a variable, and what you do is you put it in this special selector, called :root, and that way, the variable will be accessible anywhere on your page, so you can use this for colors and other things, but where we're interested is in working with the calc to do mathematical calculations.
Let me show you how you do that. So what I want to do is scroll down to this container section, and I've got this thing right now with a width of 90%. I want to institute a maximum width, so that the width of the content never gets past a certain point. So, I don't really like things to be this wide, 'cause the line widths are really big and it's a little bit hard to read this text, especially when you're going from one line to the other. So, to fix that, I'm going to do a max width and just show you kind of an example of how you would work with calc.
So, first off, I want to use my variable. It's called max-width. I'm using Visual Studio code, which is a pretty cool editor and actually has a shortcut, so that if you type in something, it gives you a pop-up, and if you hit return, it actually gives you the sort of VAR name and the parentheses that you need to use for variables. So, if we say var max-width, and I save that, right now, my variable for max-width is 900 pixels, so this is not going to get any wider than 900 pixels.
So it's a little bit different than what we had before, but similar, so what we can do here is, instead of using this 900 pixels, we can also use this with a variable. So we'll use this max-width variable, and one thing that you have to be super careful is that you don't delete this extra space right here. If you do this, or even this, then calc will not work, so make sure that you add spaces before and after plus signs or minus signs in calc, or it's going to be a long debugging night.
Notice that I'm using a percentage sort of measurement right here, but when I created that variable, I actually used a px value, and that's actually perfectly fine with calc, so you can mix and match your measurement systems for anything you want to do, so that's actually pretty awesome. Now let's go ahead and show you how I can use these with media queries. So, down here, at the very end of the CSS, I want to create some media queries, so that these things work a little bit differently, so I'm going to do an @media screen and min-width, just like a normal media query here.
So, at 500 pixels and smaller, I want to do the following, and what I want to do here is target the single card-group. So, card-group is going to be the container of all of these cards, and then I want to do something with card-group, I'll display as flex elements. I'll do a flex-wrap, a wrap, and justify-content, space between, so this is going to set up how my flex box object is going to work, and that's fine.
So this card-group, if we look at the index at HTML, this is the element that has all of these different cards in it, and you'll notice that each one of those cards are in a class of card, so there's several of them, right here, and what we're doing right now is targeting that card group and we're showing it how it should display at small breakpoints. So what then I can do, just to make things a little bit clearer, is I'll grab this and I'm just going to copy it and paste it down here.
And so, what I'll do is now target screens that are bigger, up to 800 pixels, and I'm not going to modify the card group anymore, I'm just going to modify each individual card, right, to display them in a slightly different way. And what I want to do here is just change the width of each card, so for width, I'm going to do a calculation, and I'm going to try 100%, divided by two.
That means that I'm going to want two columns between 500 pixels and 800 pixels. And then, minus, and I'm going to use this variable that I created, called card-margin. So, note a couple things about this, when you do use the minus sign, you do have to give it plenty of breathing room, when you use the division sign, you don't. I mean, you can write it like this, probably a little bit clearer, but this will work without the extra space. And now, let's go ahead and make another copy of this.
And now we'll modify this to be three columns. So, notice that it's very easy for me to go, one column, two column, three columns, and all I have to do if I want to create more columns is just change this number right here, and actually, this should be min-width, also, of 500 pixels here, and... Let's go ahead and save that. So, what'll happen is, normally, below 500 pixels, this will look like it did before, but whenever we get to 500 pixels, then we're going to give it a different size, right, and the reason we're using this calculation here is because it's really easy for me to change this number.
If I don't like two columns, then I can set this up to be three columns at this breakpoint, and it tries to fit them in there, I don't like that. Two looks really good at that breakpoint. And then, at 800 pixels, you would get three, like this. So, this becomes a lot easier to read and to update. If I was doing this for real, I would probably create more variables for these media queries and variables everywhere, but this is not what this video is about. Again, make sure that you check out episode 13 for a discussion on variables.
And this usage of calculations is just going to make it easier for you to type in and read the code and understand what is going on with your CSS a little bit better. If you want more help and a deeper discussion of how to work with advanced CSS features, here's a few places where you can go specifically into how calc works, and, of course, on working with advanced CSS features with a processor for CSS called PostCSS, and then, my friend Chris Converse has some excellent content on his series, called CSS Shorts Weekly.
Now, as usual, if you have some ideas for this weekly series and maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me in LinkedIn or just about any other social media network, like Twitter or GitHub, @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.