CSS Container Queries, Layers, Scoping and More with Miriam Suzanne

Welcome to Syntax. This is the podcast with the tastiest web development treats. Rid. Today, we have Miriam Suzanne.

On today, we're gonna talk about all kinds of things CSS, but, most importantly, I think we're gonna talk about container Queries as well. Today, we are sponsored by 3 awesome companies. First one is Prismic.

They are a hosted headless CMS. Make it easy to create all your content types and spit out API the other end. Sentry does error exception and performance tracking, And RevenueCat is a subscription platform for mobile apps. We'll talk about all of them partway through the episode.

Hello, Miriam. Rid Hey. How are you? I'm pretty good. Thanks for coming on. I really appreciate it. Yeah. Thanks for having me. You wanna kick it off there, Scott?

Yeah. So rid We've had we talked about container queries a handful of times on this podcast, and Wes and I are both just Over the moon. Excited waiting for them and trying them out and all those things. So, I thought it would be a perfect idea to have an expert on the show to talk all about container queries. Oh, when are you gonna do that? Right this 2nd, so I hope you're prepared. We're gonna absolutely grill you, Noah. I'm I'm very excited because we took a look at your Proposal, we've we've tried it out. I even played with the polyfill that Jonathan Neal put together, and, I think it's just absolutely ready to start diving into some of the the the details. I so first and foremost, Wes and I, extremely stoked, and I I don't think we can express to our audience just How groundbreaking and changing this will be for your applications overall.

We talked about this maybe a year or 2 ago about rid. Being one of the most requested features in CSS, and it kind of just, at that time, felt like it was hanging out limbo. Nobody knew where it was or what was happening with it. There were rid Not a ton of proposals. They were just kind of ideas floating in the ether.

So when did you come on board with the container Queries. And where had it been sitting for that whole time essentially before you had jumped into it? Yeah. So, I mean, everybody's been talking about this since, I don't know,

2008,

something like that. Yeah.

Since media queries. Yeah. Yeah. And the the big rid Problem is that you have to stop it from causing some sort of loop where you measure something and then you change it based on the measurement, rid And then your measurement's wrong, and you have to remeasure and you can sort of keep doing this. And, I think it was beginning of 2020, both David Barron and Brian Cardell came out with different paths forward.

And, actually, I think a precursor to that, rid Browsers has started to implement containment, which was partially intended as a step towards this. If you look at the containment syntax, It's kind of like, we don't know how useful this is unless we can do container queries. It might let us do container queries. That would be the goal.

Rid So Brian and David had slightly different approaches.

David's is the one that I built on top of. Rid Brian's was a switch proposal, which was sort of in line on an element itself or on a property itself. That's kind of powerful because you can actually measure available re based right there, but then it's also restricted because it can only apply to certain properties at certain times. It's sort of like rid Playing into how the browser engine works to do some magic with some then confusing limitations.

So they had both put forward these proposals, and the idea was, well, rid Play with them. Prototype them. We need to see what works here.

But then I came on board right when Google was saying they wanted to start rid Prototyping David Barron's approach, and I made a few suggestions on how they could adjust it slightly And then wrote up my proposal from there. So that was end of last year. Wow. And, I was rid Shocked at how quickly there was a prototype. And then there's still lots of things wrong about the prototype. Right? I mean, they basically just took media queries as they were And we're like, what if we apply this to containers? Boom.

But it worked so well even that 1st draft, even with None of the features

quite finessed exactly the way we want them. That's amazing. Like, I'm just looking at the the time stamp of this, and this rid was what? December 15, 2020, so not that long ago. And ever since you did this, it's just been, rid Like, full go. You're hearing all about it. We're having podcast episodes about it where people are writing polyfills for it. So, like, Are you part of the CSS working group, or are you just, like were you just sitting there one day being like, you know what? Like, this has been around forever. Nobody's doing anything. Rid I'll figure it out, I guess. Is that what happened? No. No. That's not what happened at all.

Okay. I joined the CSS working group rid Also beginning of last year, so right around the time that, David and Brian were proposing these things.

And I was invited in because I had made this CSS layers proposal. Rid And the group said, yeah. We wanna move forward on that, and we want you to write it. So then they brought me in. But I was doing it fairly part time, Just as much as Oddbird pays me for some open source work, so I was sort of doing it on the side in addition to client work. And then Google came along and said, we have a fund for funding open source work. We would like to see container queries, scope, and cascade layers rid Happen more quickly. Can we send you some of this fund and have you spend more time on it? Oh, awesome. So I said, Wait. You want me to work on the 3 hardest problems that CSS has dealt with in years?

And this Google being like, yeah. Hey. What say, yeah. You know Google? Why don't you do it, Google? Yeah.

Yeah. So since September, it's sort of become the focus is just working on what's what's coming in CSS and rid What sort of stalled for various reasons? I mean, it's it really is almost volunteer work for a lot of people. Rachel Andrews calls it, you know, the rid Most expensive hobby you can have joining the w three c. Yeah.

So things can stall out for a number of reasons because it is rid That's sort of unpaid open source work often for people, so it's a real privilege to get to come in and and get paid to do some of this and,

help keep some of these things moving. That's awesome. So what is this other thing you're talking about? CSS layers?

Yeah. Cascade layers, Which we're still bike shedding the name, but otherwise, the spec is actually pretty solid at this point.

And the idea is giving authors a way to define their own re We spend most of our time dealing with specificity as authors. Yep. That's the part of the cascade that we really interact with the most. Rid And there's 3 main layers to specificity. There's the tags, the elements, which have the lowest specificity, and then there's Classes and attributes, which are next, and then there's IDs at the top. But tags, we don't get to define tags.

So they're somewhat rid Limited in what we can do. And IDs, we're only allowed to use them once on a page. So, again, they're pretty limited what we can do. Mhmm. That means we spend most of our time in this single layer of specificity, just fighting over how many classes and attributes we're allowed to select on.

And I thought, Okay. I like this idea of a cascade, and it's a pretty smart, clever sort of heuristic we've got set up. But what we're actually able to control is very small.

What if instead of getting rid of the cascade the way that a lot of people are doing, What if we went the other direction and gave ourselves more cascade and more control over it? So layers are that.

Harry Roberts has this inverted triangle visualization for organizing CSS, and he breaks that down into layers.

And it's not a new idea, but it's a nice visualization of it.

And I thought, what if we could actually just take these layers that we're making in our CSS rid And make them explicit.

Resets are sort of a bottom layer, and then we get defaults. And then we rid Add maybe a framework or a theme or something, and then we add components on top of that and being able to Name these and say components should always override themes or vice versa. Oh. Let's control it. Wes, do you have the, w three page open for this? It's pretty neat. I don't. Do you have it? I'm just trying to visualize.

I'll paste it to you in a if you Google cascading layers, it gives you mostly Hairstyles.

So here Yeah. Me too. I was like, wow. It's like beautiful ombre.

Yeah. Beautiful.

Ombre.

That's great. What did you send over? Here we go. It's pretty neat. I've never heard of this. I don't I don't know why this is in my my radar at all, but this is pretty neat with the atlayer.

And you can name layers, have them nested.

With all of the neat stuff coming to CSS, it feels like CSS is Turning into this super language where you're having element queries and nesting and all that kind of stuff that we're used to Sass. And, Oh my gosh. I I can't even express just how much CSS variables have changed my my development process in general. So, rid Man, CSS is getting wild, and I'm here for it. I'm very here for it. This is really cool. So it's like you would be able to define

different Levels of specificity in your application, like you said, themes, defaults, frameworks. You did it on purpose. Right?

Can you clear this up? Did you intentionally mispronounce specificity?

Did I? Oh my gosh. That's like a thing that's like a thing for our audience that they're gonna rid Specificity. Butchered it. I can't say it. I can't say it. How do you say it? Specific

specificity. I got it. Yeah. Okay. Rid Specificity.

Is that right? I can't hear the word.

Okay. Alright. Anyway Yep. You go ahead and re Describe, like, these different levels of specificity in your application, and then they will just easily overwrite them. You don't have to spend your days Fighting different layer. How would you declare what a layer specificity is?

So the layers stack in the order that they're, introduced, and then we have a way to sort of, at the front of your document, rid. List out as many as you want in the order you're gonna want them so that then after that, you don't need to worry about what order you're

actually adding code to them. Rid. They'll always they'll always stay in the order you declare. Oh, this is so cool. Yeah. So there's, like for those in the audience, it'll be, like, at layer default, Atlayer theme, Atlayer components, and then that is at the top, and it's defining the order in which that specificity. I'll post

rid A quick little code snippet into the the show notes here. Yeah. And you can even there's a comma separated syntax then for rid. Merging all those together into 1 declaration and saying just all layer defaults or reset defaults theme, rid Etcetera. You can Oh, man. Set that up at the beginning of your document. And I hope this also helps with, you know, all the frameworks right now sort of load rid Your component CSS in random order, so then you run into ordering problems all the time.

And then they add scoping to sort of solve that problem, but, I'm hoping this also solves it. Right? You can sort of set up the order that you need at the start rid And then let the CSS get loaded however it will, and the layering is already established. I'm just having

I'm just having, like, flashbacks to trying to overwrite, like, Bootstrap styles and just Adding more classes or add like, oh, the class selector didn't work. Put div dot in front of it, and then it'll work. Right?

Yeah. Exactly. And I think that's a That's a big part of this. I mean, I'm hoping it will work also for teams just working internally to be able to make sure that they're setting up the layers they want. But rid. Especially when you're pulling in third party code, they're following a different set of, I don't know, naming conventions, guides than you are. They're not gonna do it the way that you want them to Yeah. Necessarily.

So this allows you to say insert Bootstrap here above these rid styles of mine and below these other styles of mine.

This is the proper place for Bootstrap to fit in my my specificity order.

Wow. Rid Do you wanna actually just give us a quick rundown of your background and how you are able to solve the 3 hardest rid things in CSS as well because, like, man, it's amazing that you can just come in and and figure out some of these super hard things that have been

Being thought about for so so long. Right? Yeah. I mean, a lot of them have, in some ways, been solved already in or or parts of the solution are out there. Rid I didn't come up with anything terribly new all on my own here. Mhmm. I really built off of David Barron's proposal for the Container queries and scope is really designed around sort of how Vue is doing it, and that comes out of CSS modules. So there was a lot of Prior work there and a lot of discussions on the w three c. In cascade layers, I just sort of came with this idea that, like, what if we had more And worked with the group to figure out exactly what that would look like. Oh, yeah. So I wouldn't say that I've come in and solved something that couldn't that couldn't be done before. Re So when you invented the browser Yeah. When I invented the browser,

it was way cooler.

But, yeah, my background is is mostly writing HTML and CSS for clients. I mean, I've been doing this since 2007, 2008, Freelance and then starting an agency, hot bird.

Early on, I was using in 2008, I saw this talk by Natalie Down called CSS systems.

And I loved it, and I loved her system. And it was before media queries were widely available, But she was doing all this great stuff that was, like, responsive already before we had responsive web design trademark. Mhmm.

But it took a lot of math. Rid. And so in 2009, I saw that video going around about Sass, this new thing that would let us do math in CSS.

Rid. So I sort of made a made a little calculator in Sass called Susie.

It was like a grid calculator.

And then maintaining it. I learned everything I know

from other people complaining about what I had done and How I could make it better. You know what? Susie is, like, game changing for me because what it did is, at the time, most of the grid frameworks that you had because we didn't have Flexbox. Rid. We didn't have Grid. We didn't have any of these things to do a Grid, so you typically used 960, o Omega Grid, any of these Grid frameworks. And, they usually worked by Adding a lot of classes, whether it was Bootstrap or whatever. You'd say, like, m three dash one or whatever to say this is takes up 3 columns or something.

And Susie came along, and it basically took that out of writing utility classes on in the DOM into rid We're essentially mix ins or functions in your SAS code where you could just say this particular item takes up how many how many grid rid. Grid spots and where does it start. And to me, that was such a huge game changer in terms of how you wrote CSS Grid, and it it feels a lot more like CSS Grid than any of the other things that came before it. And I have you to thank for for me getting my job at Ford, rid because when I did my interview at Ford, they were using Sass already. I started talking about Susie and how much I loved it, and they were using Bootstrap, they're like, what is the Susie thing? So then I I, you know, pull up my I'm like, check this out. Okay. Sure. Check this thing out. And they were infatuated with it. So, I largely have you to thank for for me getting that job because That's great. I I got to teach them something in my my inter interview.

That's lovely. I'm glad to hear it. Yeah. And, again, it's sort of like I didn't invent I didn't invent the way of doing grids, and I didn't invent Sass. I just sort of I put them together before anyone else did.

And it was a nice re API, which will go a very long way into making the experience work super well. Something else that's going to work Well, it's an experience for both you and your clients is one of our sponsors today. It's Prismic.

Wes, you wanna talk about Prismic? Rid. Yes. I do.

Prismic is a content management system. It's a tool for editing all of your online content. So the way it works, you sign up. Read. You don't have to write any code before you can make all of your data types, and you can create relationships between them. You can create these things called rid. Slices, which are little groups of input that are associated with a piece of content, and you can sort of click them all together to to build out your website. Rid. It is awesome. Out the other end, it gives you a either a REST API or a a GraphQL API, which is good. It works with Next. Js and Gatsby rid. Be in literally anything you want that they have some really, really good starters. So check it out for your next project rid at prismic.ioforward/ syntax.

They have a really funny landing page there as well as a link to a bunch of the starters we rid Talked about. Just check it out. Prismic.ioforward/intax.

Thank you, prismic, for sponsoring.

Cool. Alright.

What else do we we have all kinds of stuff that we wanna talk about here. It's it's funny. Like, as we start talking, I just start writing notes and and things I wanna touch upon. And Our our notes have gone doubled since we just started talking 10 minutes ago.

I think let let's talk about rid. Container query is a little bit as well for for anyone who is, is brand new brand new. Do you mind giving us, like, a a quick rundown of both rid What they are, how they work, and, like, may like, why do we need them

even if we already have media queries? Yeah. So media queries allow us to measure the of the viewport, sort of the outer edges of the window, and make changes to anything inside of it based on the size of the window. And the reason that works is because when we change things inside of the window, it doesn't change the size of the window.

But often in CSS, that does happen. If you have a re component and you change the size of things inside of it, it's sized not just by its context, where it is on the page and rid forces, but it's also sized by his children. CSS has this sort of back and forth negotiation, which is Part of what's so powerful about it as a language. Right? That doesn't happen in InDesign where it's able to size both based on Parents and based on children.

So container queries are this idea that sometimes we have an element and we want it to look different when it has a different amount of space, rid But the viewport doesn't really tell us if it has a different amount of space. The viewport is staying one size, and sometimes this component is moving. Sometimes it's in the sidebar. Sometimes it's in the main area. We throw it in a grid. Suddenly it gets smaller or bigger in unpredictable ways.

And what we really want to do is measure rid The space that it has, wherever it is, and then style it based on that space that's available.

Rid And container queries allow us to do that first by establishing a container.

And the container has some rules that are basically, re Okay. We're only gonna style this element from the outside. It's gonna ignore its children, and that cuts off the loop. We don't have a looping problem anymore. We've established a container.

It's set.

Its width comes from outside.

And then rid We can for anything inside of it, we can write container queries, and they look exactly like a media query, except ready. They measure the container instead of measuring the media viewport.

And that also comes with some advantages like And this is not in the prototype yet, but, we'll be able to measure actual font sizes where on the when we're measuring the viewport, we're measuring rid A font size before our styles apply. We're measuring the user's default font size setting coming from the browser. Right? So m based media queries are assuming 1 m is 16 pixels consistently.

When we're measuring an actual component, we can actually measure the component.

Mhmm. And it's an element on the page, and you can click on it in your dev tools and re see the same measurement that's being returned by the container query. So that'll allow us to say, take a card design that needs to go vertical in a small rid or horizontal in a large space and just tell it to do that and then put it wherever we want. It measures its container and Lays out vertical or horizontal based on where we put it. Nice.

It really seems like the contained CSS property really broke open a lot of the barriers that were there. Like you said, the the big problem was that when you have something that changes based on its size, It changes size. There's a potential for infinite looping and and just kind of feedback loops. So the contained property, I found to be pretty fascinating, and I hadn't heard of this property before your proposal.

So can you give a little bit of background on contain when it was added, what it was added for. I know you kind of said that already, but there's some kind of interesting use cases on here on the Mozilla docs, the MDN docs that I'd never seen before. So could you give a little bit on on Contain itself?

Rid Yeah.

I'm not actually sure exactly when it landed. I mean, I know that in part, it was added for A couple things. I mean, it can help performance in other ways potentially because it isolates the section of the page and says this section of the page is not going to Influence the things around it, and then that allows us to do some lazy rendering of it. Right? If it's not gonna impact anything else on the page, Maybe it's off screen right now. We don't need to figure it out until it's coming on screen.

So there's some performance issues That it can solve. But then a big part of it was planning ahead for container queries. We're going to need something like this in order to do container queries.

Rid. So let's build it 1st, make sure it works, and then we can do container queries on top of it. So a big part of why container queries are happening now is not because I Came along, but because containment started landing and it's not everywhere yet, there's a good reason you haven't heard of it. It's because it's not Totally available everywhere because some browsers weren't sure how useful it would be. And now they're more interested because we have a use case that's very clear rid that people want.

So, Lew, what does the contained property like, how does that relate to container queries. Like, how how do how do you use contain with container queries? Is it the way you were mentioning earlier about you mark something as this is the thing that we're watching?

Yeah. In order for container queries to work, we need to contain the dimension that we're going to be measuring.

We can also contain both dimensions. But in most cases, we're gonna want 1 dimension to be able to flow. Right? Set a width. But then we want Like Like width or height or or in line or block? Yeah. Exactly. Yeah. Okay.

So we're gonna need to contain that dimension. We're gonna need to contain everything about the layout. Rid The values of the contained property currently sort of tie into the cycles of the browser rendering engine, which you can go down this rabbit hole rid sometime if you're interested, but the browser engine does style first, which is sort of attaching styles to different places, running the cascade, And then layout and I don't I'm not an expert on the browser rendering engine, but all the values you see here are sort of the steps in that process. Rid Style, layout, paint, size.

So what we're doing is we're saying the browser engine can, for this We're probably gonna add some new syntax there because right now we require you to add size containment, layout containment, and style containment.

But we don't want that as the API for this. We don't want everybody to have to remember these

3 values that you have to add to then create a container. Yeah. That was kind of a barrier for me when I was looking at that. I was like, okay. So which one of these do I button to get it to work?

Yeah. I mean, we we weren't sure exactly what values we would need. We were exploring that, so we didn't come up with the syntax right away. But rid Working on that now. So I don't know what it will be exactly, but you say, contain query target. I don't know. And then that becomes a container that you can measure with a container query. Okay.

So do you put the contain property on, rid Like, let's say you have a card, and that card is being shifted.

You put the contained property on the card itself or on the card's Container.

I think both will be useful. So you can put containment on, like, the sidebar in the main area and think of these sort of larger layout containers.

Rid And that's useful.

You can put anything inside of them, and they'll measure the sidebar or they'll measure the main area.

The container has to be separate rid from the elements that are measuring it. So it always has to be an extra wrapper. You can't the element can't measure itself. Oh, okay. Because that would give us loops again.

So you can have an extra wrapper on the card element itself, re If you need it to sort of go anywhere and respond to its own space, you can do that with an extra wrapper.

But rid. The container always has to be separate from what's querying it. Okay. Cool. Yeah. So that's kinda how we're we're right now, we're using Resize Observer on our side to do container queries, and that's the flow that we're we're already used to with that. So that makes total sense. So if I had, like,

Like a grid, and you've got your your classic web development content sidebar, 7525.

Rid. You wouldn't need an extra element to measure the sidebar to know how big it is, would you? Because you're not sizing you're not explicitly sizing the sidebar. Right? Rid. Wes, you would give the sidebar

the contained property,

and then the items inside of the sidebar, you would measure. Yes. Rid That that's what I'm thinking. Like, if you wanted to size the header or, maybe you had some photos inside the sidebar, you wanted to size them appropriately based on the width. If that's the case, then the the sidebar would be the the contained property and then the items inside of it. That's right? Yeah. Yeah. You can do that. And, I mean, you can also have components that sort of carry their container with them like Scott was saying before. You could have a card

component that Has its own container around it established.

You could do either or, and you could mix the 2. It's so cool. It's so cool. It's my dream. It's all my dream. What's mind blowing to me is that it works.

I mean, I sort of assumed, you know, we're gonna prototype this. It will take it will take a while before we see something useful, and it didn't.

It did seem like it just popped up out of Out of nowhere because there was, like Wes and I, we had just done a show on. It's like, will we ever ever ever see container queries? I have no idea, and it's like a week later. Yeah. They're in the browser. There rid. There they are. They're they're not working.

But, hey, if they if they're not working for whatever reason, because of JavaScript or Something you might have an error in your console log, which will then trigger your error and exception handling service, which is potentially Sentry at century.i0.

Sentry is an error and exception handling service that does not only keeps track of and logs all of your errors, allows you to attach them to Specific releases, branches, versions. You can see, the the users specifically who caused an issue so you can get out of in front of that issue, or you can see just how many users it's affecting.

Also give you a user misery score for your performance on any individual page. And it's gotta be one of my favorite features because I'm obsessed with performance tracking. So Being able to see the slowest routes on my page in a giant table and being able to approach those immediately is just an excellent, excellent use case for me. So Head on over to century.i0.

Use the coupon code tasty treat, all lowercase, all one word. You'll get 2 months for free. Check it out. The error and exception handling service of your dreams, especially when you're getting into anything wild with your code here on the future rid The future the future code like we have here today with the container queries. Right? It's still under development. Right?

The container queries? Rid Yeah. Very much. And I expect like I said, there's some new syntax that we need to add to it. Even the syntax proposal isn't done. And the prototype is very cool, but it's also not done. There's so much about it that needs to be finessed and cleaned up, and There's a lot of work still there to do.

So it's not gonna be landing in browsers right away, and there's also some browsers that don't even have containment Mhmm.

Supported yet. Safari.

Yeah. And Igalia is working on adding that to Safari right now. Oh, nice. So that's very cool. We're moving in the right direction on all the browsers, but it's gonna take a little bit to sort out all the details. But what we know is that the concept has been proved, and we can probably solve this.

So that's pretty exciting. That's great. Yeah. That's worthy of a parade for me.

While you're talking about, Agalia, they we I received a really nice message From one of the devs at Galia after we did the container queries, he said, hey. Like, we're adding it. Don't worry. We're working on it. And I, like, kinda went down the road. I'm like, rid Who's Galia? And then I went down the road. I'm like, I for some reason, I had assumed that it's just Apple working on WebKit right now. And if Apple doesn't want it, then then that's it. And he said, no. No. No. No. Like like, apparently, they do a lot of embedded systems with with WebKit.

Rid. Sony is a big contributor to WebKit because it's in the PlayStation.

So there's a couple, like, big companies that contribute to it as well. And I was really happy to see that rid. They were sort of taking charge on this type of thing and and adding it. So that's really cool, and thanks to the devs there for for reaching out. Rid Yeah. Yep.

That was Brian Cardell who actually had proposed, Switch initially. Oh, awesome. But Igalia is super interesting because they really are this, re third party that contributes to all of the browser engines. They contribute to WebKit. They contribute to Chromium, and they contribute to Mozilla. And, I mean, they implemented Grid first.

Igalia was hired by Bloomberg to implement Grid. We have Grid because of Igalia.

Really? What what did Bloomberg want with Grid?

I don't know. I mean, I guess stocks need Yeah. Grids. I don't know.

Oh, that's that's funny because one of my first very first co ops was I would sit in front of a Bloomberg terminal, every now and then and, rid just, like, look at all the data scrolling by, and, now they have grid. I'm I'm pretty sure they still have that old school terminal as well, but it. It's really cool to see, like, these big companies putting up money for this type of thing to move the web forward, especially on a lot of people have been complaining about Safari. Well, lately, it's and it's cool to see other companies sort of coming in to help with it. Ready. Yeah. If you haven't seen it already, check out open prioritization.

It's Igalia sort of crowdfunding. What do you want us to work on next? Here's features that are missing from 1 browser or features that haven't been implemented anywhere yet. Wow. That's cool. Right now, they're starting on HAZ. They're working on a prototype of HAZ, the parent selector Uh-huh. Which everybody wants and also thought was impossible. So They think they have a path forward there.

They're doing some exciting things. I tell you, if we can get a parent selector, we can get rid I see your container queries,

layers. What has it has gonna be, like, select this sidebar when it has, rid Instagram widget in. Is that what it is? Yep. That's it. I'm learn I'm so excited about this podcast because they're just learning about The stuff we've been whining about for so long is actually coming. What will we have to whine about then, Wes? I mean Oh, don't worry. Don't worry, Scott. Rid Yeah. Don't worry. Oh, this is cool. I'm just looking at this this open prioritization experiment and crowdfunding prioritization of new feature implementation in web browsers.

Super cool. I like that a lot. You can donate to Focus Visible in WebKit Safari right now.

This is neat.

In. Yeah. This is nice.

Cool. We'll we'll make sure we have a link to that in the in the show notes. So it's so funny. You you popped up with the proposal, and then almost immediately, I think West West joked about Jonathan Neal making a polyfill of it. And sure enough, he, like, popped in, like, right away and was like, hey. I'm working on something.

Were you surprised to see that pop up so quickly, and, have you given it a try yet? Well, I wasn't entirely surprised because when I first tweeted that I was going to work on container queries, he responded to me then and said Oh, nice. I'll rid I'll start thinking through the polyfill. So no. That's great. And he was sort of the person that I would imagine doing it. He's, you know, he he does So many polyfills for CSS stuff, and he is working on it, and has a good first proof of concept. I mean, it's re Very early for his as well. I mean, he's sort of trying to keep up with us as we change the syntax on him.

Ridged. Yeah. But, yeah, it's there, and the basics of it work. I mean, I would say the same is true of the prototype and of his polyfill, which is sort of like The basics work. It proves the concept, but it's not ready for production yet. Mhmm. But I'm very excited that he's working on it. Yeah. I gave it a rip. It it worked. It was really crazy to see, you know, the,

the just the ability to use that syntax In browser without the flag turned on and have that actually work whether or not you know, I have no idea what is happening, behind the scenes with JavaScript there to make it happen, a resize observer or whatever. But Yeah. It was it was really, really, really cool.

It made me feel like I was living in the future for a brief moment. Yeah. I think the fun part that he's having to deal with is,

trying to recreate containment, without access to the browser engine. I think that's, That's a fun one.

Dare we ask what your when you think it might be,

starting to be implemented in rid browsers, are we like do you think, like, we're a year out or 2 years or what? I don't know. It's hard to say. I mean, I think it depends a little bit on when can we get Containment landed in all the browsers.

They got the the basics working right away, but that was so that they could test the edge cases. Rid. And since then they've been dealing with, like, okay, where does this break down? And there's going to be some places in CSS where containment doesn't quite stop the loop And we need something else that there's some weird things with, like, triggering scroll bars, can change the dimensions, all this stuff that we have to sort of like, okay. Well, what are we gonna do in that case? Chrome is working on that pretty actively.

I think we should see a fairly solid proposal by later this year, this quarter or next quarter even. Rid. And then it will be a question of, like, when can

when can browsers get to it? And browsers don't always announce what they're gonna do very far in advance, so Mhmm. I don't wanna rid Try predicting too much. That math stuff is so hard. Just just to know that it's being worked on. Yeah. It is being worked on. I for my own website, I have, like, a rid. Navigation bar, and I wanted to style the stuff that wraps onto the next line a little bit differently.

And, like, I ran into that where Mhmm. It would, rid Oh, this this thing wraps, so make it smaller, but that then it fits. So it goes back up to the first line, but then it you make it bigger, and it wraps, and it goes Smaller. And I was like, this is the most simple two line nav ever, and I spent, like, a day on it. And I was like, I can't imagine having to put this in a browser for the entire world to use.

Must be difficult. I do not envy those types of people. Even I was re Measuring something. I was building a bike rack for my kids the other day, and I was just, like, trying to evenly space them, but taking to the account the width of the piece of wood. And I was like, oh my gosh. How do people in the browsers do this without just like like, for me, I just Align space around, and it's done.

And, there's somebody that wrote the math to figure that out for

rid to flexbox some rail posts on my my kids'

fort that we built. I wanted them to, you know, space apart or whatever, and it's like,

crap. Ready. Space between. Yeah. Yeah. It's the thing that's magical about CSS. It's just these totally intricate problems that we solve with a single property in a single value. And then we're like, that's so easy. It's not programming.

Meanwhile,

there's, like, a 40,000 line if somewhere deep in the bowels of the browser. Yeah. Exactly.

Oh, that's good.

You mentioned 3 things. Was the third thing that you are working on scoping in CSS?

Yeah.

Oh, okay. So and sorry. That's separate from layers? Yeah. That's separate from layers. So scoping is more about Cool. Like, this idea of a component can be a doughnut.

It can have a hole in the middle of it. Like, a tabs component has all these holes wherever you're putting content in the tab. You don't want the tab component to style the content. You just want it to style the tabs, the rid sort of doughnut that then something is gonna go inside of. And so scope is trying to solve that, and it's sort of like rid There's a name spacing problem there, and there's a like, we have ancestor selectors or descendant selectors where you can say anything inside of tabs. Rid That's not what we want. We want anything inside of tabs until you get to tab content. Yeah. We wanna be able to set a lower boundary on that selector.

So scope is trying to get at that problem. How do we make sure both that when you're working across a large team and you name, rid Say you're working on posts and you have a title element or a a title class in your post and somebody else is working on a different component, and it also has rid title class, but you don't want them they're not the same title class. So you can either start using something like BEM and and try to manage, like, rid. How do we avoid naming conflicts? Or you could just have scope that says, well, when it's in tabs, This is what a title is. And when it's in the post, this is what a title is.

So scope does that sort of narrowing down where a selector applies To avoid naming conflicts, to express that sort of ownership, title of a post, title of a tab.

The way I'm Proposing it. It's very similar to what Vue Mhmm. Right now does for you, but a little bit more powerful and a little bit more performant and without any need for preprocessing.

Vue is doing it by, you know, adding new classes to your output and then appending that same class to all of your styles.

Not a great way to do it. I mean, for what we're able to do now, oh, a wonderful way to do it, but,

not the ideal. Right? Yeah. Just trying to hack it with what rid Tools we have. Exactly.

But it would be cool if we could just do that in CSS. So that's what we're working on. Did you say it would be rid able to stop it as well Yeah. From because one problem I have is, like, I use scope CSS in my React components. But if I pop a variable at any component and then 14 components

layer down the tree, those variables are still there. There's no way to, like, Stop a variable right now. Oh, right. It doesn't do that exactly, although there would be ways to. Okay. But, no, it doesn't stop inheritance. It just stops the selector Selecting on something. Okay. That makes sense. That makes sense. Man, I'm excited for that. Yeah. That one's a little bit behind the other 2. There's still a lot to sort out there. And rid Scope is sort of this huge concept, and it means so many different things. And people want sometimes people want scope to be super powerful and to stop everything, and sometimes people want rid Scope to be fairly weak and just to be a namespacing thing.

And navigating that is gonna take some work. I think of web components as sort of the strong end rid Or Shadow DOM. It's got that real strong boundary in the baked into the DOM, and I'm looking at sort of the weaker end. Mhmm. I just want some nice name spacing, And that's it. But it's a big space and lots of use cases and lots of different people wanting different things, so we'll see how it pans out. Yeah. That's definitely it seems like there's I mean, just like,

libraries before Grid and Flex Fox existed. It seems like there's just so many different libraries and solutions and things that we use every day just in an effort to implement some kind of scoping when something like this would be

really night nice to have. What I did like was that Sort of a lot of the different tooling out there follows the CSS module's approach, which is what Vue uses, which is the one I'm most familiar with. But there's various libraries out there that all are using this sort of similar approach, and I think we can match it fairly well while making it plain CSS.

Nice.

What's also sick is that we have a new sponsor for this episode. This is our 1st time with RevenueCat. So, Wes, do you wanna talk about RevenueCat?

I can. I first of all, stoked on the name. That's a wicked name for a company, revenue cat. You better not let them know there's a dog behind you right now. The dog's gonna That's true. Bark at that revenue cat. I'm a dog person myself, but I'll allow revenue cat in my life. So they do rid Subscription platform for mobile apps. If you have a mobile app and you wanna be able to have a user subscribe, ready. Have IAP infrastructure, customer analytics in your Ios and Android apps.

They provide all kinds of SDKs for you to be able to do this. So They always have iOS and Android APIs, but also React Native, Cordova, Flutter, Ionic, macOS, Unity, all the different rid Platforms that you could imagine, and it makes that sort of thing super ease easy. It's created by developers for developers.

The 1,000 of the world's best rid Apps use RevenueCat to power their in app purchases and subscriptions.

Get started for free at revenuecat.com.

Thank you, RevenueCat, for sponsoring.

I have a question. How do you think like, once we have media queries and container queries, Like, what do you think is gonna be the use case for media queries and container queries? Are we gonna use both of them or just 1, or Will, like, media queries be for layouts and then container queries for everything else? Like, what do you foresee happening there? I know it's hard to say because We don't have it yet, and you don't see best practices or people figure that stuff out. But do you have any thoughts?

Right. Well, there will definitely be a transition period, right, where we're Still trying to support older browsers, so mixing in that way.

Long term, I think media queries will become more about rid Things like the preference queries that we have, prefers reduced motion, prefers color scheme dark mode, All that sort of thing or checking to see whether, the pointer is coarse or fine, checking to see whether hover is supported on a device. Rid And container queries will become more common for layout at all sizes.

I think it may become common to add rid containment to the root element and say, I want to be able to query that as a container rather than using a media query, even though The sizes are gonna be similar. Right? But maybe I can query the actual font size instead of querying the browser default font size. So maybe that's useful.

And there may be some other types of queries that we're able to implement where we're measuring states of things on the root.

So I think it could be that container queries take over for a lot of dimensional media queries, but we'll have to see. I personally

I think that that makes a lot of sense because be in the past, I was thinking, like, okay. If we have this container business, then when would we ever need to use that rid ever again. But that I mean, that that's a pretty convincing

explanation, I think. I have just another random question, rid. About CSS in general, we now have the ability to size things based on inline and block, which is, like, width and height. Do you use those in your CSS, or do you plan on using those, or do you still stick with win width and height? I always like to ask people this.

Yeah. I do a mix right now. I think those logical properties are very cool.

That's what we call the, like, inline and block rid. Versions instead of width and height. I think as they have more support, I'll move towards them a bit more. But you really only need To switch over, they're most powerful. If you're doing bidirectional sites or sites with lots of different translations where you might be changing the writing mode Mhmm. For different languages, that's where they become the most powerful.

I'm not doing a lot of those sites, but where they become useful for me is rid more often in thinking about, like, shorthands.

We don't have a shorthand for margin horizontal, But, with the logical properties, we do have a shorthand for margin inline, and that would set both the Margin in line before and margin in line after, which is likely for most of your audience, left and right, margin left and margin right.

We don't have a shorthand for that, but logical properties give us that shorthand. So, yeah, I imagine for me, it will always be a mix because Unless you're doing bidirectional sites, you don't need to switch.

Yeah. I was that myself. We did a show on it, like, a year ago, and I was like, I wonder if this will take over with the night. Rid. And then I just, like, found myself. I tried to, like, use it, like, full time for a month. I just found myself being, like, having to admit in my head convert it rid to width and height every time. And then I was like, I'm not ever changing the access of my website on this type of thing, but I do just like you said, I do like the handiness of being able to do left, right, top, and bottom in a single shorthand

property. And I also hope that it helps people learn rid That this is how the web thinks about it. The web thinks about things in terms of inline and block, in terms of those types of flow axes, and it's Good to understand them. If we're writing CSS Mhmm. We want to understand what those things are and what they mean. We've sort of had Flow from the beginning, and we've never given it a name. Normal Flow is this incredibly powerful layout engine rid that we think of as the default. Mhmm. But it's what gives us inline and block and and how those flow together.

Rid. So learning it is really useful. I'm also really excited about it because when I started web development, every single band wanted a horizontally scrolling website.

Rid Yeah.

That was the the thing to have was horizontal scroll. And then I remember someone figured out how to hook into the mouse scroll event and then rid. Scroll it horizontally as you use the mouse scroll to go up and down, and it was over. Everyone loved that.

It's over.

What else? Any other ones there, Scott? Wes was wondering what browser you use, but he wrote my name for the question. So I I was asking too many questions. I was like, I rid Yeah. Scott doesn't care. I do. What browser do you use?

I've been using Firefox for a while. I'm pretty happy with it. It Had when I started using it, it had the best CSS debugging tools, the best sort of layout. And Yeah. Now a lot of those have migrated to all the other browsers, which rid Great, but I'm still on Firefox. Yeah. Those those like, the the Grid and Flexbox stuff is so good, the overlays and the numbers. Oh my gosh. Yeah. And at one point, I think a couple years ago, I was like, when are we gonna get CodePen in the browser? And then I looked closer, and CodePen is in Firefox. I mean, we've got You've got a style editing tab. You can, look at any of the files and edit them directly, and I was like, oh, great. Alright. We've come a long way since Firebug. That's for sure. Yeah. Is there anything else you you wanted to touch on before we start to wrap this up? Anything we didn't touch on? Anything you like to talk about? Rid No. I mean, I I think I could say, you know, everything that the w three c works on, everything that the CSS working group works on, rid It's all on the CSS working group draft's GitHub.

All the issues are there. It can be a bit of a fire hose if you're trying to, like, rid Follow the entire everything.

There's a lot of open issues, and they get discussed fairly regularly.

Rid. But if you go through and you sort of search for things that you're interested in and follow particular issues, anybody can get involved in that. Anybody can be part of those conversations. That's why we're rid Testing all 3 of the new features I'm working on, and

head over there and be part of the conversation. I love perusing that GitHub repo because it's just a rid. A gold mine of things that could possibly be added. Like I just clicked through it right now and it says CSS multi column layout And I don't even know what that is, but I'm really excited for whatever that is.

Multicollum, we've had for a while, actually. Oh, is that just CSS columns? Yeah. Mhmm.

Although it's getting a lot of work on done on it right now to sort of fix all the little bugs that are still left in it. That's cool. Make it a little bit more usable. Yeah. Mhmm. Cool.

So now is the part of the show where we get into sick picks, where we pick things that are sick, rid. Could be literally anything. We don't care. We've sick picked lawnmowers, light bulbs, Podcasts, anything.

Did you do you have anything you would like to to share today? Or

Alright. Alright. Here's my pitch. Alright. Is You get a bunch of LEGO, just LEGO bricks, and you can find instructions to any LEGO kit online. You can just download of the instruction booklet to any kit, and then you figure out how to build it from the LEGO that you own. You don't buy the kit. You just download the instructions for the kit, and then you build it with the LEGO you have.

It's so much fun. That's my that's my pick. And then so they come out looking totally unique because of the, yeah. Now so is this on LEGO's actual website?

You can find some of them on the Lego website, but they're also just sites that collect these. And, you know, then you end up with something way more colorful. Colorful, and you have to do some problem solving along the way. Like, I don't have that piece. How am I gonna how am I gonna fake it? That's, like, a way more fun way to do it than just paint by the numbers. That's ready.

After talking to you for the last hour, that hobby of yours makes a lot of sense.

That is cool. I like that. Where where do you buy your do you just buy packs of Lego in random spots, or I always wondered that. Rid Well, I used to

and then a a friend gave me his childhood tub.

That is cute. So now No. I just have, like, all of his LEGO from childhood, which is great because then you get the, like, the old interfaces, the old computer interfaces Oh, yeah. And all that stuff, All that great eighties Lego stuff. Oh, yeah. That's the best. Oh, man. That's great.

I'm going to sick pick something that read. My wife just got, but I'm really into as well. And it is a embroidery machine ready. For your house or like a Mhmm. Like a consumer level embroidery machine, which is super cool because, like, you you see people with hats or, like, a rid A T shirt or something like that and has, like, a company logo embroidered on it. My wife makes dresses and things like that, and she likes to embroider designs or or custom edges on them. Ready. And for the longest time, she's had just, like, a regular sewing machine. She went to university for fashion, so she just had that thing forever. Rid. And we were talking about, like, how cool it would be as as the trends for embroidery start to become more popular, just have 1 at your house rid And or, like, looking into it. And, like, I've realized there's this whole area of, like, consumer level embroidery machines. Ready. They're not as fast as, like, something you're gonna get at a print house, but they do a really good job, and they can print, like, 4 by 6. And you have to change the the of the color of the thread every single time the design changes. But it's expensive, but, like, not, like, 1,000 and 1,000 of dollars. Just, like, 100 of dollars. Rid So my wife ended up getting a Brother SE 600, and it is so cool to see it. Rid. Like, it's kinda like a 3 d printer. You know how, like, 3 d printers are now accessible to just regular people? That is also coming to the embroidery space as well, which I was rid Really excited. There's a all the tutorials on how to use this

thing are just people who have, like, streetwear startups on YouTube. And it's just like people I thought it would be like old granny showing how to, like, embroider doilies. But, no, it's not. It's it's people that are making t shirts and hats and and beanies and things like that. So If that's something you're into, check it out. Cool. I will sick pick. Something I have sick picked before is the site that I I frequent very often. I don't know about you, but we're tapped out on stuff to watch on TV because we've watched everything over the course of the pandemic. So there's a site, real good, r e e l g o o d, That tells you what's streaming on all of the services, and you can sign up and click which services you subscribe to. And then you can check which Things you like or watched or haven't watched, and then they'll suggest you things that are only on you could say, tell me what's across all of my streaming services, that I would be interested in. Also, Wes, we started you're you're familiar with The Great British Bake Off. Right? I know of it. I've never watched it. You like food competition shows. Well, we started watching basically the same thing for pottery. It's like the great British pottery throwdown. It's so good. It's so good. We we needed something very relaxing, and it is so relaxing.

Just see the people throwing down pottery.

It's very good. I didn't even know that existed until very recently, and then we we breezed through the the 1st season of it. Yeah. I love that show. The other one you might wanna check out that's that's similarly, like, chill.

Not even a competition is the repair shop. They just Oh. They just fix things, and then that that's it. I've

rid I've seen I've seen the the little icon for that. Yeah. That's definitely Wes's territory too. I need to check that out. We,

rid. We get Canadian versions of everything, and it's never as good.

And we currently, our Internet at the cottage rid is American Internet. And and whenever we go there, it's like, oh, man. And, like, my kids have gotten used to all these American shows. And then we come home, And there's they don't have access to to, like, that. Even Disney.

I didn't even know this, but even, like, Disney plus Has different shows in Canada than US, so I'm gonna have to check this out.

That's awesome.

Sick. Okay. Now is the part where we do shameless plugs.

Miriam, do you have anything to plug?

Sure. Well, Advert, the agency that I help run, does really great work on rid Anything from a totally new MVP from scratch up to refactors, design systems, rid. Whatever your company needs and isn't able to get to in terms of web development.

We do the whole thing. We have designers all the way to back end developers, everybody in between, and I think do great work. So rid I'll I'll plug us. Awesome. I love the team I work with. So Nice. Yep.

What what's the URL for that? Oddbird.net.

Beautiful. Yeah. We'll have it in the the show notes as well. I like your your logo a lot. Did you design that?

I did.

Rid Back in back in 2008 or 2009. Yeah. That's great.

I really like your your websites.

They give me that That feeling I got, like, 15 years ago when CSS 3 started hitting the hitting the ground where, like, people started using these all these new features, rid I get that feeling from this. Not that it's CSS 3, but it's like you're obviously pushing the limits of what CSS can do, or you know all of The ins and outs of CSS? Yeah. I like I like playing with the new toys.

Yeah.

I'm I'm on with you. Yeah.

I will rid. Shamelessly plug all my courses. Westboss.comforward/courses, a list of JavaScript, Mostly JavaScript, some CSS. I got a CSS grid course on there. It's free as well, so check them all out. Westboss.comforward/courses.

Use coupon code syntax rid. For an extra $10 off

I'm gonna shamelessly plug level up tutorials.com, and we have new courses out every single month.

The latest course at the time of recording, this is on GitHub actions with Brian Douglas, and then the course that's gonna be coming out very, very soon. By the time you're listening to this, it will already be out as on SvelteKit.

So if you're interested in SvelteKit and seeing, some of their amazing CSS Scoping stuff that they do with Sveltekit is, one of my favorite features there. Check it out at level up tutorials.comforward/pro.

Also, I'd love to tell you about the level up tutorials spring sale that's going on right now. We're doing 50 re Percent off of annual subscriptions.

Every single tutorial series on the site is on sale, So head on over to level up tutorials.comforward/pro.

And if you are not currently a pro subscriber, hit that subscribe rid button, and you're going to be getting a lifetime of 50% off until you unsubscribe.

So check it out, level up tutorials at .comforward/ Pro. We have a new tutorial course every single month. Tons and tons of stuff, so you'll get access to the entire back catalog as well as 12 new additional courses over the course of the next year, as well as a ton of additional features and tools. So check it out, level up tutorials .comforward/pro.

Alright. That's it. Thank you again, Miriam, for coming on. That was awesome. I I know people are gonna love this one.

Seriously. And,

thanks again. Great. It was great chatting with you. Thank you. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.