Media Queries

[00:00:00]
>> Kevin Powell: But while intrinsic layouts should be our first line of attack, we do sometimes need media queries. I said we'll want to sprinkle them in. So we've already seen the basic syntax of it, but we're going to break it down a little bit more now, where it will look like this. We have at media, a space, a set of parentheses, then we have our curly braces, and then you just write some CSS inside the media query.

[00:00:22]
What we've already seen was doing something like this. I was using nesting before. We'll look at an example and I'll compare the differences. But we're setting up a grid and then over here we're adding the templates when we get to a certain condition. So in media queries, these are the conditions that we're looking to meet. Because this is outside of the media query, this applies to everything. Doesn't matter.

[00:00:44]
We're not saying like, oh, now my grid is only doing this. We're saying that this applies to everything, and when we meet this condition, we're also going to do this over here. So it's addition, not replacement, not changing other things. The only time that would happen is if you had a different declaration down here, so a display grid to a display block or something, you're changing one of the properties, then you'd be overriding a behavior.

[00:01:09]
The rest of the time it becomes additive. The very classic example that everybody gives for media queries is changing background colors. Not something you'd ever use on a website, but it just shows us the syntax, and it's very clear. My padding is not changing. It's staying the same, that padding is the global property, it's always there. My background is light blue, but if I meet this media condition of a width that is greater than 800 pixels, then we're going to switch to a red background.

[00:01:35]
So, very visual example, even if it's not a very realistic one. More realistic scenario is probably a layout like this one, where, oh my goodness, my image is disappearing. So, we've created a layout. In this case, I use flexbox just to change things up a little bit. So I have a layout there, and that just gets smaller and smaller because flexbox, it creates columns without me doing anything. Display flex, things go next to each other, and then I might go, OK, at one point I need this to change.

[00:02:07]
We haven't played with this very much, but this is one situation where you might use a media query. I'm not going to nest this one, so we'll do an at media. When I'm early on, I always encourage people when doing media queries, do the at media. Open closed parentheses, open closed curly braces, and then go back in, just so you don't forget something along the way. I've seen silly mistakes. So here inside the parentheses, the condition.

[00:02:34]
Width, we've been looking at width greater than, we can also say width less than, and I might say, I don't know, 800 pixels. And how do I change the way flexbox is working? What was the property that we would use for that? We're flipping the main axis. Flex-direction, flex-direction, there we go, thank you. So, I'm going to choose that flex layout again. Flex layout, we select it, and we say the flex-direction has now changed over to be, I'm going to mix this up, column creates rows.

[00:03:10]
This seems correct. That's always the super unintuitive thing with flexbox. A flex-direction of column means that you're creating rows inside of it, because again we're declaring what the main axis is. The main axis is a column, the content will become rows. So it just takes a bit of time to get used to that. But now, when I hit this condition, when the width is less than 800 pixels, I switch the flex-direction from the default of row to being column, which means then it stacks the content, and then I get a layout going this way.

[00:03:40]
And that's, this is like a classic example actually of when we would be building a lot of layouts with flexbox, and there are some use cases where you'll still do something like this, where you will use flexbox, except at certain sizes where you do want to switch the flex-direction. I talked about nesting in media queries. So in that example I just gave, I declared something, then I had my rule for my flex layout, and then inside the media query, I had to make that selector again.

[00:04:06]
These days we don't have to do that. We can use nesting, and that just means the media query can go inside the initial selector. It's just a bit of magic that the browser is able to understand now. It does the old, like it figures out in the background and unnests things to make them work properly, but this works really well. If you use nesting for nothing else, which I get some people just don't like it, for me, this is such a big win.

[00:04:32]
I tend to do this. I used to do this with Sass, which is a preprocessor all the time, so I just have the habit of doing it, but it's nice not having to redeclare the selector when we don't have to. And so our project, we actually already did this, but I want to revisit having the media query in the project that we used it for, which was for the 3-column section that we set here. This is a very typical use case for having a media query.

[00:04:55]
And not using auto grid, because the auto grid feature we were looking at is great, but in this situation, if we got narrower, then we'd have two columns with like one sitting down by itself over here. That would be kind of strange. And if we used flexbox to do it, we could, but then you'd end up with two columns and then the bottom one would just probably be stretching the whole bottom and that layout would be kind of weird.

[00:05:17]
So often in situations like this, we just want to come in with a simple 3 columns, which I think I had at the bottom. Where we're just using a media query here, display grid, gap, so this is the global styles that we have on it, and then when we get to small enough screen sizes, which we'll have to use our dev tools to do with our responsive mode on. At smaller sizes, it ends up stacking instead of staying in the 3 columns.

[00:05:47]
Or I could zoom in a little here too. It makes it a bit more obvious. That's probably a better solution. So, as the browser gets narrower, we just switch from one to the other. And this is why I say it's good to sprinkle media queries in. Some of the times the intrinsic layout patterns don't really make sense, and you just want to go from one column to 3 columns or up to 4. Or you want to go from 1 to 3 to 5.

[00:06:07]
And you're skipping things along the way because that's what your designer asked you to do. So those are the times where media queries come in. Now, if you're completely new to CSS, all of this might seem very normal. If you've been writing it for a little bit now, this whole time I've been using media queries, you might have been a little bit confused because I've been using something called the range syntax.

[00:06:27]
The range syntax is the newer way of writing media queries, where we're using the greater than and less than symbols. We can also say greater than and equal to, less than and equal to. And we can make some pretty complex media queries using it. So we can put in, if my width is greater than 500 pixels, but less than 800 pixels, do this. And this is sort of what I talked about where we're jumping from 3 to 5 columns, where this one should be maybe a 7 down here.

[00:06:58]
But then between 800 pixels and 1200 pixels, we go to 5 columns, and then when you're greater than 1200, you go to probably something other than 5. I apologize for having a repeated value there, but I think you get the idea. I think this is so cool that we can do this, but I cannot write media query this way to save my life. It's just really confusing when you're trying to like, work your way around which way the arrows should be pointing, and I just get very confused.

[00:07:28]
So if you can get it, go for it, I guess. The much easier way is the old school way where you can use the AND keyword. So I can say when my width is greater than 500 and my width is less than 800. My width is greater than 800 and less than 1200, and then when my width is greater than 1200, it does this. You're just breaking them up into manageable pieces instead of trying to figure out where each thing should go, you're just creating multiple things along the way.

[00:07:56]
And the end here, you can put other stuff on the end. It's just we're saying these are multiple conditions that all have to be met having the end in there. Even this though, it's a bit complicated, like, do we really need to say between this size you're like this, between this size you're like this, and between this size you're like that. It works. Here's the example, a live example of it if you want to see it in code working, 1 column to 3 columns to 5 columns.

[00:08:28]
However, when you're using media queries, order comes into play as well. So I could say if the width is greater than 500, greater than 800. And if you, I get them a little backwards here, but it's OK, it's still working. The width is always on the big side, so it's always if the width is greater than. It's still going to work exactly the same way. I don't need to have that complicated way of writing the media query.

[00:08:52]
It still does this. The reason it's still working is because these are conflicting when we get to there. So if I get up to 800 pixels and I get to 5 columns, these are conflicting with one another. Order comes in, the browser goes, OK, we're doing 2 grid-template-columns, I'm going to take the last one. So it becomes 5 columns. Then as we get to larger screen sizes, which I can't reach. I don't think I'm reaching, but eventually you'd get there and you'd have the other one coming in and this one is going to win every time because it's coming lower down in the order.

[00:09:25]
For the most part, this is how I would say you should be writing your media queries. I wouldn't be doing it. I wouldn't overcomplicate them unless there's a very good reason to actually do so. This is a really important concept though, that the styles coming after are influencing things. Never put a media query before your regular declaration. Because if you do it this way, your media query, if it's overwriting something, will never overwrite it, because we're going in order.

[00:09:54]
So if my screen is bigger than 700 pixels, my flex-direction should be row, like we saw us doing earlier. But all the time, my flex-direction should be column. Media queries don't add any specificity, there's nothing like that, it's just a condition on when that CSS should be applied. So if the media query is coming first and you're trying to overwrite a behavior to change a layout or something, it's never going to win.

[00:10:14]
I always see media queries as additive, so I start with my regular styles and then I'm trying to add different things at different points after that. Not too often you see this type of thing come up, but it's one of those gotchas that can be really annoying when you're trying to figure out what's going on. So just always try to have your media queries after what you've declared. I've hinted at it, there is another syntax that we can use, which is the older way of writing it, which was the min-width, and there was also a max-width that we could put in here.

[00:10:44]
The min-width and the max-width was just the way that we wrote them previously until we got the greater than less than symbols. The main issue with min-width and max-width, they worked, but they're, when you, it makes sense when you say it out loud and think about it, but when you're quickly doing it, it's a little bit unintuitive because a min-width is that size and bigger. It's using the min keyword to say bigger than, and if you used a max keyword, it was for when it was less than.

[00:11:12]
So max is for smaller, min is for bigger. It was kind of confusing. It was a pain point for a lot of developers that were getting into CSS, which is why they created the range syntax instead. The biggest issue potentially with the range syntax is browser support. It's now what we call baseline widely available, meaning it's been in all modern browsers for the last 2.5 years. That's the cutoff for it.

[00:11:38]
There's a website called Can I Use where you can look up different features and you can see that. Widely available across all major browsers, it's at 92.9% support, 95% supports about the best you'll ever see for anything, so you'd sort of have to judge it. A lot of people judge browser support based on the iOS version, because that's sort of a holdback for people that are on older phones a lot of the time.

[00:12:01]
So you'll have to decide whether you think it's worth it. The min and min-width max-width works, but I've switched over completely to using their new range syntax these days. I just find it a lot more intuitive. A lot of developers are very happy that we have that now because it's straightforward. Like, is it greater than, less than, and then we go from there. I sort of talked about this before, but I still get the question, do we still need media queries?

[00:12:23]
I really do think they're worth adding in. We saw a few examples of why we do them. Just start with the intrinsic patterns, layer the other things on top of that in the situations where you think that you need them. And lastly, you might have a layout that you don't need media queries for the layout, but you might need media queries for other things. We're not going to get into these in this course, but media queries do a lot more than just look at the size of the viewport.

[00:12:49]
Some examples are first color scheme. You can detect the user's preference of their system settings. And so if you're doing a light theme and dark theme, you can have it automatically detected by the CSS. This is one most people don't know about, and there's a few different ones you can use, but you can actually see if the user has a mouse or not, with a hover hover, which just means like, can they hover, and then the hover means yes they can.

[00:13:16]
So an at media hover hover, it looks really weird, but it means they're using a pointing device and not a touch device. You can also see what type of device it is. The pointer is fine is a mouse. There's coarse, I don't remember what coarse is, but it's ones that aren't, maybe it's a TV where you can like drag a pointer around. I forgot what the coarse is. It's not perfect. Do a lot of user testing if you're using these.

[00:13:37]
I've heard of lots of issues. Some of them deal with like, is there a secondary device that is a pointer, and the browser's trying to figure that out, but you're relying a lot on the operating system to give the browser the correct information, and it doesn't always do that. So this is really cool, it can help you out to build a media query in for if somebody doesn't have a mouse versus if they do, but it's not perfect.

[00:14:02]
So please do test if you explore that anymore. You can look for the color gamuts of monitors, and there's a, this is the MDN article on it. Here's the full list of things that you can actually check for. It's a lot. So, a lot of them you're not going to bother with. The width is the most common, but there's a lot of other things that you can actually take a look for if you have a need for it. Aspect ratio is one you could actually use for if somebody's turned their phone sideways, to accommodate for some things there as well.