Hasty Treat - Container Queries Are Here

And may not match the final design. The syntax I use in this document may not be supported in the prototype, so she's showing off things in parentheses, My name is Scott.

Based on the browser size, not the actual size that the thing is.

So, yeah, that could my understanding of the status is that it's Still in flux. Even though it's in the browser, things are still changing and updating, and right now, it's behind a flag in Chrome Canary A huge clash. And then for those of you who don't have a visual, I just see on the left side of Wes' shoulder, a little dog poke its head out.

It was it was so cute. It was it was a very cute moment.

He just jumped into a box of pencils. Oh, he's laying on the ground now. There's T shirts and everything all over my office.

Allow you to apply CSS

components, They are in all the browsers, Jorge, can go ahead and use them. But, like, man, once they are in,

this is well worth your time to literally read through the entire thing. It's Long, but it's not, like, dry or boring. There's a lot here, and if you're a CSS head, this is, like,

generally at different viewport widths and heights. So, generally, you're saying, alright. When The viewport is 500 pixels wide or smaller or larger, then apply the CSS and rearrange things or make things look a little bit different.

And we've had to sort of resort to JavaScript where you check what size

is in the website and it is 500 pixels or Smaller, then I want it to look like this. Or when it's larger than a 1000 pixels, I want it to look like this. Mhmm. Currently, the only way to, like, target those types of things is that there are many ways for something to change size,

complicated in understanding with this is that In addition to per saying, alright. This thing will contain

if you, the developer, knows, alright, What is actually having to,

that will make these a little bit more clear. Yeah. And by all means, Merriam has a crazy she says that that in order for container queries to work in a performant way, which obviously, Okay. So our 2 sponsors for this episode are Sanity and LogRocket. Now LogRocket solutions for this. So I've just been absolutely dying for this to to come into CSS.

to watch these things? I assume what we'll we'll see once these actually get Into production is we'll start to see some best practices or maybe some rules of thumb, and make sure you sign up there. It's gonna get you double the free usage Cheer, and then just go to whole dev to check that out. Thanks so much to Sanity for sponsoring.

style, or paint. And I'm just reading through the MDN as to, like, each of these. And, basically, you're you're telling the browser, alright. Don't tax yourself out opens up the ability to even if you're even if you, like, don't think Wes, I'm never gonna have this wrapper

In the browser, by

Strict content, size, layout,

under the hood, as we say,

And you

all of the containment rules except size and styles are applied to the element. So that that actually, sorry, that does watch a lot of them. But there is all other ones like layout indicates that nothing outside the element may affect its internal layout and vice versa. So I'm assuming

can make it your website a little bit more performant you kinda are probably gonna have to wait until

just good luck. Who knows? I don't wanna I don't wanna hit on Safari here. I you know, I'm just concerned. I mean, this is coming for me from the guy who wants to use a cool new thing that's in canary's flags and knowing that it's not gonna be available for Everybody else for a a little while here. Yeah.

Before we can start using it, I think this is gonna be like Grid and Flexbox

that will add classes to your element Polyfillable, watching literally every possible thing that could change the size of this thing, and you can pass something like Content, which indicates that

and JavaScript companion

I do. I really absolutely do. I think that that's the way of the feature. Now, hey, Wes. I I wanted to quickly before we wrap things out here, are you familiar with, Jonathan Neill? Yes. Oh, yeah. He writes all of the, Yeah. Of course, he did. Right? I've only seen the future with my own eyes in the last hour. I have no idea how it actually works,

Probably. Because then you you you still have the the option of putting that component literally anywhere that you want. Yeah. Right. Like, so let's say I have a a a grid of demo. The thing looks really good. And then if you wanna try it out on Sanity,

It's a moment where you you feel very, very excited about the code that you'll get to write in the future, and, if you have Support Safari like we all do, then

A long time. That that's a good point is that this kind of stuff is not transpilable,

what a good day that's gonna be. Because, like, I even wonder, like, are we gonna stop writing so many media queries

If us talking about container queries doesn't get you excited, it very well may not. But the moment you have this use case or you have the moment about why container queries are really going to Change the way you write code forever in CSS.

and just do everything as container queries? Because that

in that

more than,

or, like, find the elements. I'm not quite sure what that will look like Alright. Let's get into it. CSS container queries are here. They're they're finally here. They look like they're at a spot now. What's the current status? Is it is it still in flux that could have changed yet,

like we said previously,

container queries once they're available? for sponsoring. And they say 14 days for free. I said 2 weeks. That's the same thing, just

not just a blog post. It's so cool.

Chrome Canary, So it's been in all of these for a long time. Of course, Our good old friend Safari is a big old fat, red. So, And that makes me so very excited. My name is Scott Talinsky. I'm a full stack developer from Denver, Colorado. And with me as always Personal intent to ship polyfill for container queries. Of course, he did.

is gonna be a great place for you to see firsthand when you're trying out some of the stuff. Maybe your container and You're gonna get 2 weeks for free. So thank you so much for LogRocket, in this Document here that might not even be implemented in Chrome yet or may very well be implemented by the time you're listening to this episode.

they have dropped out of nowhere into In of the latest Chrome Canary, as in if I mean, even, you know, several weeks before you're listening to this episode, if you were to have downloaded Chrome Canary, this would have been in your browser, Maybe even without you knowing about it. So it is existing, and I think it's existing behind a flag to work out the kinks, work out any sort of potential issues.

and the demo looks amazing. It's really cool because If you wanna go ahead and create a custom website that integrates Shopify with your ecommerce in it, you can use Next. Js. You can use Sanity for that. They created this thing called hull. You can go to hull.dev, browser, hey. This type of thing might change in the future. Like, remember, there was, like, in CSS, there was a wheel change property that got added to it, and I never

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

Monday. Monday. Monday.

are here, and we actually get to see the code, and we actually get to see them working In a browser already, which is super exciting. Yeah.

CSD. Oh, welcome to Zendesk. In this in this container y hasty treat, we're gonna be talking all about CSS container queries, AKA element queries,

kit That uses Next. Js Insanity,

is Wes, Boss. Hey. I'm excited that these And its contents, as much as possible, are independent from the rest of the documentary. This allows the browser recalculate

which is the perfect place to actually see

Boss, and Scott

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

It's already a green it's as in this is available in the it's been in Edge since version 79. It's been in Firefox since version 69, Three columns, But from my understanding,

really got into any of those I have. Types of things because, like, for me, I never had those issues, and and when I did, adding them never seemed to do anything.

is just auto. Right? It's not like it you provide it some, like, weird thing. You just say, alright. Auto, when when you need to scroll into it, then go ahead and start painting that thing instead of doing it all immediately. So that's pretty nifty. Yeah. So the, CSS property, CSS contain property.

if the left to right, if this thing is wider than 500 pixels, Without a a container query because when everybody was doing hip hop, hip hop hop, you know, and then, you know, it was all Sugarhill Gang, and then all of a sudden Eric b and Rakim came out with Follow the Leader, and everybody blew their minds. I know about that, Scott. The birth of modern modern rap styles.

to maybe as fast. Like like, not obviously, there's there's much more to it, but, like, couldn't the browser detect that you're trying to do the same thing? And, that is often what happens. And and in this case, the content visibility

that pretty much says it all. If the inline dimensions of this thing, if we're talking left to right, Yes. Yeah. Miriam was responsible for Susie, So what I understand reading this post, Hopefully, it gets enough momentum that the Safari devs try to implement this. So either way, CSS property contain is already been available for quite some time. I've never used this thing. Maybe it's worth a deep dive into understanding CSS contain a little bit more. Either way, so they said that you need to specify that it's is going to be a container so that it's performant. But then after that, the syntax is really simple. In fact, if you've used media queries at all in the past,

layout style paint And any combination of the thing. Okay. So this is one of those things where you sort of have to, like, think ahead to possible issues and apply some CSS to it, Telling the I had dinner with her once at a conference, and lots to learn lots to learn from her. So, yeah, we'll have her on talk about there's So much. I'm sure she knows about CSS. So, yeah, CSS layout master. I I I pinged her, so we'll we'll see, if we can get her on. Yeah. Maybe not.

But, like, what what was the issue you're running into that you needed to use this? It was animation, basically. We found some of our animations to Run smoother, but I think at the end of the day, I think Framer Motion implemented some of the stuff in the back end, so we haven't really thought about it too much. Yeah. But it it was for specifically getting, higher performance animations, 60 FPS, those types of things. Another type of thing that this reminds me of would be the,

but, will have motion or what I'm sorry, whatever it was and as well as this. I would imagine those things Probably are a little bit more difficult

and then the parameters that you need to determine if it's The right size. So if you were to saying at container, inline hyphen size is greater than 500 pixels,

who knows when any of this stuff will be available in Safari, maybe in 2025,

property using these size and layout values. So their example here will have code in the the show notes that says the container class She wants people to try it. She wants people to to play with the demos and see if they can find anything that's weird about it. Her blog post On CSS .odbird.net, but I must.

Like I was saying, when you have something like listening for individual element sizes, Taught the interviewers about Susie in my job interview, and they were like, I've never seen any grid framework. Like, this is just crazy.

on their layout or queried dimensions. This can be done with the existing

I don't know the specifics of how browsers work in that regard, but it says for containers to work in a performant way, Authors will need to define container elements with explicit containment

Now have you used the contain property at all before? I'm just trying to look it up. Like, what is it 4? I don't let's see here. What's it for? Right. The CSS contain property allows authors to indicate that an element

fire off when events change. All the cards are having to be updated and manipulated via JavaScript in the browser. There's a lot of potentials there. We've had memory leaks in the past. I've used all sorts of different,

Observed.

and you could do it with resize observer. I had a conference talk where I showed how to do that. Mhmm. But now Now we are in a spot where we don't need to do a JavaScript. We don't need any hacks. We just can say, this is a container Now the problem that we run into is that we're so gung ho on making

without container queries or element queries, that's just about impossible to do based on browser size, especially when you have those cards in a grid of, let's say, 2 or 3. Right? Because Wes, did you ever use Susie? Has a property of contain and the values of size and layout. So they're basically saying this will be essentially a container that needs to have its dimensions you will rejoice Because there's nothing fancy about this syntax at all, it's at container, and you could say, alright. Well, that's a it's always going to be 100 width percent, but let's say Let's say, like you mentioned, maybe, actually, we wanna all of a sudden use the same grid with the same CSS in a, Jonathan Neill 3 days ago tweeted, in all language modes or document modes. So, yeah, I I think that's what's nice is that it does support the logical and the explicit properties, In a browser behind a flag,

and those cards CSS container queries, layouts, a whole bunch of, like, really common use case stuff that you can see in action. And one of those is Oona from, the CSS podcast,

the font size of the card, the logo size of the card, the dimensions of the card itself, Those And so that led to To me, like, sitting down and being like, okay. So what you do is this and this, and look at how nice this is. And, I ended up getting that job. So Shout out to Miriam, who's probably saved my my bacon a couple of times here with some awesome code. Yeah. I was just just talking to Scott, and I was thinking we should have her on because, And let's jump into it now. Like, how do you actually write that CSS, Scott? Yeah. Well, let me even give you before we do that, I'm gonna A good example of it, like, a component that is very obviously this document is

In my experience with Resize Observer, something that's maybe 60% of the width wide, you could just drop it in there and not have to think about it at all. You wouldn't have to update your CSS. It suddenly becomes that much more responsive. So Do I think I will use primarily

of the element is, and then you apply a class or something like that, I guess, you could probably use

to get looking good in every single browser with

then you'd probably have to have just about a 100 media queries to finely tune those at every single browser width. Not to mention that if you were to use that card in the 2 column layout or elsewhere on the site, all of those benefits just go out the window, and it would lead to a whole mess of CSS. Listen. What we ended up implementing was something like what you were talking about with Resize Observer.

are almost impossible

that I want to style differently based on its width, height, or both.

let me tell you, it seems like she has done a flurry of of of work to get this moving, and this is one of those features that I think of the occurrence take place along with the network tab console log and Any of those other things that you're used to having when debugging problems in your own local host. So check it out at logrocket.comforward/syntax,

which is a really wicked making sidebar components and footer components and, Like a course display component, and you we wanna say, alright. When this thing

which was how I first and it's been in Chrome since version 52.

is going to change the way that just about every single developer writes CSS. It's so amazing to see this kind of progress being made on it. Also,

Was familiar with her work in general. I did Susie tutorials back in the day, and, actually, Susie might have been responsible for me getting one of my big jobs because I the content visibility auto, are you familiar with that? So content visibility auto, like, skips rendering and painting

you You literally just sign in to Sanity

Sick. 1st and foremost, I want to thank Miriam Suzanne So Jonathan Neill could be our our savior once again with the polyfills, so that would be really, really sick if that could happen. That would be Really, really cool. Man, this this is like one of those, like, next level things. This is Flexbox level, adjusted some code, and all of a sudden it hit a button. And the user can't find the button, and they click something else, and your site broke. And How are you gonna debug that? Well, now you can debug that quickly and easily with LogRocket, which is her site query explainer, chrome colon forward slash forward slash flags, which is the experimental features Page of Chrome, if you've never been there. It's a neat place to play around with a bunch of cool stuff. In fact, I I go in there from time to time just to see what people have put in there. Like, Uh-oh. What are they working on? What are some neat features that I can just goof around with? Right?

Well, actually, let let's say that then. Okay. If you would like to try this today, here's what you do. You download the latest Chrome Canary. If you already have it updated, If you don't download it, head to

she put together a really nice

code pen.

and it's a whole bunch of stuff like Flexbox cards, So on the note of a polyfill, How your things happen when they go wrong. They give you a scrubbable video replay of any errors and exceptions that happen on your site. So that way, When you are debugging it, you're not left with just guessing. You actually get to see the video

media query verse container queries code pen That we've also linked here directly that's in Miriam's this is gold for you to to poke through because I I really like you know, it's like When, like, tech bloggers, they get, like, a a little blog that's, like, a leak about some new iPhone, and they're like, okay, folks. Let's go through this line by line. Like, I We should do that with, because there's a lot of gold hidden here.

has collected here Showing off the features of container queries with this syntax, Then the following CSS properties will come into effect, which is basically if you use media queries, you're just replacing media with container And bingo bango. All of a sudden, you're thinking about container queries. I think one thing we skipped over was when you set contain, you have to set either

good code pen collection of code pens that if you are using a Chrome Canary for All of the work she's done on this because,

And then you search for CSS container queries. You enable it. You restart the browser. Then we have a couple of links here in the show notes, one of which is a collection of code pens that Miriam, We should leave that in. And because I could hear that on on my headphones, which means you y'all could probably hear that at home. Wes asked me a question, and then perfect comedic timing, could be benefited from something, this would be, like, our on level up tutorials, we have cards. Those Cards maintain a specific aspect ratio,

And this stuff is the perfect place, I think, to dive in and see how this stuff works. Because

CSF. Head on over to syntax.fm all are based on the size of the card itself. Right? If you have a little card, the font size should be small. If you have a Card, the font size should be bigger, but, unfortunately,

or CSS Grid level change to the game. Yeah. Absolutely. Yep. This is like when, and can go ahead and deploy a demo both to Sanity as well as to Vercel. So you're looking to do online store. Check it out. Just go to sanity.i0forward/syntax, width or higher or inline size or block size. Like, basically, you're saying, This thing should be watched when its width or height changes. Mhmm. You can additionally supply any of these CSS contained values, which is

polyfills and and whatnot for CSS.

for a full archive of all of our shows, and don't forget to Drive in your podcast player or drop a review if you like this show.

Yes. That's very similar to this.

Or, apparently, from reading this blog post from Miriam, they will also support width and height. Remember we did that show on CSS logical properties? The idea with using the words inline and block instead of width and height Like, anywhere else except in a a 100% width of my thing. Like, would it still make sense to write the entire thing in a container query? Make sure we're we're covered there 14 days for free. Our other sponsor today is Sanity. You know Sanity. Sanity dot I o, structured content CMS. I wanna talk to you about this really sweet thing they just dropped called Hull. It's a Shopify starter Alright. I think that is is all we've got for Today, let us know your thoughts on container queries. I'm pretty stoked for it. Let us know if you build anything with it and tweet us at syntaxophone. We'd love to see your code pens. Yes. We wanna see it. Please give it a try. It it looks really neat, and I can't wait to try it myself a little bit more. Alright. Thanks for tuning in. Catch you on Wednesday. Peace. Peace.

you know, in over the next 10 years, over the next 5 years are gonna you the the The usage of those inline block verse left, you know, with height sort of situations are gonna come in to be way more in in vogue in CSS just as More people find out about them because, you know, websites

probably shouldn't be constrained to left, right, up, and down. Constrained, that's not how Every culture or every site should be read. You know? Yeah. I think the one thing that will be Until the content is actually needed, and this type of thing you might not notice with the iTest. Oh, I saw this on Twitter this morning. Wow. Adi Hasmani posted it. So shout out to Adi. If you look at his Instagram post, he shows basically that the amount of time is Available to you in the rendering and painting sections in the Chrome developer tools. So, like, it shows a pretty big significant improvement in the rendering and painting aspects, And I wonder if some things like this contain My understanding is that she even says this is a draft prototype He got, you know, 80 or 90 cards on a page sometimes. That's a lot of cards, but okay. Let's say you have you let's say you have 20 cards on a page. They're all using resize Server, that's a lot of JavaScript kinda just running all the time to

some languages don't read

is because And Scott and I are just going through how to actually use it, looking at the demos, and writing a little bit of code, and I'm just like, oh, this is really simple. So simple. This is so simple. I totally get it. We're gonna be able to explain it in this podcast really quickly, and it just goes to show of, like, how well this I think this thing has been done. So let's get on into it as to to how it works or maybe even just really quickly, like, why would you want a container query? Because we have media queries right now, which will

Left to right or right to left, they read top to bottom or bottom to top, and that allows you to write CSS that will be applicable where the final API would like to be. Yeah. I agree. I it's funny because this this maybe there will be some sort of, like, CSS Transpile to assume that they're working with just the iTest alone and and probably need some, like, metrics or data behind it. Yeah. This is one of those things that I could see them turning on by default eventually because the thing with, like, some of these, like, where you have to, like, Make the performance good by adding these random attributes is sometimes I think, like, like, why doesn't the browser just do that for us? Like, why can't it figure that out for us? That that's what happens a lot of times in JavaScript world where they're like, this way is slow, and this way is A 1000 times faster, so always use this way. And I'm like, well, if it's if it's slower, then why don't the browser just, like, fix it,

In line size, which is the width Mhmm. The block size, which is the height, the size, which is width and height,

Scott? Container queries has so many edge cases with the looping and whatnot, and it's been a long, long, long time coming.