Reacting to State of CSS Survey

Monday. Mon Monday. Hey. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflow, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda,

Boss, and Scott Welcome to Syntax. Today, we have the state of CSS.

This is a Survey that goes out every single year.

Along with the state of JS and all of that good stuff, and they ask developers What features are you using? What libraries are you using? Do you know about these things? What do you think about? Are you still using Bootstrap? Have you used Bootstrap less? All of that good stuff, and it's kind of interesting to take a look at where CSS is heading as well as like like what are developers actually using these days? And it's not perfect Because obviously it's it's skewed towards the type of people that take online CSS surveys. Yeah, but it's I think it's a pretty good look at what the industry looks at right now, so I'm excited to get on into it.

How are you doing today, Scott? I'm doing super good. It. It is kid's soccer season. I don't know if your kids play any sports, but our son has been playing soccer now for however many seasons, and He has landed on the same team as all of his little friends from high school, and that's good and bad. He's having a lot more fun being on his friend team. But, man, every single soccer practice has been like, please stop picking this kid up. Please stop Grabbing sticks and throwing them instead of doing your soccer thing or whatever. Like, I took a photo of, Landon on the sidelines of the last The last game. This is the game. There's a game going on, and he's on the sideline, like, sitting on top of 1 of his friends, like, wrestling. And I was just I was just like, I took a photo. I was like, I know you're supposed to be having fun, and that's, like, the best part. But, like, you you can't be doing this. Also, I asked him, after the game. I was like, how do you guys think we you did? And he was like, oh, I think we did pretty good, but I wish we would have won the game. And I was like, Landon, your Your team won the game, like, 15 to 4. Like, your team dominated the game, and the fact that you don't even know that Mita, you were not paying attention at all, which is it's kid it's a little kid's soccer, but it it's it's been it's been a lesson in parenting to be like, Yes. Have fun. So much fun, but, also, please, try somewhat, and don't, don't, you know, ruin other people's

The kids picking each we have a rule in our house is no picking each other up because the amount of time Oh, my gosh. Like when kids get excited, they try to pick each other up, which is hilarious.

And the amount of injuries we've had in our house where people get excited and someone gets dropped on a coffee table.

Just guts. Body slammed.

No picking up. You know? We're all little. Spoke to our yeah.

Yeah. Yeah. Yeah. Landon does something every morning, when we drop Brooklyn off, and he does what's called pick it. Hub hugs where he picks her up and does, like, a big hug. Yeah. And, like, 2 days ago, he just totally slammed her into the table by accident, and she's crying. And I'm just like, alright. Pickup hugs have gotta be limited to, like, an inch. We're not we're not picking up more than an inch here. Pickup hug. Oh, I'm glad to hear it's not just my family. The Pickup hug. Oh, yeah. It's adorable, but you gotta, you know, do it within reason, man.

How are you doing? How was your how how's your, CSS been going, Wes?

Doing good. Just rocking over here, working on Websites and whatnot. Pretty stoked about that.

We should say real quick brought to you by Sentry. Check it out at century.

Io.

So let's get into the state of CSS survey.

They obviously go through it. You can check it out at state of CSS .com and kind of go through all of the stats yourself. What we're gonna do here today is kind of just pick interesting things and provide some sort of commentary on Where we think all of that is going. Alright. So I think we should start with a little bit of Q and A. I'm going to ask Scott what he thinks about this and if he can guess.

So the features that are talked about in the state of CSS are things that are like new ish to CSS in the last 3 or 4 years or maybe in the last 6 months. So can you guess what are the top 5 most used CSS properties

or features. Sorry, not properties, features. Okay, and we're talking about used like people are actually using this stuff. Yeah, I'll give you A couple of

like examples of things that are not top 5. So where and has are high up there in new features that are being used. CSS. CSS nesting. Nobody's using has yet. Accent color.

Yeah. CSS has is like If if you respond The survey using has saying, yeah, I'm using has. You are

lying. You're straight up lying. Yeah. I was like, I've used it, but in demos,

You know? Like, not in any production. Yeah. Maybe that's the different. Have you used it first? Are you using it? I guess those are 2 entirely different questions. Yeah. So okay. Okay. Let's go ahead and just say we'll just say, you know, grid. We'll just say grid. Grid would be it's actually broken up into

finer

grid features. Okay. What about GAP? Give me GAP. GAP number 1.

Oh.

GAP is in. Is probably one of my all time favorite CSS properties. We're talking underrated kings here.

Kings and queens of CSS.

Gap, underrated.

Absolutely. And you might you might be saying, like, what's so special and new about Gap is it wasn't in Flexbox when Flexbox first was announced, And it was grid gap, and now it's just gap. And you can use it in Flexbox. You can use it in, Ingrid, and you don't have to fuss with margins or box model or anything like that. You just throw it in there, and you're good to go. Fall into the gap, man.

Right. Number 1. Good. Number 2. I'm impressed, y'all. I'm impressed. I can't believe you caught that. Well, I was I was like, It was one of those ones where I was gonna say, if it's not on the list, y'all are sleeping on gap because it's it's rules.

Okay. Okay.

Let's do, it.

If we're doing individual properties here, justify content.

Nope. 2nd grid. Okay. Yeah. No. I use justify content all the time. The the rest are not CSS Grid. Okay.

Cool. Good to know.

Not CSS Grid.

We have it it's interesting if these are, like I I, like, Get stuck on whether it's brand new things or not brand new things. Right? Because I'm I'm trying my brain goes to, like, what's the stuff I use all the time? Like, I use opacity all the time.

Let's go ahead and say translate

as a property. Not in there. Nope. Not in there. I'll give you I'll give you one more guess, and then I'll go through the rest. Okay. Let me What is that? They're not just properties, so, like, features of CSS.

Okay. Features of CSS. So like container queries. Container queries is number

20.

Oh, geez. Okay. That's okay.

No one's But it's it's saying that 31% of people have used it. I find that hard. 31% of the people who have filled out the survey have used it because 31 of the percent of the people who have filled out the survey would like to flex that they are using stuff like container queries. Yeah.

But I, myself, we're using it in the new syntax site, so I can't even say that because I you go. I'm

actually using it in real world. Let's say CSS variables because we love those folks. Number 2. Ding ding. Yes. So first is gap. Second is CSS variables at 94.3%, which makes sense. They've been around for probably 7, 8 years now, if I were to guess. Number 3 is aspect ratio.

Yeah. Wow. That's right. That one, like, came out of nowhere, like because We haven't had it that long, but once we got it, everyone's like, boom, aspect ratio

all day long. I need to size an iframe or a video. Or or even just an image. I want this image to always remain inside this aspect ratio, and I want it I want it to overflow hidden. You know? Super useful. CSS filters. 80% of people have used it. Filters. Yeah. Okay. So, like, what's your what's your favorite filter? I mean, my favorite filter it. Is is, is, a saturation just to do grayscale. But you know what? The the drop shadow 1 I found to be very unpredictable across browsers. So, a lot of people go for is it is it drop shadow? Is that it? Is that the actual property of the filter? Yeah. Drop dash shadow. Yeah. I found drop shadow to be extremely unpredictable and very performance heavy. So,

what button if you're a fan of that one. Would you use that for? You just apply it to an entire element and it has a shadow

Based on its contents? Check this out. Check this out. Okay. You know the classic problem. You got a rounded corner something. You're building a little text bubble, and it's got a little triangle that you maybe did with the border trick. Yeah. Can you get that shadow to be on the triangle? You can't do a shadow, and the triangle will goof everything up. You can do some z index tricks to make it work, but at the end of the day, it's,

so you gotta do shadow filter on that. Damn. I don't think I knew about CSS drop shadow filter.

No. I definitely did not know about that. I in the times that I've used it, I've ripped it out because of performance issues. So I said I there's a better solution here somewhere. I don't know where. You know, my Number 1 is hue rotate.

I did some really cool demos. I should tweet them out, with hue rotate And, rainbow gradients that basically you do a rainbow gradient and then you change the hue on it And you animate the hue rotate from 0 to 360, and it goes. And then like I you overlay 2 gradients And use a mix blend mode on top of each other. So different colors are always overlapping different colors, Because they're 2 different hue rotates, and then they're mixed blend moding. Probably awful for performance. Yeah. But, like, sick, sick demo.

It looks really cool. Let me just say,

if y'all are out there and you wanna flex on a underrated hot CSS property, mix blend mode it. Mixed blend mode. Dan, you can do so many cool things in this mixed blend mode. And I remember getting a lot of demos back in the day when a lot of designers use Photoshop, and they'd blend modes inside of your your comps, And then you're like, I can't do this. You're gonna have to figure out some way to do this blend mode.

But the blend moding, you know, I I used it extensively on the new level up design, and I found it to be just really great, overlaying gradients on things, doing, like, clips with, s Or or that's a whole another whole another world. Masking and clipped clip masking and and masking in CSS.

Yeah. S. There's a lot of really cool CSS features that I don't think get their shine because they kinda just came out in a in an era where things were just coming out low key. It wasn't like a big Part of the CSS 3 jump, and it it isn't a part of the, you know, big layout features that we all love so much. Yeah. I'm gonna I'm gonna send you a link,

And I'll put it in the show notes as well.

That is going to show you what Hue rotate will do.

The code pen. Code pen? Oh, yeah. Look at this thing. This is lovely. The neon d you made this? Yeah. I took, like, a it. Because they do even know what the the neon demon is. This is not the type of thing in your wheelhouse, so I'm very surprised that you would use this movie poster.

It. Yeah. This is a, this is not a movie I've seen even. It's from the director of Drive, which is a lovely neon movie. But, yeah, this is neat, man. This is great. This looks like Hologram and all sorts of cool stuff. You remember those, like, little stickers you used to get as kids? They would be straight up hologrammy,

Foil type. I have, lots of those. And whenever I do a sticker pack, I do a hologram one. I specifically went to the The person who like, the vendor who makes the, like, North Face authentic stickers. You know, you buy, like, an expensive piece of clothing, and it has, like, a little hologram gram on it to say that it's legit.

I was like, can you just make a big one of those? And so sick. There's you can do 3 levels of I don't even know how it's printed. Like, laser etched, and then when you move it, it goes all hologram y. Yeah. Well okay. That's that was a fun little quiz, Wes.

I, I don't have a quiz for you, but I think we could start out with some of this layered stuff inside of this survey. Now one thing that I you know, if we even start the very first one, you'll see that, it. You know, the the people who have, quote, unquote, used subgrid have has moved up by, like, 10%. And I have not used subgrid because the feature support for that is still iffy. I really question I wonder who's using subgrid right now, And I would love to see, like, what kind of stuff people are actually doing with subgrid, or is it just that they they followed a demo? Because, Even, like, Chrome has not had good support for subgrid until very, very recently. It it didn't drop in in Chrome until version 117, And and even then, like, Edge doesn't have support, to give you an idea, because Edge is usually almost, like, right there with Chrome. So Edge still doesn't have support for subgrid, but it. The latest version of Chrome does.

This is one of those features that every time I need it, I feel like I really wish it was here right now. And since it's not here, I'm just going to put it out of my brain. Do you think we will get The ability to use full subgrid on actual products, feeling okay about it by the end of the year, I'd I don't I don't think so. You think so? I was gonna

share things up. Because it's it's in it's been in Safari for over a year. It's been in Firefox for 4 years.

It only just hit Chrome.

What, like a couple of months ago, so and it's behind a flag on edge. Like, I give it.

Like, 2 weeks. Really? And and we're we're gonna be able to start using it? I, like, I I might even do it. I have something on the Syntax website right now Where I'm like, ah, they could really use subgrid for this, you know, because it's nested. Yeah. But it gets if you look at the global usage

Of the browser versions that people are using, it gets 18%

Yeah. Because usage. Because it only hit Chrome like a couple of weeks ago, you know, but like how quickly that maybe the question we should answer is how quickly does Old versions of do or do old versions of Chrome drop off? You know, like let's see.

Chrome 114 and 115 Have 14% global usage.

116 has 5%, and 117 has 0.02.

When did 117 come out? It it yeah. I think the concern is you know what I would love to have would be, like, a graph that were to show me this global usage percentage for subgrid over time Because I would love to to do that exact experiment to see, like, alright. Here we are. It is September.

What it. Does that percentage look like by October given the fact that it's released in Chrome now? So Yeah.

Honestly, I think Chrome is the least of our worries because The big one was always it's you got to wait for Safari because people got to update their phone, you know, and it's been in Safari for quite a while now. It's in the last 3 versions.

We're in pretty good shape. Obviously, there's old still older versions of Safari out there. Mhmm. But But But as long as it's in Safari and Safari Ios, you're you're,

Gucci for, most of the mobile web. Maybe not most. Half of the mobile web. We'll say that. Yeah. The other one is, like,

Samsung Internet never has any support on stuff. We've talked about that in the in the past, but Has very, very, very little actual usage.

I'm gonna say if you're yeah. Depends on what type of projects you're working on. Obviously, if you're working on the syntax.fm website, we're not writing CSS to support Samsung Internet browser, because I I can't imagine too many people are are keeping Samsung Internet browser, and they're not just going for a Chrome on there. You know what's the big one is Chrome for Android. It's It's not even it's not in Chrome for Android.

But Chrome for Android is always parity with CS. Desktop Chrome. So I imagine Yeah. This is version 116. So when 117

drops 4

Hopefully, it'd be in there. Yeah. The can I use needs an update, man? This is like I don't care about, like, half of this stuff, you know? And, like, I maybe I can can dial it, They're like I feel like this could they're I feel like they could do a better job at

saying, what does this information mean? You know? Yep. Yeah. I agree, and I think, I think can I use has been the exact same in, what, 8 years now? It's been the same forever, so I would love to to see a modern version of this. We don't need Opera on here.

You know, it's it's using Chrome

and nobody uses that. So isn't that what that baseline that web.dev baseline is trying to do? They're it's, like, trying to be a more streamlined version of that, maybe less information.

Hey, you know, we'll see if that catches on. Oh, you know what? I'm pretty sure

can I use allows you to make your own browser sets? So maybe I'm whining about nothing here and just need to dial it in myself. Yeah. But guess what? When you make your own sets, it's, it. Hit that page with a refresh. It goes away? Yeah.

What?

And it's not it's not, maybe you have to make your own in, like, Browser shown. Add new set. Yeah. It doesn't I think you might have to, like, do it on a per feature basis or something. I don't know. I haven't had time to mess with this, so don't take my word as as, So that was like 10 minutes on CSS subgrid.

Hey. So that's what the show is all about is getting into Getting in the nitty gritty and kind of just riffing on it and talking about it.

CSS logical properties, so that is instead of using top, Right bottom left, you use inline and block values, which is a couple benefits To that, one one benefit is you can set like inline would be for most people listening to podcasts left and right and block would be top and bottom, except if you were to change the writing mode of your page or of a specific element, Then the values will follow it. And that could be handy not just for people writing Japanese websites, but it's also handy if you are ever writing text on a vertical plane, and an example I have is chapter 1. I have a big heading on top of it, but But when you get on mobile, maybe I want to put the chapter, like, along the side as you scroll through the words, right? Or maybe sections of this podcast you want to As you're scrolling, maybe I want to put the text on its side.

So adding margin as a block value When it's left to right, it's top and bottom. But as soon as you change the writing mode, the whole thing just rotates and the Margin values adjust for that, and you don't have to, like, turn them off and then put them on the top and bottom after that. So it Could be pretty handy, but again, I'm super surprised 35% of people have used logical properties because I don't feel like it's

Something that's been caught on. Yeah. Yeah. I I hardly see him in the wild, to be honest. But, again, you know, I'm I'm not seeing every website, obviously. It. I I thought it was interesting that only 21% up from 14 last year are using media range.

Media range syntax is really nice and handy if you're writing media queries. It's a shorthand for writing media queries. It has excellent browser support. You don't have to worry about the browser support for it, And you're basically just turning your media queries into greater than or equal than equal to, syntax like you would, it. And it it reads really nicely. Me, personally, my brain reads it way better. Maybe it's just me, but I think it's a a super underrated feature that, I think could be, way higher up here in terms of usage. Here's one.

I have no I've never heard of this. Object view box.

Object view box. So, of course, there is a, blog post, first look at object view box, which is it. Do you know have you ever heard of this? No. But it seems like it's a way to crop images.

So it's, like, kind of like an overflow hidden.

It. Like, what makes this better than overflow hidden? Is it half does it have to do with how it's rendered? Is that the the benefit here? Like, let's So you have an image

that's of Scott and I and you want to crop Scott out of the photo and you just want to you want to put me in there, Right? We say let's say make this photo worse. Is that what that's the Make this photo worse. Yes.

So when it has a class of worse, If you wanted to crop Scott out of that, you'd have to wrap that in a div and then scale the image up and do a bunch of math And then Overflow hitting on that div. This allows you to simply just have an image, let the thing load, and then you can Zoom it in, crop it based on inset values, and then you don't have to wrap it in a div. Oh, okay.

Yeah. That is handy. You don't have to pollute your markup with stuff that doesn't need to be there. For a long time in CSS and still to this day, it. The solution in many of our problems is just to add more divs and then do some workarounds around it. So anytime we can have some properties that, like, it. It's so funny because I see this, and I say, why not just add a dev and overflow hidden? And then it's like, that shouldn't be the correct solution. Right? But I I guess our brains are so programmically,

it. Lee, infused to do that. You know who needs this is all those websites that show you a shopping photo, And you hover over top of it, and it does that, like, zoom in, which is nice. You can zoom in to see it. But if you wanna, like, open the image in a new tab, You right click and there's a div, so you can't find it. You have to inspect element, find the image tag.

If it's just an image tag, you could reimplement a That Zoom functionality

simply And you know those are all built with jQuery version, you know, 1992.

So, that would be a nice little win there, not having to ship an extra version of jQuery.

There have you have you used anchor positioning, which is also on this chart? Anchor positioning has a a very, very small usage percentage. Only 2% of people have used it. And have you heard of anchor positioning?

I have never heard of anchor positioning.

Okay. What does this do? Well okay. So here is a little problem created by, created by web developers. And the problem is created by web developers, so we need a solution to it. And that solution is anchor positioning. Let me tell you, I ran into this, this problem very specifically getting into the new popover APIs.

So on the new syntax website, we're using a lot of cool stuff. In fact, you can check out our code. It's open source. One of those things that we're using, we're using the dialogue element. We're using the popover API.

And what these things do is they utilize a new feature in browsers called top layer.

And so what top layer is is it essentially takes your item it. Out of the rendering flow context completely of your application and sets it onto a top layer. It. And this is beyond anything that you can do with z index to put something on top of something. It's like opening a modal. Right? That modal should always appear on top. It. You shouldn't have to worry about if the header z index is on top of this. Right? So in comes top layer to save the day. Top layer sits on top of everything. It. The big bummer about that is then you have a popover that needs to be anchored to something else. Like, let's say, perhaps, it. In the syntax website, we have a sorting menu. That sorting menu is done with the popover API.

I want that sorting menu to always be anchored to the bottom of the button for the sorting thing, but you cannot do position absolute top whatever because it's out of the the rendering flow of the document.

So it does not respect position relative containers the same way position absolute typically does.

It. So in comes the anchoring, position anchoring, which allows you to anchor something to something else.

Now granted, this has a polyfill of which I found to be very unreliable.

So the first thing I did was implement the polyfill, And I found the polyfill to be very hit or miss, and we could not ship it. So I pulled out the polyfill, which is probably why usage percentages on this is so low.

Support for this is bad. Polyfill is not, usable right now reliably.

Yeah. I I did a straight JavaScript solution. I wrote a Svelte action to measure the current position and then just position it automatically. I needed this.

So what this does is CSS anchor positioning will allow you to position elements Relative to another element. So you have usually, it just finds the closest relative parent and uses that as it. But this will allow you to specify an anchor, an anchor name. And then on another element, you can say position this thing. Absolutely.

But relative to my anchor, and that might be another element somewhere else on the page. So this is Something that I needed in the new syntax website. So I'm doing multiple levels of position sticky.

And If I I fixed it another way because position sticky allows you to stack, but I had the title of a section and that could be something as short as New CSS features, or it could be something that's really long. That would be multiple lines. And if I wanted the current speaker to be Stuck directly underneath that, I didn't know how high the parent would be. You know, like, I could I could say top 10px, and they would just put it 10 pixels underneath. But you it's never nice to have to, like, hard code those values. Right? You should be like, What I wanted to do is I wanted to say position this a 100% under the header regardless of how big the header will be, and this would allow me Do that.

Yeah. And, check out you might even find useful the, it's called in in our code base, it's called, use or s. Or it's just called anchor dot ts, but the action is called anchor. So you do use anchor, and you can give it a, a position, and you just anchor something to something else. It. It's, it's kind of an interesting little little action I built to ease the pain here for this API not being here. S. But the actual API is really interesting because there's a function, anchor.

Anytime we get new functions in CSS, it's really interesting. So, Yeah. There's a lot of really cool stuff. I implore you to check out the blog post on the Chrome developers that these are the Jay did a a blog post on this that it. I used to learn about anchor positioning when I was first learning about it. They they were actually super kind in going through some of it with, with me on Twitter. Alright. Let's get into shapes and graphics on here. We were just talking about blend modes. Blend modes only used by 40%.

It's a small bump up from last year. It. If you aren't on CSS blend modes like we said, they're really, really great CSS filter effects. A lot of people using those. Backdrop, filter about 50% of people using those up from last year.

Intrinsic sizing keywords, Does that mean anything to you, Wes? Yeah. That's

max content, min content, fit content, and stretch.

So you can set something to be the size intrinsically instead of an explicit value.

I don't know that I like, it's still a working draft, but I don't know that I have I guess I've used it in grid, and Flexbox. You know? Like, fit content

Mhmm. In content, mass content. Yeah. What's interesting is that, these properties, at least in some regard, have been in Chrome with a prefix since version 22 of Chrome.

Wow.

What? They they they, yeah. They've existed for a long time, so they've been around for a little while. But, still kind of body support in Firefox Where not everything is available, some are behind the prefix still.

So is life. Right? Yeah. Relatively new. Only hit Safari 16, And it is currently

kinda implemented in Firefox. So Yeah. Here's here's a fun one, Wes. The view transitions API has been a hot topic on web dev Twitter lately, both for many good reasons that, people are seeing view transitions demos. We talked to Fred from ASTRO. ASTRO it. Has implemented essentially a backwards compatible version of view transitions so you can use this API in AstroSite. So you're probably gonna see this number going up because When the time the survey hit, Astro had not been announced as having that, so it was only at 4.2% usage.

And And so this wasn't even on the chart last year, and I think next year, we're gonna see huge bump if people are actually using Astro. But we're shipping this API in the syntax website without a polyfill, and it's gonna be for Chrome folks and whoever gets it.

Do you think here's my question that I'm posing to you. Do you think it. That the view transitions API will be a net benefit because we'll have websites that utilize this well or a net negative Because we'll have more websites that utilize this feature poorly. I think in that benefit,

with anything, you can go ham. You know, when we got translate or transform, no transition. When we got transition and you could just put it on anything, We saw it abused a little bit, but on most sites, it's it's good. On most sites it's done tastefully.

So I think we'll probably see people go a little heavy handed with it initially, but it's sure nice to be able to do that type of stuff. And I think it's going to be a net benefit because of the context. Going from 1 page to another when the UI changes, this allows you like Animation is not just for, wow. That's cool. Animation is great for providing context as to what just happened and where should I look now. Yeah. It. And I I a 100% agree with you. Having these tools at our disposal,

what a lovely future we have for the web here. So, it. I can't wait for this thing to hit, you know, full on support or anything like that. And, I mean, I I probably will be on the end of abusing it And then having to pull myself back and make it, like, you know, not abused because I I wanna I wanna do it on that. I wanna view transition everything.

Yeah.

Let's talk about some of the color stuff. So we've done a couple of shows in the past on the up and coming updates to colors in CSS. So we have color mix, which allows you to take 2 colors and mix them together.

We have the new wide gamut colors, which is the Okay Lab LCH, which allow you to turns out there's more colors in life, and the browsers were not capable of displaying Playing them even though lots of displays were. So there's new ways of defining colors. They make your gradients and And stuff look really, really nice. So And and let me interject here and say, this is a rare feature that's not just limited by

Your browser is also limited by your display.

So the good news is is that p 3 colors, That's the color space. Typically fall back automatically to a worse version of the color, but it's not always the color you want it to fall back to. So it. You have to specify a specific fallback if you are concerned about how this will look across every browser

and The one I'm the one I'm most Excited for is the relative color, and that seems to have, like a jump in people who have heard of it from 24% to 32%, But no change in people that have actually used it because, yeah, of course, we're kind of waiting for it to to do. And I hope that this podcast helped contribute to People that have heard of it, but that's going to allow us to say things like take this orange and make it a little bit darker or Take this hex code and convert it 20% opacity, right? It'll basically take a color, Split it into RGB or HSL or LCH, and then you can do math with those variables and then return them as whatever you want. You can tweak them, turn them up, turn them down, replace them, divide them, whatever it is that you want to get your color. So I am stoked for that to

be in all the browser. I think just Safari at the moment. Yeah. Can we give Safari its flowers for being the first one to support that? Because it. That is really one of the the most exciting color based APIs for me personally.

Mhmm. Color themes and systems, relative colors is gonna be words that Rome has it behind the flag. Who knows about Firefox right now, so it does seem like it's a long ways off. There are polyfills that are based not Poly fils, like, essence of transforms that are based in, like, lightning CSS or post CSS, but they are not dynamic, making them fundamentally useless in my mind. So, they exist, but they don't really they're not live, so you can't use them with CSS variables, which really kinda defeats a lot of the purpose to me personally.

Safari's been Chugging with a lot a lot of the layout stuff, but a lot of the CSS color stuff, and probably because Apple cares so much about colors and stuff like that. And they have these beautiful displays that can be display all these really deep and beautiful colors.

And Like, well, we got to get people using them, right? Because, like, especially if you look at a phone that doesn't have that and you look at an iPhone, you're like, man, I can't put my finger on it, but this looks good. Yeah. Yeah. You know, there's a lot of those, like, little weird things like

the, Like, when it gets into, like, 120 hertz, you're like, I can't tell exactly what this is, but it looks good. You know? Here's a here's a question for you, Wes. What does Accent color do. I know what it does. I just want to hit you with this. Accent color is like

like in your OS, You can define what color buttons and, like, a focus color and drop downs And if you want to pull that preference in

to a website, that's what accent color does. Yeah, that is. What about current color? What does current color do? Go. Current color is

the very first variable that's been around in CSS for probably, I bet 15 years.

And that will allow you to do things like Launch the and Really?

Well okay.

Chrome got it in 2010, so that's not quite 15 years.

13 years.

Firefox got it

in 2009. So yeah. Okay. So it allows you to do if you set the color of like text, like the color property on an element and you want like the border or something else to be The same color. You can use current color. It's not all that useful anymore now that we have CSS variables, but at the time It was a really good way to dynamicize your elements. Dynamize. Hey. And you know what it's really good for now is,

you know, a lot of times people wanna set it. Colors inside of their SVGs to be dynamic. You can use current color inside of your SVGs and have it Set the color on the container, and then you're SVG. Look at the color. So it's super useful. Alright. Let's talk about some interactive stuff. We got scroll snap, which, believe it or not, it. 38% of people who have taken the survey have said they use scroll snap. I have not used it personally, but it's one of those features that, it. You know, you've always had to do JavaScript to do snapping when you scroll. We're we're we built all these different carousels to do scroll snapping. And it. Now we have it, and I, like, cannot be bothered to try it. So, have you used this one? I, yeah, I have used it in a couple couple use cases. It's really handy if you're building like a slider or some piece of

application UI that obviously needs to snap to a specific value.

But the other one that we have here is overscroll behavior.

I have not used this one, and I think what this does is it controls Whether CSS property to control the behavior when a scroll position of a scroll container reaches the edge Of a scroll port? What? I thought what this is, you know, in Versus code, you scroll to the bottom and there's no more lines of code.

Sometimes I like to like I want the last line of code to be in the middle of the editor. Right. You scroll past.

So Overscroll behavior.

It can oh, well, that's interesting. So let's say if the overscroll behavior is contained it. And I'm within a container, and I'm scrolling down, and I keep scrolling down. It hits the bottom of it. It's not then going to keep the outer container scrolling.

It. So, you know, that's, like, a huge problem that if you're in a in a scroll window and you scroll to the bottom of it I'm thinking, like, YouTube playlist. Right? You scroll to the bottom of it. You get to the bottom. It. You don't want the whole window to then scroll up. You can use overscroll behavior contain, and none, What does none none how does none kinda seems like it does the same thing, so I might need to dive in here and see what the difference between That's that's actually really handy because Because I have this MX Master 2,

and this wheel is like I can I could spin this thing like really fast? And sometimes I do that on, like, an embedded scroll port and then you hit the end, but the mouse keeps scrolling. So then the whole page Scrolls down. Right? So if you want to stop or, like, like, embedded map or something like that, if you're scrolling on it. A lot of issues that that becomes a problem.

What about touch action? Touch action. 22% of people have used it. I don't think I've ever heard of touch action. I feel like I have a pretty good handle on a lot of the CSS stuff, but I don't think I've ever actually hit this. So I think what this is.

You can specify on an element what is allowed when you are on A touch action. So like if if you want to stop somebody from pinching and zooming in on a specific part of your application, you can do that with JavaScript.

Right? But This allows you to specify what the actions are.

Pan X, Pan Y, Pinch Zoom Pan down. Double tap. Double tap.

Yeah. Again, this is that the Google Maps is embedded is a big issue where You want to scroll a map when it's embedded in like a mobile website and it tells you if you want to scroll this, use 2 fingers, you know, because Is the person trying to just scroll down below the map, or are they trying to scroll the map itself? And sometimes a hard time.

That could probably be remedied somewhat with this

touch action. Yeah. There's a lot of these little things in here. And once we get into the typography, You know, you got, like, line clamp, which, again, you know, these things pop up every now and then. Like, line clamp, it's a CSS property that will contain text to a given amount of lines. It's like, I know these things existed, but it it it is funny that when you see them pop up, The first thing goes, what is the what in the world? Or variable fonts. You know, the web font that we use in syntax for the new it. For yeah. That's weird. I I I guess it's, like, dependent on the fonts you're using. Right? But Yeah. Variable fonts allow you to essentially control the font on a scale of italicize in boldness instead of steps. Right? So instead of it being stepped, you can scale it. Meaning, it. You could animate any of those properties or get it to be exactly where you want it to be on a, like, even per letter basis. There's a there's a lot of, like, really neat things you can do it. With this text based and typography based wise.

But our our new font is a variable font now, so we can start to explore some of these in action.

Especially with mono spaced fonts, which are. Yes.

Yes. You can change the boldness.

May I say it's not bold, but you can change how wide or how bold a font looks without actually changing the character size.

So it's kind of cool because you can do some Interesting effects with it without actually having the text readjust itself on the page. So I've been playing with very there's a really nice website that shows All fonts that are available as variable fonts.

And it's a really neat way to get multiple font weights or multiple font displays Out of a single

actual font face. What what website is that? Vdashfonts.com.

It's it's wild. There's, like, hundreds of different Fonts.

347 different fonts, and you can use it shows you what variables are allowed to be changed. So the weight of The font or the optical size of the font.

So I guess it's kind of boldness Of it, most of them have a weight and a optical size, but many of them also have a width that you can provide so you can get that really popular.

Like right now, all these websites are having like really wide text.

And then you can also change the analysis ness of them so you can go from 0 to 20 degrees

tilt on a bunch of them. Yeah. And some of them, you can change even more than that. Wow. Like Roboto Flex, you can change Wow.

You could change all kinds of stuff in this.

Wow.

This one has expression.

So it goes from a totally normal aerial sans serif font to, like, old timey.

I'm writing a note to the king, and that is called expression of 0 to 100.

Yeah. The this one, you're you're changing all the end like, the x height, the, you know, the y height, like, the individual, the widths of of different the extenders, the descenders.

Look at me with my typographic knowledge here. I'm just dropping, Lango.

Wow. Okay. Cool. So okay. I I'm interested to see what it. Our variable typeface can do. I doubt it is this much, but I am really excited to play with this stuff while they send these This one called Pangiovar

has 9 different variables. The weight, italic extenders, Oh, especially for, like, the Russian case. But, like, if you have a a g, how far does the little Neck of the G go down. I'm sorry. All font people. That's probably not it. Aperture descender. It's a descender.

How far does the C close spacing? That's pretty simple. Ink traps.

Single story G. Oh, you can change

a Which type of g you want, if it's got a big neck or not. I I found even some some really neat applications of this beyond just like, oh, look at this. The x height can change. So there's a couple in here that you might find interesting, Wes. There's one called wave font and one called line font.

WAV font, yeah, is essentially like a bar graph, and line font is like a, it. A little line. So I don't know how you work with these things. They're they're dingbats, you know, adjacent, but they look, like, very useful if you could do that type of it. Painting with text fonts.

So cool. Yeah. Variable fonts are cool, man. Hey. I think that sounds like a a great episode title for us. Hey. Variable fonts. I think we might need to have I think this happened last time is we got in an hour into this and we're not even.

We're probably not even 20% of the way through the CSS thing. So let's let's finish off the features of CSS and then maybe we'll do another one to talk about frameworks.

CSS. Super interesting is to see the drop off of CSS and JS.

So I think there's we we could talk a lot about that. Yeah. Yeah.

Let's talk about accessibility features here, before we we head out. And I guess there's some other CSS features. It looks like just about the same amount of people are using prefers reduced motion. That's the ability to turn off animations for, people who, it. Prefer on their device to reduce motion, prefers color scheme so you could have A 6% jump Been people using first color scheme means meaning that everybody's implementing dark mode. Everybody's implementing dark mode. It was a hot thing. The new syntax site has a light mode, a dark mode, and a system based theme as well. The default is the system based theme.

There's actually a little hidden theme picker on the new site. In fact, there's a level of tutorials and a century theme as well.

Prefers reduced data, that's an interesting one as well. You could degrade various aspects c s of your CSS, essentially, to make them load faster for people who have less data available. It. You can display none things, obviously. It'll prevent them from loading. Right? Mhmm. Prefer contrast for those of you who want contrast, forced colors, forced visible.

Glad to see that all of these things are mostly

ticking upwards. Hopefully, we'll see them tick upwards even more next year. Right? Moorshed colors is one I have not seen before. It looks like a user of a browser can force a browser to use specific colors for outlines, backgrounds, borders, text, etcetera.

And you can use Forced colors to detect if a user agent has enabled force colored mode. Interesting. It's a bummer that the

c s CSS author has to implement that. Right? Like, I want a browser that if I say force this color, I want the browser to just force the color, for me, I don't I don't want the to be like, oh, the site doesn't force the color because,

the below example only yeah. Oh, I see. So you can write a media That says at media force colors active. So when somebody has forced it, then you can change the border and you get a variable called button text.

Mhmm. So like what the user has specified to p x button text solid.

Man, That's pretty that's been in Firefox for been in all the browsers for a long, long time. Yeah. I have not not had that before. But I guess, like, if you Have a website and your user is trying to literally overwrite your CSS to make it work for them, Then you should be able to you should double check that your website looks decent, you know, like you're not having a weird Like dark mode sometimes goes weird. So imagine the weird stuff that could pop up when people are forcing the overrides.

Yeah. If you wanna try any of these accessibility features out, I found Polypane to be the best way to do that. Easily toggle any of that stuff. Polypaint's a a neat little browser, has all these accessibility features built in. So if you're out there and you're like, I don't know how to work with any of it, Polypaint will do it for you nice and easy. I think all the browsers We'll do it nice and easy too, but,

they make it a little bit easier to find on individual panes. The last section we have here features just other features. Some interesting one is CSS Has jumped almost 20% in people who have have used it. 51% People have used it? Oh, people 51% of people who have who responded,

38% of people who believe that. Seems I'm sorry.

That's extremely high.

For the support it has? Yeah.

Where has 28%. Where and is are are really handy, although, not as useful now that we have nesting, which is is good. Still still useful, but a lot of the use cases where I don't wanna have to rewrite the selector many many times. You're telling me that

more people have used, has then individual transform properties. I don't buy that. Individual transform properties, you can just do a trans translate property instead of transform translate. They're super handy. There's no, like, rotate property instead of translate or transform rotate.

One of my favorite ones on here, Wes, that is only seeing A slight intake was at property probably because the support there isn't isn't there for it. Actually woah. At property now, As of right now, it's supported in Firefox. So it has 81% support. You can use at property, folks. And what is that for? It. So at property is part of Houdini. It allows you to to define, believe this, a type for your CSS variables.

We love TypeScript so much. We put it in our CSS variables.

So it allows you to define a type for a CSS variable, enabling a lot of really cool things. It. The the number one easiest, solution that this enables anybody's ever tried to put a CSS transition on a gradient. You'll know that you cannot do that, really. This allows you to do that because what you're able to do is define variables as a specific a type. And if it is a specific type, then the browser then knows how to transform it beyond it just being a string. It knows this is a color. It knows this is a pixel value, whatever. In fact, I I could list the the types out here, but Wes hates it when I do that. So CS go to, Off the top of your head, can you name 5 different CSS types? There's more types of CSS than JavaScript, I think. Yeah. You know what? I could have because I I I read them really quickly Okay. During my last conference talk, and I I don't know if I can remember them.

But, obviously, there's gonna be, like,

Length. Yeah. Length would be like a pixel percentage.

There's gonna be a color.

Yeah.

There's gonna be font size.

Is that one of them?

No. Wouldn't that be a length?

Like, a a font size is a pixel or a rem or m or Yeah. But it's not a length. Yeah. I guess I guess it is a length. It.

Number is 1.

Time. Time. Time. Yeah. Like like seconds. How long a How long an animation should take? Rotation? Is that one of them? Angle. Yep. So Angle. Yeah. Okay. It's it's angle because what are what are the different types of angles that you can specify in CSS. Degrees, turns,

radians, and yeah. I don't I don't know other than that. Yeah. Turns are the one that nobody remembers. Yeah. The hell is a grad?

It's a radian. A gradient. But there's no. There's there's we have radians and gradians.

Oh, gradients. One full circle is 800 grad, and 1 radian is 1 rad. I I tweeted about using turns the other day, And I got so much hate people like just use degrees.

I was like, turns are super handy. Like turns are way easier to have.

If you have a 4 out of like, you have 10 notches, and maybe 10 is not a good idea. You have 12 notches.

Right? Yeah. And you have you're at 4.

What's that? You know? Yeah. How about this? How about we get a new one that is, like, o'clock? So you could say it's at 12 o'clock.

That's the new rotation property.

URL image, color, length percentage, Length percentage and percentage. Oh.

Number it's kind of fun to dig into the nitty gritty of this this type of stuff, you know? Yeah, it's very Resolution.

Oh, DPI. That's that's a show we should do. The Wild West of print CSS. Oh, yeah. Somebody somebody messaged me the other day and we're like, Hey, I need to print a custom identifier at the top of every page only when it's printed.

And I was like, CSS counters and print Style query.

It's a I I laid out entire book in CSS once.

It's a wild, wild world. It's a wild world. I remember it. Desperately having to support this, and I supported this as recently as level up tutorials to do our invoices and stuff like that and make the invoices look nice. Yeah. You wanna print the invoice page? You don't need a separate page for that. Just stick it to the current page you're at and make it look nice with print styles. Yeah. But and there's, like, a whole

Set of like header footer.

Yeah, we should we should do a show on it. It'd be kind of fun. It's it's not something you use all that often, but If you have a tool that needs to export something to print and you're doing it in CSS,

that's what it is. You know? That's what it is. Alright. Well, let's get into the part of the show of sick picks and shameless plugs.

Sick picks. Picks that we think are sick, things that we like, And I think you're cool. Wes, do you have any sick picks for us today? Dude, I

loaded up my list here. So we got here.

Yeah. I'm going to sick pick, now that kids are back to school, it drives me crazy when Tupperware and snack containers are not standardized and drink containers.

I only want one of something in the house, because if I'm searching for the lid for something, I'm furious because this is such a waste of time.

So I'm big on the government standardizing Tupperware and socks. Honestly, government can back off of literally every other aspect of my life.

But socks,

standardized socks and containers. So a while ago, I had gotten the like Tupperware.

They have like a knockoff version at Target in the States. I got a bunch of those and they were good for 3 or 4 years, but they started shattering.

So I Got these other ones. We've had we had a couple for many years from when the kids were babies. They're meant for babies. They're called Beeba clip containers, And they have 3 different sizes and they're plastic, but like kind of a flexible plastic, like not enough that it will fall over, but kind of similar To like a deli container, a little bit more rigid than that. They're seal proof and the lids clip together so the lids work on all 3 sizes.

They screw on and then you clip them together. So I do this. I clip all the kids together, put it in their lunch pail and they're not falling all over. It's nice and neat.

And I ordered like a 100 of them, and we have way more than we would ever need. But we have a bunch in the basement just for As when they do get lost or when they do get stained from tomato sauce or whatever in them, then then you'll start to bring out The extras. So I have standardized.

I did. I did so much research and I have standardized on the Beba Clip containers, they're meant for baby food, but they are the best. Cool. Yeah. We got something kind of like this

For going to the pool, our pool had, like, you know, no glass rolls, so we got something that they they screw to the screw together on the on the top instead of clip. Clipping Seems pretty nice. Although, like you said, I'm not about to standardize on something else. I am going to sick pick a, oatmeal Because I was I was telling Wes, I'm struggling to get enough, like, protein in my diet.

It's hard, man. It once you start doing, like, the macro counting and everything, it. It it's you realize very quickly, you get a lot of carbs and a lot of fat, but not enough protein Yeah. Pretty much across the board every single day. So it. I wanted to get some way to get some more protein in my diet in the morning, so I I got these. And I I do wanna say, like, I I have it. The protein shake stuff. I I can't do, like, 8 shakes a day. That's not gonna happen. No thanks. And I'm I'm not gonna eat a, an a massive amount of eggs, CS. Even though I don't know if the price on those is back to normal or what, but either way, I got, a massive pack of Kodiak Cakes oatmeal. It. Kodiak Cakes' famous for their pancake mix, but I did not know. So I bought this pack of 6 boxes of Kodiak CS Cakes oatmeal.

And it's, like, $26, and you get 6 boxes of 6 packets.

It. And that's enough oatmeal for me for a long time. And what I'll do is I'll put a scoop or 2 of protein in that bad boy, and there's already in that 12 grams of protein it. Per serving.

So you're you can get loaded up with protein in the morning if you do a scoop of protein on top of that, and this is like a sludge of it. Oatmeal and stuff. So if if that's you, you're out there. I I got the strawberries and cream, which, you know, they're they're sugary. It's sugary oatmeal, but, hey, they're pretty good. And Kodiak Cakes, I've always had good experience with them in general. So, check it out. I've been doing this as my morning oatmeal. Check it. I you. I see the pancake mix at Costco

every time I go, and I always wonder, is that good? Like, that's our primary o that's it. That or or that's what we get primarily for our pancakes. Oh. Yep. Maybe I should try it. I always, like, I always was, like, hesitant because I I have made protein pancakes in the past, and it's They were not good. So I'll have to try this out. Sick.

I'm going to shamelessly plug a conference I'm gonna be speaking at in October. So if you are interested in going to a conference, I would Highly recommend coming to FITC Web Unleashed.

It is October 14 through 16 in Toronto, but it's also online.

So I'm going to be speaking there. Lea Veru is going to be speaking there. Jason Langsdorf, Chris Coyre, Kyle Simpson and Matt Torsky.

A good lineup. It's going to be good. If you haven't been to a conference since COVID, I highly recommend it. It's very refreshing to meet people in real life and get excited about this type of stuff and kind of look into the future of it. I'm not getting any kickback from this. I'm not even getting paid to speak at the conference, but it's one of my favorite conferences.

I think I've spoken every year for, like, 8 years, So he gave us a half off coupon code both for in Toronto and online.

Poutine, he gave me like a code like West Boss, and I was like, I don't like When people give me my name as a fun code because it feels like I'm trying to, like, sell something.

And, like, honestly, it just is an awesome conference, so I asked them to change it to poutine.

Okay. I like poutine. Yeah. Come on down to Canada. We'll have some some poutine, And you can learn a thing or 2 about the web JavaScript CSS. I'm doing a talk on like AI and JavaScript,

So it's gonna be some good stuff. Heck, yeah. Well, I'm going to shamelessly plug the syntax TikTok. If you're on TikTok, we have a syntax TikTok. It. Just search for Syntax FM on TikTok. We're up there. We're doing clips from the show so you can get a little distilled content if that's the type of thing you're into.

Maybe you can't catch every episode, or we're also doing kind of exclusive little videos where, you know, we Wes and I are are teaching you stuff. So check it out. You. Alright. Thanks, everyone, for tuning in. Catch you later. Peace.

Peace.

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