CSS Proposals @when, CSS Masonry, Carets

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.

Welcome to syntax.

On this Monday, hasty treat, we're gonna be talking about CSS proposals, some really fun, neat little things in CSS to get you excited about.

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

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.

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

People are having good experiences as well, and we use that to specifically, use their performance tracking metrics to really understand exactly how fast and how rid. Each, application 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, 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 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.

Thank you so much to Century for sponsoring. We are also sponsored by Sanity, the unified rid content platform. We've talked about Sandeep a lot on this podcast. And one kind of cool thing that we by the time this goes live, is the The podcast we did with the Shopify folks gonna be live? Who knows? Maybe.

But Shopify is going to is has invested insanity.

Rid. Why? Because Shopify is going all in on their headless, approach to building headless stores.

Rid. And one thing that you kinda need when you're building 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 pretty easily. We talked about how to do that on the upcoming podcast.

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

Ready. Alright. Let's get on into it. The these are just proposals. These are things that probably are gonna come, but maybe not.

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.

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

So the idea here is You can say when these things are true, apply this CSS.

Else, these things are true, and then else fall back to it. So, like, why would you need that? Well, maybe you want to target something in CSS. Like, For example, you want to target a media query, but you also want to target 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, rid The new gap property.

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

And with the when and else rid. Properties, you can combine them when the device is more than 400 pixels and it supports Flexbox, then go ahead and do this.

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

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

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.

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

But now we have a proposal for CSS Grid with Masonry. And what's interesting here is that they actually chose to use the word masonry, which 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?

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 a stacking pattern.

But I 1st, remember it as CSS Masonry from the, what who what's his name? Alejandro?

I thought it's David DeSandro.

David DeSandro, not Alejandro.

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

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,

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, Which is essentially just stacking them together.

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

Rid. CSS columns kind of does that, but CSS columns, you have to have a height on your container

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

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

being proposed. This is CSS grid level 3.

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, Essentially, it's going to add to the next column.

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?

Yeah. Totally.

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

Next one is CSS carrot, Wes.

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

very similar, very simple.

You can change the carrot in CSS. This is a proposal, rid. Comes along with a a few other UI controls about how to style outlines, which I think are all implemented now.

So if you wanna have, rid. A block carrot or an underscore carrot and you wanna change the color of that carrot, you can do so. And I think this will be probably big rid For custom editors or you wanna be able to do something like Versus Code in it. Rid. Right now, I'm pretty sure Versus Code 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.

It's orange.

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

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.

There are other popular carrots like having a block, which will go behind the character, Or an underscore, which will go underneath the character, which are very popular in the text editor world.

Or even just having, like, a custom color caret. Like, I changed the caret of my text editor to be thick and yellow,

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.

Nesting basically is where instead of having let's say you have a table and you're accessing a table data inside of that that table. In the in the old world CSS, in I should say current world CSS, you do table space 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.

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 a a thing that people need to use, 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, 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, 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,

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

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.

And finally, I was like, You know what? I'm already using Parcel and Vite.

So I just set up, my post CSS config. If you turn on the post CSS preset env, rid 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.

And I did not use preset in the ENV. I kinda hunted my own, 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.

So one of which is envvars.

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

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

And env variables could be anything from, like, a default spacing that you wanna have everywhere that's never going to change to the fact that you can use them in media query so you can set them up to be media queries, 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 The breakpoints specifically.

So just the value of the breakpoints.

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

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

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? No. No. No. But this one is like, let's see again the can I use territory for this? Because this I think one is is almost available everywhere. Oh, wow.

Query ranges. Let's let me let me can I use this thing? Media query range.

Maybe it's not. We'll see.

Look for the inevitable CSS tricks article on it.

CSS at rule at media range syntax from media query level 4. It's in Chrome, 104, and Firefox 62.

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.

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 bin width or whatever 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.

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

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 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, Like, you can put within between 2 of them. So you could also say, like, if the width is greater than this value but less than this value really easily.

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 is very, very hard. So that's that's a great use case for post CSS because it can be compiled easily to the equivalent.

I like that. It's so handy. And you know what? 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,

a variable small breakpoint. Is the width you can just use that. Is that just a a keyword rid. In Yeah. CSS? 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 in 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.

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 didn't even think about that. I was like, oh, yeah. The page went. Okay. Sure. Yeah. But that makes sense because the

even oh, hold on. That makes sense that they would use width and height because even if you're like you're from Japan, 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.

That makes sense. Okay.

Very true.

Makes sense. Makes I was sometimes wondering if people are just screaming at their rid 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 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.

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.

Rid.