Reacting to State of CSS Survey

So I think we'll probably see people go a little heavy handed 13 years.

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

what

but

or transform,

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.

websites that utilize this well or a net negative

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

Yeah.

the context. Going from 1 page to another Forced colors

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

Wow.

Mhmm. In content, mass content. Yeah. What's interesting is that, doing, like,

sizing

I don't know that I functionality

but I don't know that I have I guess I've used it in grid, and Flexbox. You know? Like, fit content I had the title of a section and that could be something as short as New CSS features, Out of a single

They they they, yeah. They've existed for a long time, so they've been around for a little while. But,

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

these properties, at least in some regard,

like, it's still a working draft,

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

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

filter about 50% of people using those up from last year.

that can be display all these really deep and beautiful colors.

got it

Chugging with a lot a lot of the layout stuff, but a lot of the CSS color stuff, and probably because But

Apple cares so much now that kids are back to school, And then Overflow hitting on that div. This allows you to simply just

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

Like, well, we got to get people using them, right? Because, like, especially if you look at

Well okay.

like, a focus color and

the very first variable that's been around in CSS for probably,

colors and stuff like that. And they have these beautiful displays

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.

in 2009. So yeah. Okay. So it allows you to do if you set the color And it is currently

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 have has moved up by, like, 10%. And

but they are not dynamic, making them fundamentally useless in my mind. So,

Firefox

color based APIs for me personally.

the,

Safari's been They obviously go through it. You can check it out at state of CSS If it's just an image tag, you could reimplement

I bet 15 years.

of like text, like the color property on an element Margin

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 Intrinsic

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,

so that's not quite 15 years.

you know, a lot of times people wanna set

Chrome got it in 2010,

like in your OS, 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

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

Oh, geez. Okay. That's okay.

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%, application UI that obviously needs to snap to a specific 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 It only just hit Chrome.

is aspect ratio.

20.

which makes sense. They've been around for probably

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

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.

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

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

What does none

Overscroll behavior.

really fast?

on an element what is allowed Yeah, it's very Resolution.

And sometimes I do that on, like, an embedded

A touch action. So like if if you want to stop somebody from pinching and zooming in on a specific part of your application,

So

I think what this is.

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,

CSS property to control the behavior when a scroll position of a scroll container reaches the edge

like, embedded map or something like that, if you're scrolling on it. A lot of issues that that becomes a problem.

Of a scroll port?

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,

Whether

and there's no more lines of code.

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 What, like a couple of months ago, so and it's behind a flag on edge. Like, I give it.

You can This is a We're probably not even 20% of the way through the CSS thing. So let's

It can oh, well, that's interesting. So

specify and this wheel is like I can I could spin this thing like Yeah. Because usage. Because it only hit

position this a 100% under the header 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?

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

relative to my anchor, and that might be another element somewhere else on the page. So almost 20% in people who have

this is and maybe 10 is not a good idea. You have 12 notches.

If I I fixed it another way because position sticky allows you to stack, but and then you don't have to wrap it in a div. Oh, okay.

regardless of how big the header will be, and this would allow me Do that.

Stuck directly underneath that, I didn't know how high

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

the features that are talked about in the state of CSS are things that are like Length. Yeah. Length would be like a pixel percentage.

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.

Gap, underrated.

lying. You're straight up lying. Yeah. I was like, I've used it, but in demos, loaded up my list here. So we got here.

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

Oh.

Cool. Good to know.

Let's do, it.

Let's go ahead and say

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

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 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 We have And it's, like, $26,

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

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, Oh, especially for, like, the Russian case. But, like, if you have a

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

most used

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

Kings and queens of CSS.

If we're doing individual properties

here, justify content.

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.

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

like examples of things that are not top 5. So where and has and The one I'm the one I'm most Excited for is the relative color, and that seems to have, and the browsers were not capable of displaying Playing them even though lots of and an example I have is Number is 1.

opacity all the time.

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

Yeah.

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? check it out. I've been doing this as my morning oatmeal. Check it. I you. I see the pancake mix at Costco

That's the new rotation

radians, but, also, please,

Time. Time. Time. Yeah. Like like seconds. How long a But Chrome for Android is always parity with CS. Desktop Chrome. So I imagine Yeah. This is version 116. So when 117 how quickly does

Oh, gradients. One full circle is 800 grad, finer

and 1 radian is 1 rad. I I tweeted about using turns the other day,

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.

There's gonna be font size.

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

There's gonna be a color.

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.

And I got so much hate people like just use degrees.

a couple benefits To that, one one benefit is you can set Getting in the nitty gritty and kind of just riffing on it and talking about it.

are ever writing text on a vertical plane,

have used logical properties because I don't feel like it's

block would be top and bottom, except if you were to change the writing mode

and the

follow it. And that could be handy not just for people writing Japanese websites, but it's also handy if you what the industry looks at right now, so I'm excited to get on into it.

of your

you use inline and block values, which is

as a block value Set of like header footer.

like inline would be for most people listening to podcasts left and right and

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% Your browser 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 like, please stop picking this kid up. Please stop

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 So it goes from a totally normal aerial you can use

range.

I think could be, way higher up here in terms of usage. Here's one.

up from 14 last year are using media

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,

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, granted, this has a polyfill of which I found to be very unreliable.

Along with the state of JS and all of that good stuff, and they ask developers Then the values will

are developers and a optical size, but many of them also have a width Chrome 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.

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

CSS is heading as well as like like what So you can set something to be the size messaged me the other day and we're like, Hey, I need to print a custom I feel like this could they're I feel like they could Yes. You can change the Pinch Zoom the state of CSS survey.

Survey that goes out every single year.

actually using these days? And it's not perfect

Have you used Bootstrap less? All of that good stuff, and 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.

What features are you using? What libraries are you using? somebody People have used it? Oh, people 51% of people who have who responded, but Has a browser to use specific colors for What?

Boss, and Scott with it initially, when you are on Neck of the G go down. I'm sorry. All font people. That's probably not it. Aperture descender. It's a descender.

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

Websites and whatnot. Pretty stoked about that.

Doing good. Just rocking over here, working on find the image tag.

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

value.

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.

position anchoring, which allows you to anchor something to something else.

position relative containers the same way position absolute typically does.

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

It. So in comes the anchoring, 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.

I want that sorting menu to always be anchored to the bottom of the button for the sorting

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 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 It's hard, man. It once you start doing, like, the macro counting and everything,

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

you cannot do position absolute

I have never heard of anchor positioning.

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.

And so what top layer is is it essentially takes your item it. Out of the rendering

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,

So it does not respect

top whatever because it's out of the the rendering flow of the document.

So the first thing I did was implement the polyfill,

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.

we're using the dialogue element. We're using the popover API.

you know, do it within reason, man.

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

CSS been going, Wes?

Just guts. Body slammed.

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

And it's not it's not, maybe you have to make your own in, like, 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,

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.

CSS logical properties, so that is instead of using top, Right bottom left,

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.

The person who like, the vendor who makes the, URL image, color, length percentage, Foil type. I have, And I ordered like a 100 of them, Yeah. Again, this is that the Google Maps updates to colors in CSS. So we have color mix, which allows you to take 2 colors and mix them together.

I was like, can you just make a big one of those? And 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 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, That's extremely high.

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

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.

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,

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,

s Or or that's a whole another whole another world. Masking and clipped clip masking and and masking in CSS.

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, don't, you know, ruin other people's Not CSS Grid.

with,

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

That is going to 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,

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,

So it allows you to define a type for a CSS variable, like, have been in Chrome with a prefix since version 22 of Chrome.

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 keywords, the correct solution. Right? But I I guess our brains are so programmically,

a type. And if it is a specific type, then the browser

enabling a lot of really cool things. It. The the number one easiest, It. Yeah. This is a,

Prefers reduced data, 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 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, Object view box. So, of course, there is a,

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 better than overflow

for those of you who want contrast, forced colors, forced visible.

that's an interesting one as well. You could degrade various aspects c s

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

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

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?

baseline is trying to do? They're it's, like, trying to be a more streamlined version of that, maybe less information.

and nobody uses that. So isn't that what that baseline that web.dev

that's notches,

let the thing load, and then you can 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,

It. Like, what makes this property.

it. Lee, infused to do that. You know who needs this is all those websites 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.

have an image,

Zoom it in, crop it based on

that show you a shopping photo,

inset values, has 9 different variables. The weight, italic Okay. I like poutine. Yeah. Come on down to Canada. We'll have some some poutine,

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, Something that I needed in the new syntax website. So I'm doing multiple levels of position sticky.

So when it has a class of worse, rainbow gradients

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.

If you wanted to crop Scott out of that, you'd have to wrap that in a div It looks really cool. Let me just say, No. Wouldn't that be a length? Do you know about these things? What do you think about? Are you still using Bootstrap?

and then scale the image up and do a bunch of math with hue rotate do a better job at

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

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 Of the browser versions that people are using, it gets 18%

usable right now reliably.

will identifier at the top of every page only when it's printed.

an anchor, an anchor name. And then on another element, you can say position this thing. Absolutely.

Support for this is bad. Polyfill used,

usually, it just finds the closest relative parent and uses that as it. But this will allow you to specify And and drink containers.

So what this does is CSS anchor positioning

allow you to position elements lots of those. And whenever I do a sticker pack, I do a hologram one. I specifically went to the

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.

is not,

like a couple of weeks ago, you know, but like how quickly that maybe the question we should answer is mono spaced fonts, which are. Yes.

114

very, very, very little actual usage.

Old versions of do or do old versions of Chrome drop off? You know, like let's see.

Chrome 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 I only want one of something in the house, because

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.

Gucci for,

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

for over a year. It's been in Firefox for 4 years.

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

share things up. Because it's it's in Clip containers, they're meant for baby food, but they are the best. Cool. Yeah. We got something kind of like this

and 115 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 sans serif font to, like, old timey.

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

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

global usage.

support. You can use at property, folks. And what is that for?

woah. At property now, a lovely

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

It. So at property is part of Houdini. It allows you to to define, believe this, a type for your CSS variables.

As of right now, touch action. Yeah. There's a lot of these little things in here. And once we get into the typography,

it's supported in Firefox. So it has 81% thing, but

if I'm searching for the lid for something, I'm furious sick, sick demo.

because this is such a waste of time.

So I If you have a 4 out of like, you have 10 the actions are.

Tupperware.

Yeah. I'm going to sick pick, like, North Face authentic

and

But socks,

and they're plastic, but like kind of a flexible plastic, like not enough that it will fall over, but

Tupperware and socks. Honestly, government can back off of literally every other aspect of my life.

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.

and snack containers are not standardized

when I've never heard of this. Object view box.

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.

containers. So a while ago, I had gotten the like a note to the king,

it drives me crazy so sick. There's you can do 3 levels And sometimes a hard time.

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, polyfills that are based not Poly fils, like, essence of transforms that are based in, like, lightning CSS or post CSS,

Because they're 2 different hue rotates, and then they're mixed blend moding. Probably awful for performance. Yeah. But, like, .com and kind of go through all of the stats yourself. What we're gonna do here today is kind of just pick

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,

a saturation just to do grayscale. But you know what?

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.

and very performance heavy. So,

Yeah. Wow. That's right. That one, like, came out of nowhere, like because with those variables and then return them

We haven't had it that long, but once we got it, everyone's like, boom, 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, or, like, 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.

The the drop shadow 1 I found to be very unpredictable across browsers. So, a lot of people go for usage.

is, Look at me with my typographic knowledge here. I'm just dropping, team won the game, like, 15 to 4. Like, your team dominated the game, and the fact that you don't even know that

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

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 clips

basically you do a rainbow gradient and then you change the hue on it And you animate the hue rotate from 0 to 360,

I did some really cool demos. I should tweet them out, about 7, 8 years now, if I were to guess. Number 3 and that is called expression of 0 current speaker to be with anything, you can go ham. You know, when we got

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

that 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

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 but our Now Wow. Okay. Cool. So okay. I I'm interested to see what it. Our variable typeface can do. I doubt it is this much,

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. Colors inside of their For the support it has? Yeah.

So he gave us a half off coupon code both for in Toronto and online.

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,

the web JavaScript CSS. I'm doing a talk on like AI and JavaScript, 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

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

And you can learn a thing or 2 about 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 Samsung Internet never has any support on stuff. We've talked about that in the in the past, Relative to another element. So you have standardized socks

Poutine,

and Matt Torsky.

COVID,

I highly recommend it. It's very refreshing No picking up. You know? We're all little. Spoke to our yeah.

interested in going to a conference, I would Highly recommend coming to FITC

Web Unleashed.

So I'm going to be speaking there. Lea Veru is going to be speaking there. Jason Langsdorf, Chris Coyre, And it's a really neat way to get

I'm going to shamelessly plug a conference I'm gonna be speaking at in October. So if you are extenders, 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, that you can provide so you can get that really popular.

Kyle Simpson or it could be something that's really long. That would be multiple lines. And if I wanted the and we have way more than we would ever need. But we have a bunch in the basement just for show you what Hue rotate will do.

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

is embedded is a big issue where

be remedied somewhat

This allows you to specify what it's been in Safari

Pan X, Pan Y,

Pan down. Double tap. Double tap.

with this Honestly, I think Chrome is the least of our worries because The big one was always chapter 1. I have a big heading on top of it, but But when you get on mobile, maybe I want to put 20% opacity, right? It'll basically take a color,

That could probably It's it's wild. There's, like, I have not used this one, and I think what this does is it controls intrinsically instead of an explicit value.

Hopefully, it'd be in there. Yeah. The can I use needs an update, man? This is like I don't care about,

I'm gonna say The code pen. Code pen? Oh, yeah. Look at this thing. This is lovely. The neon d you made this?

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,

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

like, half of this stuff, you know? And, like, I maybe I can can dial it, it's kind of interesting to take a look at where

They're like

the craziest,

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 tastiest web development treats coming again hot. Here is Wes, Barracuda,

And then you can also change the analysis

You could change all kinds of stuff in this.

Wow.

websites are having like really wide text.

ness of them so you can go from 0 to 20 degrees

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

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

like a jump in people who have heard of it from 24% to 32%,

and then you can do math And, and 117 has 0.02.

Take this hex code and convert it

Split it into RGB or HSL or LCH, Like right now, all these And page or of a specific element, 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

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

about how this will look across every browser

take this orange and make it a little bit darker or

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

with text fonts.

spacing? to p x button text solid.

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

That's pretty simple. Ink traps.

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.

How far does the C close And they have 3 different sizes 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.

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.

Single story G. Oh, you can change 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

dingbats, Browser shown. Add new set. Yeah. It doesn't I think you might have to, like,

really excited to play with this stuff while they send these This one called Pangiovar

a g, how far does the little Have 14%

you know, adjacent, but they look, like, very useful if you could do that type of it. Painting 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

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

a That Zoom Right? Yeah. And you have you're at 4.

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?

So,

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

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

ease the pain here for this API not being here. S. But the actual API is really interesting because there's a function, anchor.

Yeah. There's a lot of really cool stuff. I

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

use still kind of body support in Firefox Where not everything is available, some are behind the prefix still.

Anytime we get new functions in CSS, it's really interesting. So,

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.

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,

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.

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

what he thinks about this and if he can guess.

Io.

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

So So I'm big on the government standardizing boldness.

let's get into

So Then you should be able to you should double check that your website looks decent, you know, like you're not having a weird

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

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,

Grabbing sticks and throwing them instead of doing your soccer thing or whatever. Like, I took a photo of,

I know you're supposed to be having fun, and that's, like, the best part. But,

He has landed on the same team as all of his little friends from high school, 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.

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,

son has been playing soccer now for however many seasons, and

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, Let's talk about accessibility features here, or drop a review if you like this show.

try somewhat, and don't, Yeah. And, check out you might even find useful the, it's called in in our code base, it's called,

you you can't be doing this. Also, So it's, like, kind of like an overflow

I asked him, pancake mix, but I did not know. So I bought this

Lango.

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, every time I need it, I feel like

Wow.

the widths of of different the extenders, the descenders.

expression.

This one has

I'm writing

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

It's a wild, wild world. It's a wild world. I remember This is one of those features that

good. So I'll have to try this out. Sick.

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,

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 none how does

every time I go, and I always wonder, sell something.

pack of 6 boxes of Kodiak

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.

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

CS Cakes oatmeal.

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

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

Because I was I was telling Wes, I'm struggling

a, oatmeal Okay. What does this do? Well okay. So here is a little problem created by,

6 boxes of 6 packets.

work for them, you can do that with JavaScript.

forcing the overrides.

Man, Tupperware to 100.

and your user is trying to literally overwrite your CSS to make it

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

Like dark mode sometimes goes weird. So imagine the weird stuff that could pop up when people are

Head on over to syntax.fm Because we'll have more websites that utilize this feature poorly. I think in that benefit, How are you doing? How was your how how's your,

for a full archive of all of our shows, Is that one of them?

And don't forget to subscribe in your podcast player but I am 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

Peace.

I was like, CSS counters and print You can define what color buttons and,

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

hundreds of different

Fonts.

or the optical size 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.

or how bold a font looks without actually changing the character size.

of the font.

how wide

May I say it's not bold, but you can change

So it's kind of cool because you can do some Interesting effects with it without actually having the text

So I guess it's kind of boldness Of it, most of them have a weight

readjust itself 116 has 5%, values adjust drop downs

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

347 different fonts, and you can use it shows you what variables are allowed to be changed. So the weight So adding margin Hey. So that's what the show is all about is getting into

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

on the page. So I've been playing with very there's a really nice website that shows

Especially with multiple font weights or multiple font displays And if you want to pull that preference in Style query.

more people have

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

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

have used it. 51%

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.

So it's gonna be some good stuff. Heck, yeah. Well, I'm going to shamelessly plug

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.

Oh, DPI. That's that's a show we should do. The Wild West of print CSS. Oh, yeah. Somebody

Number it's kind of fun to dig into the nitty gritty of this this type of stuff, you know? I thought what this is, you know, in Versus code, you scroll to the bottom I think I've spoken every year for, like, 8 years, 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.

Length percentage and percentage. Oh.

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.

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%

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,

If you have a tool that needs to export something to print and you're doing it in CSS,

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.

which allow you to turns out there's more colors in life,

So the good news is is that p 3 colors, to get enough, like, protein in my diet.

That's the color space. Typically fall back automatically 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.

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 CSS properties Sometimes I like to like I want the last line of code to be in the middle of the editor. Right. You scroll past.

wide gamut colors, which is the Okay Lab LCH,

We have the new All fonts that are available as variable fonts.

is also limited by your display.

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,

And A good lineup. It's going to be good. If you haven't been to a conference since

outlines, backgrounds, borders, 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

Glad to see that all of these things are mostly

text, etcetera.

to detect if a user agent has enabled force colored mode. Interesting. It's a bummer that the

hidden.

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.

I have no

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

the font on a scale

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.

of italicize

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

Mhmm. So like what the user has specified And

for me, I don't I don't want the to be like, oh, the site doesn't force the color because,

I did. I did so much research and I have standardized on the Beba

As when they do get lost or when they do get stained from can I use allows you to make your own

tomato sauce or whatever in them, then then you'll start to bring out The extras. So I have standardized.