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

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

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,

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 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.

cool. It's my dream. It's all my dream. What's mind blowing to me is that it works.

to WebKit. They contribute to Chromium,

and respond to its own space,

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

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

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

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.

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 I'm going to sick pick something that read. My wife just got, but I'm really into as well. And it is

the contained property,

and it didn't.

That was Brian Cardell who actually had proposed, teams just working internally

You could do either or, and you could mix the 2. It's so cool. It's so

Has its own container around it established.

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

Really?

is just an excellent, excellent use case for me. So Head on over to century.i0.

is very cool, but it's also not

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.

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,

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?

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,

it's gonna take a little bit to sort out all the details. But what we know left and right, margin left and margin right.

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,

and there's also some browsers that don't even have containment Mhmm.

Supported yet. Safari.

What what did Bloomberg want with Grid?

There's a lot of work still there to do.

you can do that with an extra wrapper.

Rid. You wouldn't need an extra element to measure the sidebar to know how big it is, would you?

immediately

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.

7525.

But, hey, if they if they're not working for whatever reason,

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,

Like a grid,

It's Igalia sort of crowdfunding. What do you want us to work on next? and then we can do container queries on top of it. So

They're doing some exciting things. I tell you, if we can get a parent selector, we can get

Oh, okay. So and sorry. That's separate from layers? Yeah. That's separate from layers. So scoping is more about Cool. Like, GitHub.

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, defaults. And then we font size setting coming from the browser. Right? So

rid to flexbox some rail posts on my my kids'

that wraps onto the next line a little bit differently.

there's, like, a 40,000 line if

Meanwhile,

That's a fun one.

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 You can find some of them on the Lego website, but they're also just sites that collect these. And, But, yeah, my background is

what your when you think it might be,

that, and it's sort of like rid There's a name spacing problem there, and there's a like,

It can have a hole in the middle of it. Like, a tabs component with some then confusing limitations.

which is sort of like

Oh, that's good.

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

layers. What has it has gonna be, like, select this sidebar when it has, rid 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.

all this stuff that we have to sort of like, okay. Well, what are we gonna do in that case? layout at all sizes.

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

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, 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.

Yeah.

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 Has different shows in Canada than US, so

crap. Ready. Space between. Yeah. Yeah. It's the thing that's magical about CSS. It's just these 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

In. Yeah. This is nice.

of new feature implementation

of doughnut Unless you're doing bidirectional sites, you don't need to switch.

They got the

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,

without access to the browser engine. I think that's,

two line nav ever,

in web browsers.

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.

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

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.

experiment and crowdfunding prioritization

I think we should see a fairly solid proposal by later this year, as authors. Yep. That's the part of the cascade that we really And then they add scoping to sort of solve that problem, but,

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,

trying to recreate containment,

somewhere deep in the bowels of the browser. Yeah. Exactly.

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

triggering scroll bars, can change the dimensions, checking to see whether,

This is neat.

this idea of a component can be a doughnut.

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,

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.

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,

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

we have ancestor selectors sort of the outer edges of the window,

a resize observer or whatever. But Yeah. It was it was really, really, really cool.

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

Cool. Alright.

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 levels of specificity

They have a really funny landing page there as well as a link to a bunch of the starters we

rid. Slices, which are

even if we already have media queries? Yeah. So media queries allow us to measure the of the viewport, 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.

And it was a nice re API, which will go a very long way into making the experience

rid Talked about. Just check it out. Prismic.ioforward/intax.

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

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.

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

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

in terms of how you wrote CSS Grid, and it it feels a lot more like

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

10 minutes ago.

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

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.

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 and we can probably solve this.

and make changes and just tell it to do that and then

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,

utility classes on in the DOM into

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.

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

between them. You can create these things called

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.

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

rid at prismic.ioforward/

I think let let's talk about rid. Container query is a little bit as well for for anyone who is,

syntax.

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,

I have a

in your Ios and Android apps.

Get started for free at revenuecat.com.

prefers

Thank you, RevenueCat, for sponsoring.

to implement some kind of scoping when something like this would be the barriers that were there. Like you said, the the big problem was that when you have something that changes based on its size,

Flutter, Ionic,

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 That's awesome.

at any component

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,

plain CSS.

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?

Long term, I think media queries

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,

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 Freelance and then starting an agency, hot bird.

libraries and solutions and things that we use every day just in an effort

like, once we have media queries and container queries, Like, what do you think is gonna be

The 1,000 of the world's best

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.

rid Things like the preference queries that we have, prefers reduced motion,

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, size containment, layout containment,

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

so mixing in that way.

And navigating that This is the proper place for Bootstrap to fit in my 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

customer analytics

the pointer is coarse or fine, checking to see whether hover is supported on a device. Rid And container

Grid and Flex Fox existed. It seems like there's just so many different

I think it may become common to add rid containment to the root element rid Anything from

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.

color scheme dark mode, 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 there's some weird things with, like, 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 up to

queries will become more common for called Susie.

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?

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 Rid And container queries allow us to do that first by establishing a container.

rid Apps use RevenueCat to power their in app purchases and subscriptions.

the use case

Wait. You want me to work on the 3 hardest problems that CSS has dealt with in years?

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.

Yeah. So since September, it's sort of become the focus Multicollum, we've had for a while, actually. Oh, is that just CSS columns? Yeah. Mhmm.

is just working on

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

.comforward/pro.

And we currently, our Internet at the cottage rid is American Internet. And

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

So check it out, level up tutorials at .comforward/

and you can find instructions to any LEGO kit online. You can just download That is cute. So now

and it is so relaxing.

and Alright. Alright. Here's my pitch. Alright. Is

a totally new MVP from scratch m based media queries are assuming 1 m is 16 pixels 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 and then style it based on 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

packs of Lego in random spots, or I always wondered that. Rid Well, I used to

It's so much fun. That's my that's my pick. And then so they come out looking totally unique

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 rid I see your container queries,

15 years ago when CSS

very, very soon. By the time you're listening to this, it will already be out as on SvelteKit.

spring sale that's going on right now. We're doing 50 Yeah.

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.

ready. For your house or like a Mhmm. Like a consumer

Podcasts, 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.

lawnmowers,

They give me that

Not even a competition is the repair just fighting over how many classes and attributes we're allowed to select on.

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

And I don't even know what that is, but I'm really excited

rid. Whatever your company needs contain the browser engine does style first, which is sort of attaching styles to different places, running the cascade, everybody wants and also thought was impossible. So They think they have a path forward there.

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

gave me his childhood tub.

to back end developers, Not a great way to do it. I mean,

I will rid. Shamelessly plug all my courses. Westboss.comforward/courses,

Seriously. And,

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,

everything.

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,

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

re Percent off of annual subscriptions.

refactors, And the idea is giving authors a way to define their own re Maybe it's off screen right now. We don't need to figure it out until it's coming on screen.

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

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

a embroidery machine rid. We get Canadian Okay. Alright. Anyway Yep. You go ahead and

Miriam, do you have anything to plug?

That feeling I got, like, 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

of the instruction booklet to any kit, and then you figure out how to build it

for whatever that is.

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.

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 well. Today, we are sponsored by 3 awesome companies. First one is Prismic.

and isn't able to get to in terms of web development.

I didn't even know this, but even, like, Disney plus

fairly regularly.

a list of JavaScript,

player or drop a review if you like this show.

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 really like your your websites.

rid Follow the entire

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.

versions of everything, and it's never as good.

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,

for a full archive of all of our shows. And don't forget to subscribe in your podcast And Susie came along, and it basically took that out of writing

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

Just see the people throwing down pottery.

Rid. But if you go through and you sort of search for things that you're interested in and follow particular issues, And that also comes with some advantages like And this is not in the prototype yet, but,

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.

That is cool. I like that. Where where do you buy your do you just buy question. How do you think

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

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

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, 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

anything.

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 I'm on with you. Yeah.

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.

I'm gonna shamelessly plug level up tutorials.com,

Pro. We have a new tutorial course every single

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

Also, I'd love to tell you about the level up tutorials

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.

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.

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

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 it is so cool

I did.

design systems,

because of the, yeah. Now so is this on LEGO's actual website?

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

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,

Sure. Well, Advert, the agency that I help run, component that 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

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 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,

convincing

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

And there may be some other types of queries that we're able to

the browser default font size. So maybe that's useful.

like, shorthands.

rid more often

and say, I want to be able to query that as a container

implement

I'm not doing a lot of those sites, but where they become useful for me is So it's not gonna be landing in browsers right away, I think it was beginning of 2020,

But maybe I can query the actual font size instead of querying this quarter or next quarter even. Rid. And then it will be a question of, like, when can 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 re Okay. We're only gonna style this element from the outside. It's gonna ignore its children, Rid Back in back in 2008 or 2009. Yeah. That's great.

but we'll have to see. I personally

where we're measuring does really great work on So you can have an extra wrapper on the card element itself, re If you need it to sort of go anywhere the element can't measure itself. Oh, okay. Because that would give us loops again.

or do you plan on using those, or do you still stick with win width and height? I always like to ask people this.

in your CSS, I'm gonna have to check this out.

The sizes are gonna be similar. Right?

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

states of things on the root.

rather than using a media query, even though

Yeah. I do a mix right now. I think those logical properties And what we really want to do is measure rid The space that it has, We spend most of our time dealing with specificity

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.

in

thinking about, 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 is that the concept has been proved, and style containment.

take over for a lot of dimensional media queries,

a big part of why container queries are happening now is not because I Came along, but 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

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

And then layout and I don't I'm not an expert on the browser rendering engine, but

We can also contain both dimensions. But in most cases, we're gonna want 1 dimension to be able to flow. Right?

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?

containment started landing

the contained property

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

Rid. So let's build it 1st, make sure it works,

So, Lew, what does space around, and it's done.

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.

trying to overwrite, like, Bootstrap styles

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 just LEGO bricks, narrowing down where a selector applies To avoid naming conflicts, to express that sort of ownership, title of a post, that then something is gonna go inside of. And so scope is trying to solve you know,

or reset defaults theme, is gonna take some work. I think of web components as sort of the strong end

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, Chrome is working on that pretty actively.

let the CSS get loaded however it will, and the layering is already established. I'm just having

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?

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 and have you spend more time on it? Oh, awesome. So I said, are very cool.

and just 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

ordering problems all the time.

Atlayer theme, Atlayer components, and then that is at the top, and it's defining the order in which that specificity. I'll post

I'm just having, like, flashbacks to

If it's not gonna impact anything else on the page,

for

So can you give a little bit of background on

of feedback loops. So the contained property, I found to be pretty fascinating, and I hadn't heard of this property

before

A couple things. I mean, it can help performance in other ways potentially and then that that's it. I've 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.

It really seems like the contained CSS property really broke open a lot of

Rid Yeah.

It changes size. There's a potential for infinite looping and and just kind

contain

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 they contribute to Mozilla. And, I mean, they implemented Grid first.

your proposal.

and

measure the component.

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?

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

I'm not actually sure exactly when it landed. I mean, I know that in part, it was added wherever it is,

the user's default containment, 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

lazy rendering of it. Right? so then you run into 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.

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

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

consistently.

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,

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.

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 On today, we're gonna talk about

see, like, these big companies

every now and then and, rid

putting up money for this type of thing to move the web forward, especially on a lot of people have been complaining about 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?

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

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 both

Being thought about for so so long. Right? Yeah. I mean, a lot of them have, in some ways, been solved All the issues are there. It can be a bit of a fire hose if you're trying to, like, Boom.

above these rid styles of mine and below these other styles of mine.

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 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

and scope is really designed around sort of how Vue is doing it, And it's not a new idea, but it's a nice visualization of it.

it was way cooler.

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.

all the values you see here are sort of the steps in that process. Rid Style, layout, paint,

now. So I don't know what it will be exactly, but you say,

We're probably gonna add some new syntax there because right now we require you to add So they had both put forward these proposals, and the idea was, well, 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.

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.

the browser engine can, for this

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?

But we don't want that as the API for this. We don't want everybody to have to remember these our styles apply. We're measuring None of the features

Container.

So

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

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

Rid And that's useful.

what we're doing is we're saying There's a lot of open issues, and they get discussed it. So it always has to be an extra wrapper. You can't 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 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.

It's over.

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

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

That was the the thing to have was horizontal scroll. And then I remember someone figured out how to

for a while. I'm pretty happy with it. It Had when I started using it, it had the best CSS

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

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 You get a bunch of LEGO,

I've been using Firefox

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.

and that would set both the Margin in line before and margin in line after, my specificity order.

as you use the mouse scroll to go up and down, and

We don't have a shorthand for margin horizontal, and then a a friend which you can go down this rabbit hole

rid Yeah. Scott doesn't care. I do. What browser do you use?

But, with the logical properties, we do have a shorthand for

rid that we think of as the default. Mhmm. But it's what gives us inline and block and and how those flow together.

hook into the mouse scroll event and then rid. Scroll it horizontally

is this incredibly powerful layout engine So there's some performance issues will become more about

it was over. Everyone loved that.

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 all the way

rid to width and height every time. And then I was like, I'm not ever changing the access

which is likely for most of your audience,

margin inline, Right. Well, there will definitely be a transition period, right, where we're Still trying to support older browsers, for anything inside of it, we can write container queries, and they look exactly like a media query, rid sometime if you're interested, but but a little bit more powerful and a little bit more performant and without any need for preprocessing.

And then maintaining it. I learned everything I know 2008, 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 done. There's so much about it that needs to be finessed and cleaned up, and before we had responsive web design trademark. Mhmm.

It was like a grid calculator.

Natalie Down called CSS systems.

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,

is mostly writing HTML and CSS for clients. I mean, I've been doing this since except ready. They measure the container instead of measuring the media viewport.

Early on, I was using

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.

in 2008, I saw this talk by When we're measuring an actual component, we can actually totally intricate problems that we solve with a single 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,

2007, 2008,

this new thing that would let us do math in CSS.

And I loved it, and I loved her system. And it was before media queries were widely available, something that couldn't that couldn't be done before. Re So when you invented the browser Yeah. When I invented the browser, put it wherever we want. It measures its container

in Sass

o Omega Grid, any of these Grid frameworks. And,

so in 2009,

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

Harry Roberts has this inverted triangle visualization and he breaks that down into layers.

tags, the elements, 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,

And I thought, Okay. I like this idea of a cascade, But she was doing all this great stuff that was, like, responsive already

Resets are sort of a bottom layer, and then we get which was partially

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.

for organizing CSS,

What if instead of getting rid of the cascade

interact with the most. Rid And there's

So they're somewhat

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

help keep some of these things moving. That's awesome. So what is this other thing you're talking about? CSS layers? and you've got your your classic web development content sidebar, Because you're not sizing you're not explicitly sizing the sidebar. Right? Rid. Wes, you would give the sidebar

3 main layers to specificity. There's the

Yeah. Cascade layers, 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.

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, 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,

and then they will just easily overwrite them. You don't have to spend your days

declare

this super language where you're having

different layer. How would you and then 14 components

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

So the layers stack in the order that they're, All that sort of thing or 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

With all of the neat stuff coming to CSS, it feels like

Did I? Oh my gosh. That's like a thing that's like a thing for our audience that they're gonna Wow. Rid Do you wanna actually just give us a quick rundown of your background Thank you, prismic, for sponsoring.

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

Fighting

in your application,

I can't hear the word.

CSS is Turning into

say it. I can't say it. How do you say it? Specific Is that right? Dare we ask

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

different

re Describe, like, these different

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,

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

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?

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

So

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.

something like that. Yeah.

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 and we have new courses out every single month.

when did you come on board with the container Queries. And behind the scenes with JavaScript there to make it happen,

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, Head on over to syntax.fm

all kinds of things CSS, but, most importantly, I think we're gonna talk about container Queries as Align what a layer specificity is? just like like, for me, I just 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 You mentioned 3 things. Was the third thing that you are working on scoping in CSS?

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,

just absolutely Nice.

And RevenueCat rid Specificity. Butchered it. I can't

We talked about this maybe a year or 2 ago about rid. Being one of the most requested features in CSS, and light bulbs,

is a subscription platform for mobile apps. We'll talk about all of them partway through the episode.

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

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,

Ombre.

Yeah. Beautiful.

Hairstyles.

cascading layers, it gives you mostly

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.

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.

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

And you can name layers, have them nested.

I'll paste it to you in a if you Google

intended as a step towards this. If you look at the containment syntax, 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,

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 Lays out vertical or horizontal based on where we put it. Nice.

And, actually, I think a precursor to that, rid Browsers has started to implement

David Barron

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.

and Brian Cardell The container has to be separate rid from the elements that are measuring query target. I don't know. And then that becomes a container 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, 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 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, property in a single value. And then we're like, that's so easy. It's not programming.

came out with different paths forward.

and you have a title element size.

for what we're able to do now, oh, a wonderful way to do it, but, Igalia

rid Say you're working on posts

new classes to your output 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 then appending that same class to all of your styles.

in tabs, This is what a title is. And when it's in the post, this is what a title is.

Or you could just have scope everybody in between, But it took a lot of math. Rid. And

So scope does that sort of I don't know. I mean, I guess stocks need Yeah. Grids. I don't know.

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, shop. They just Oh. They just fix things,

title of a tab.

like, rid. How do we avoid naming conflicts?

that says, well, when it's We do the whole thing. We have designers So I think it could be that container queries Rid. So I sort of made a made a little calculator

The way I'm Proposing it. It's very similar to what Vue Mhmm. Right now does for you,

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

Parents and based on children.

It's set.

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

and that cuts off the loop. We don't have a looping problem anymore. We've established a container.

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 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,

sort of back and forth negotiation, which is Set a width. But then we want Like Like width or height or or in line or block? Yeah. Exactly. Yeah. Okay.

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.

that space that's available.

And then rid We can And the container has some rules that are basically,

Its width comes from outside.

ever since you did this, it's just been, Levels of specificity

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.

was what? December 15, 2020, so not that long ago. And

But it worked so well even that 1st draft, even with 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, Vue is doing it by, you know, adding

end of last year. Wow. And, I saw that video going around about Sass,

rid Play with them. Prototype them. We need to see what works here.

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?