CSS Proposals @when, CSS Masonry, Carets

application And And this has been a pattern that that first showed its head in in things like SaaS, and people realized, wow, you can really write a lot less code By doing that, and then it led to a lot of people over nesting and having way too many nestings and all sorts of things like that. But at the end of the day, I think it was revealed that this really was So you say at custom media, then a name, and then you write the media query as you typically would. Then in your code, you then get to say at media, And then with no variable or anything, hyphen hyphen

probably are gonna come, but maybe not.

Yeah. Totally.

landmark on our site is. Like, let's say, you know, somebody's using the site, and we're noticing that via their Performance tracking tools on Sentry that,

People are having good experiences as well, and we use that to specifically,

So the idea here is

for it to wrap around. They do it poorly, CSS columns.

Which is essentially Else, which are very popular in the text editor world.

chain that goes down all the way down. So I think this is pretty neat that they are proposing this. Yeah. It's neat especially because, like, I don't know. So many of these things are things that you you felt like we've maybe rid had in Sass in any sort of degree before, but having them in browser is very different. Having if statements or win statements or those types of things, it's not quite an if statement. But,

So I really hope this gets added because this is a very common layout that needs to be rid. At it, I'm sure very tricky to do as well. Sometimes you have some stuff that's way too tall. You know?

maybe you want to target something in CSS. Like, For example, you want to target a media query, even oh, hold on. That makes sense that they would use It's orange.

a supports query. Right? You know how we have media queries for widths and height and pointers and things like that. And we have support queries for, does this support Flexbox? Does this support grid? Does this support, Radio listening to us? Figure stuff out here. You dummies. You don't even know. Awesome. All right. I think that's all we got for today. There's a whole bunch of new proposals and stuff that will hopefully be coming soon to see us. I always love going down this these types of shows because you get to look at

And the answer to that is that's not really what CSS Grid is for.

you have to have a height on your container

you know, errors and how many times people are having problems on our site because, you know, that's not it. That's not everything. Rid.

approach to building

So when CSS Grid was first released, it was kind of Peak of Masonry and people were saying, like, wow. CSS Grid is really great, but it can't do Masonry. Like, well, we got Grid, But I can't do masonry. And if you don't know what masonry is, it's the Pinterest layout. Basically, it's a grid where if non Standard items don't fit into their given space. It kind of flows into the next available open space. So this makes it really nice for flexible layouts Where you don't always know the height and width of all of the items of your grid.

because when CSS Grid launched, I Threw a question up to Rachel Andrews GitHub and said, like, okay, now that it's out, how do we do the Pinterest layout, a variable small breakpoint. Is the width you can just use that. Is that just a a keyword

Was the would you think the origin of CSS Masonry was the JavaScript Masonry plug in for that? Do you think that's The the way that that became known as Masonry?

use their performance tracking metrics to really understand exactly how fast and how rid. Each, really, the only solutions out there and I I say really because There are some CSS only solutions, but they're none of them are good. I'm gonna tell you that straight up. None of them are worth it. They they basically, to do this in the past, it's only been JavaScript.

these things are true, and then else fall back to it. So, like, why would you need that? Well, but you also want to target So is this for, like, like, between is that what you're talking about? Like, you're, like, between 508 100 pixels? But not even. So what it does is it basically replaces

Oh, yeah. That's a different name. Yeah.

David DeSandro, not Alejandro.

when the device is more than 400 pixels

being proposed. This is CSS grid level 3.

it's going to add to the next column.

But now we have a proposal for feels really great.

headless stores.

If you wanna combine those 2 together, there's not really a way to do that right now.

Shopify is going all in on their headless, to the equivalent.

Rid. CSS columns kind of does that, but CSS columns,

just stacking them together.

CSS Grid with Masonry. And what's interesting here is that they actually chose to use the word masonry, which And don't forget to subscribe in your podcast player Yeah. The the like, also the order in which your items have to be in the dump is also not What you'd want with mace like, Masonry still goes left to right, but columns goes top to bottom. Exactly. Therefore yeah. Yeah. It's hard to do the correct ordering that way. So this is exciting that this is finally

by the time this goes live, is the Rid.

man, this particular page really, really slow, kinda seems like this page is slow all the time, Then that's gonna be a good indication that we're doing something that we really need to take a look at. And I think that kind of stuff is so incredibly handy because, You know, at the end of the day, you really want to know just what the experience for your users is across your site, whether that is errors and exceptions or whether that is performance Maybe it's not. We'll see.

Rid. And that is awesome for I'm sure you're not going to be doing most of your website, but some sort of edge case stuff, this is going to be really handy. And then you can, Instead of just writing that same query again and negating it, you can have an if else rid. Comes along with a a few other UI controls about how to style outlines, which I think are all implemented now.

pretty easily. We talked about how to do that on the upcoming podcast.

You can say when these things are true,

Thank you so much to Century for sponsoring. We are also sponsored by Sanity, the unified rid content Rid. And one thing that you kinda need when you're building rid. The browser is still with the width of Yeah. They still hold their devices straight in Japan. They're not not everyone's not walking around. Their head turned 90 degrees in Japan.

And the first one is, very similar, very simple.

rid. It it's certainly interesting, and I I'm glad to have these kind of options. Like you said, we we can now do more conditional logic with this. Rid. Next one is going to be CSS Grid

syntax. That'll get you double the free usage tier. Also, check out the blog post about why Sanity and Shopify are partnering together. Thank you, Sanity, for sponsoring.

So if you are building a website or an online store and You wanna use Shopify and Sanity together, you're gonna wanna check out Sanity at sanity.i0forward/ But Shopify

CSS a website is you also need a CMS to hold the rest of your content, not just your store, but you need to have rid. Information about your product and all your marketing stuff and the rest of your website. Insanity is a awesome spot to put all of that data, And you can link them together Essentially, what is what's coming down the pipe in CSS. Anything else to add or should we wrap it up? Rid I think we should wrap it up. That's all I got. Alright. Thanks for tuning in. Catch you later. Peace.

Ready. Alright. Let's get on into it. The these are just proposals. These are things that

Yeah. None none of these are easy problems to solve.

when and else. So basically, an if else statement inside of CSS, rid. Which means CSS is a programming language now.

rid The new gap property.

Rid. And I think they're kind of interesting to look at as to, oh, I didn't know that we needed that, or that's a kind of a neat, neat use case.

Next one is CSS carrot, Wes.

Grid level 2 is subgrid, which I rid I need to add a couple of videos to my grid course about this, but now we're starting to look at it. And there's a new properties, masonry auto flow next, apply this CSS.

I think so because, like, I haven't heard of that before. It might there might like a lot of things in CSS, Sometimes it goes back to the print world where they would lay things out in

3 masonry.

and Firefox

That makes sense. Okay.

No. No. No. But this one is like,

It's been in Firefox for Yeah, buddy. 4 years. So it's it's not in Safari or the technology preview, and it's the no version of Edge out because Edge needs to update or whatever.

width and height because even if you're like you're from Japan,

Head on over to syntax.fm Let's rid. On. Oh, let's actually talk about our sponsors first and then get on into it. Let's do that. Our, first is Sentry. What do you got for me, Scott? Sentry is the perfect place to see all of your errors and exceptions happen in a interface that allows you to see exactly what's going on in your application at any given point. We sent you to not only keep track of,

But I'm using this right now just via post CSS. So this is a perfect use case for post CSS. Let me tell you. Rid. The one thing I always hated about media queries is you get into writing media queries, and then you have to remember, like, what like, the actual syntax for writing media queries whether that is like the

CSS color mix functions episode.

Yeah. I mean, the width is a keyword. That's also interesting that they said width and not blocking in line.

easily Karen is like you're typing and you see the little blinking bar and you move your arrow keys And the blinky bar will go between the characters.

The it what it does is it replaces the English language of media queries with greater than equals Oh, okay. Those types of symbols. So what you would then say is width

Makes sense. Makes I was sometimes wondering if people are just screaming at their rid

Media query range.

Let's see. Let's see what if that's part I would have thought that would be environmental variable as well, but maybe it's just a special I think it's just kind of similar to the RGB values we talked about with the

bin width or whatever I don't know anything about CSS carrot. Can you tell me about this? Yeah, this is

62.

Query And, CSS media queries 5 rid. Has some of the coolest stuff going on in it. One of which is the custom media query thing. So when we're talking about using variables in media queries, We said, oh, it's a big bummer that you can't use CSS variables and media queries. Let me tell you. This kind of turns that bummer into not a bummer because what you do is use app custom media,

Me, personally, it just It resonates so much better with how I think of this. This value is now in between 100 pixels and 1,000 pixels. And not only do you see it with the greater than and equal sign, you rid. See the the width character sitting between those 2 values or whatever. It it's fantastic. It's lovely. With this so in your example here, For those listening, it just says width is less than,

And then you give it a name like a CSS variable. But instead of using a variable in the media query, you're essentially defining the media query itself.

I like that. It's so handy. And you know what? Or any kind of thing. There's even user feedback tools built in to Sentry as well. So check it out at Sentry. Io. Use the coupon code at tasty Treat all lowercase, all one word, and you'll get 2 months for free.

is very, very hard. So that's that's a great use case for post CSS because it can be compiled

ranges. Let's let me let me can I use this thing? plugins. So let's do a whole episode on post CSS talking about what you can do there. Because the The next 2 things that I'm gonna talk about here are next 3 things are all things that I've implemented currently via post CSS and oh, man. They're awesome.

Like, you can put within between 2 of them. So you could also say, like, if the

Look for the inevitable CSS tricks article on it.

And then for media queries themselves, I'm using the some of these other 2 new techniques, which I don't know if you've seen too many of these. But,

the custom media query name. Bingo bango. That's it. So to me, this Is a better solution than e n v verse for custom media queries and variables within media queries, and you could use these 2 techniques together. We certainly do ourselves.

let's see again the can I use territory for this? Because this I think one is is almost available everywhere. Oh, wow.

for a full archive of all of our shows.

Yeah. Isn't that interesting? I wonder if blocking in Mine are also available values here. That's funny that you latched on to that where, like, I personally

CSS at rule at media range syntax from media query level 4. It's in Chrome, 104, Rid. Why? Because Rid Oh, yeah. It makes it sound nice. That's great because you can do that in meeting queries right now, but the chances of you goofing that up in the, like, 2000 characters to write that

rid. In Yeah. CSS?

Very true.

to determine the page width. You'd say width is less than symbol and then a number, And then that's the media query. If the width is less than this page or this number, then fire the media query. That's it. So it's just Placing the English language min with max with stuff with a greater than equal to greater than equal to whatever. And then you can also say,

in the

didn't even think about that. I was like, oh, yeah. The page went. Okay. Sure. Yeah. But that makes sense because the

doesn't use your regular carrot on your thing. They will they probably just use a div or a span that blinks it to the thing. So Can can you explain real quick for the folks who might not know at hand what a carrot is? It's a vegetable.

And I'm a big fan of that. Yeah. Okay. Next is CSS nesting. Now we have been using nesting for quite some time via Sass, Stylus, Less.

You can change the carrot in CSS. This is a proposal, is going to is has invested insanity.

Or an underscore, which will go underneath the character,

rid. A block carrot or an underscore carrot and you wanna change the color of that carrot, a stacking pattern.

editors or you wanna be able to do something like Versus Code in it. Rid. Right now, I'm pretty sure Versus Code

Or even just having, like, a custom color caret. Like, I changed the caret of my text editor to be thick and yellow, what who what's his name? Alejandro?

There are other popular carrots like having a block, which will go behind the character, And with the when and else rid. Properties, you can combine them

Nesting basically is where instead width is greater than this value but less than this value really easily.

you can do so. And I think this will be probably big But I 1st, remember it as CSS Masonry from the, and it supports Flexbox, then go ahead and do this.

So if you wanna have, rid. CSS platform. We've talked about Sandeep a lot on this podcast. And one kind of cool thing that we The podcast we did with the Shopify folks gonna be live? Who knows? Maybe.

We're not talking bunnies here. Yeah. Oh, okay.

On this Monday, hasty treat, we're gonna be talking about CSS proposals,

Welcome to syntax.

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.

one off little projects here and there for all my courses.

a table and you're accessing a table data inside of that that table. In the in the old world CSS, or drop a review if you like this show.

config. If you turn on the post CSS preset env,

or want to use. So it's coming to the browser. We talked a little bit about this in a CSS show, specifically, hasty treat CSS nesting one. There is a lot here, including a new keyword at Nest, which,

And, like, that was the thing I always missed. I was, like, I'm not gonna set up SaaS just rid. Just for this little project. It's almost just for nesting. Right? Yeah. And I'm almost just like, give me especially when you're trying to style stuff that's inside of a Specific card that pops up.

I did not use preset in the ENV. I kinda hunted my own, David DeSandro did, like, so many of those Really awesome plug ins. I I remember using so many of his what was it's like Packery was really good. Yeah. Plackery or isotope. Man, we used rid. So many Descendra plug ins back in the day. Yeah. Awesome. This CSS Grid masonry is actually really exciting, So just the value of the breakpoints.

it's it's very wonderful that it's coming sooner. I love it. Later hopefully. Yeah. I so I do a lot of, like, which is really interesting. However, I almost It's it's funny because I did what I ended up using e and v variables for in our site was I ended up using the e and v variables for So, that's really neat. And another one is a new way of writing media queries with ranges. Have you seen the range media query, Wes?

a a thing that people need to use, I thought it's David DeSandro.

my post CSS rid For custom

So one of which is envvars.

is may or may not be included in the end of result of this proposal. The syntax is slightly different, but we're nesting is coming. In fact,

in I should say current world CSS, you do table space

So I just set up, rid And finally, I was like, You know what? I'm already using Parcel and Vite.

t d to access that t d.

But With nesting, you've always been able to do table, the brackets, and then inside of those brackets, use the TD.

It just turns it on and it works good. It's a little bit of a you have to, like, look up how to do it because it's not exactly the same as Sass. It's not exactly what you would expect, but once you got it, man, it's so nice to have. Let's do an episode. I just put it on the calendar and a hasty on, Put on post CSS stuff because you know what? I've been diving deep into post CSS. We removed Sass from our project in favor of just going post CSS now.

of having let's say you have

And let me tell you, As somebody who's been, like, using actually some of these things in their code,

Really, really super nice. A lot of new CSS stuff coming. So We're gonna be talking about CSS at win and at else and masonry grids and CSS caret and nesting and e n v vars and One of my new favorites named media queries. So my name is Scott Talinski. I'm a developer from Denver, Colorado. And with me as always is Wes Bos. Hey, everybody.

some really fun, neat little things in CSS to get you excited about.

So these are kind of things that don't change in their env variables. They're kind of like constants in your CSS.

specifically.

the fact that you can use them in media query so you can set them up to be media queries, that you have to what what is It's so funny. I I haven't been writing actual CSS media. At media, min width, at media. Yeah. Max width. And I get into that, and I just think, man, this is not how my brain works. And they always have to remember those rules. And if you're doing it with Sass and whatever, you might not even touch those. For, like, a long time, we just had, like, stylus functions. So it's like, for me, the time.

The breakpoints

Env variables in CSS are basically variables that are set by the environment and not set by the user or the client.

And env variables could be anything from, like, a default spacing that you wanna have everywhere that's never going to change to