 Hello and welcome to the CSS podcast, where we break down what's happening on the web platform for CSS and UI. We've got a short one for you today, which is more of an FYI, but it's a nice ergonomic improvement to a feature you're probably already familiar with, media queries. Did you know that media queries are used on over 80% of websites according to the HTTP archive? They let you adjust styles based on the size of the viewport. You can use min widths, max widths when you're setting these media queries. You can do something like at media space, open parentheses, min dash width, 400 pixels, and parentheses. And then in curly brackets, it'll let you apply styles when the browser window is at a width of 400 pixels or larger, minimal width of 400 pixels or larger. While at media space, open parentheses, max dash width, 400 pixels, and parentheses start the curly brackets. Yeah, I'm doing that that fast. That lets you apply styles at 400 pixels or smaller. We also have an episode all about media queries, and we're talking about page-level media queries here. That is episode 32. So if you want to learn more about media queries, we go into depth about how to use them, when to use them, and why you're using them. But so many of you are already using them. You can also set media query values in between two sizes using the AND combinator. And that might look like at media and then in parentheses, min width, 400 px, and then in another set of parentheses, max width 800 px. And then you have your styles in there. So this would let you then apply styles if the viewport was in between 400 pixels and 800 pixels. Yes, but that got a little long-winded, didn't it? There's a streamlined new syntax, which is pretty much what this whole episode is about, for these types of queries with the media query syntax level four specification. The new range queries, that's their cool official name, are currently supported in Chromium 104 plus and Firefox 63 plus. Yeah, Firefox has had these for a hot minute, that's for sure. Oh yeah, a long time. But they have not been implemented in Safari yet, but you can poly-fold them with post-css using the post-css media-minmax plugin. The new range queries can be written more succinctly using the less than, less than or equal to, greater than, and greater than or equal to operators. So instead of at media, min width, 400 px, you could write at media with greater than or equal to 400 px, which is a lot more clear. And for max width, you would write less than or equal to 400 px. Instead of at media, and then parentheses min width, cold and 400 px, and parentheses max width, cold and 400 px, you could shorten that to at media in one parentheses, 400 px less than or equal to width, less than or equal to 800 px. And this is just so much cleaner and easier to read. I'm sure as I'm saying it, it still sounds complicated, but it makes so much more sense when you see the ranges in front of your eyes. And you can also use less than or greater than instead of less than or equal to, and greater than or equal to if you don't want to be inclusive of the boundary values. Yep, I think of this a lot like, this is how I write my JavaScript, this is how I think about comparisons. It's how we learned math, right? These are logical operators we're very familiar with, and there even has a little superpower in this kind of hidden, which is that greater than and equal to or less than and equal to, which means you're not just doing like min width, 399 pixels, so that it's 400 pixels and above, and some junk like that. This is much more specific and streamlined and shorter, and it's overall beautiful. And it makes sense. This streamlined range queries syntax is supported in new query types and APIs like container queries. So you could write at container colon min dash width 400, or use the new range syntax and say at container inline size is less than or equal to 400 pixels. So you get to use that nice little logical operator. And now we're testing against the inline size because we're in container query land, which is the width in Latin languages. And checking that is less than or equal to 400 pixels. For more media queries, as I mentioned, check out episode 32. And for more on logical properties, we have an episode on that as well. I feel like I'm always sending people to that episode. Which one was it? Logical properties. Episode 12, season one episode 12. That was a while ago. Nice, that was. Also in episode 33, we dive into preference, queries, and teach you how to get even more customizable with your user driven CSS styles. So this podcast is just one of those books that you read and then choose your adventure. Those like goosebumps choose your adventure books. Nice. There's just so much to do. And to learn about container queries, we have got your back there to an episode 59. So now that you've chosen this adventure, choose your next adventure and your next podcast episode. But very nice. That's all we have today. It's a short one. But as always, thank you for joining us. If you have any questions about range syntax or anything else about CSS, we'd love to answer those questions on the show. Just tweet us with the hashtag CSSPodcast. I'm at UNO, that's at UNA. I'm at Argalink, A-R-G-Y-L-E-I-N-K. Your question, it can help a lot of people. And while you're on your choose your own adventure for the show, please give us a review on whatever podcast app you're using. It only takes one to five minutes and it helps people discover the show, but also helps people discover the show is sharing it with your friends and coworkers. So that way more people can be aware of all of these fun changes in CSS world. Yeah, good call. All right, well, thanks y'all. Holler at your pod. We'll see you next time.