CSS Trends Almanac for 2022 Part 2

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

Welcome to Syntax, the podcast with the tastiest web development treats out there. We've got more CSS trends. So we did an episode a couple of weeks ago.

The HTTP archive has an almanac, which rid. Basically, scrubs the entire Internet and figures out what are our people actually using, what are how many people are using box sizing border box and all that. And rid. We got about halfway through the CSS, and we're gonna finish that up now. Some really interesting stuff. So if you wanna know what are people actually using on the Internet, this rid. Show is for you.

We are sponsored by 3 awesome companies today. Prismic, they are The headless CMS that makes it easy to build web pages as a set of components. You can break your website into components and then rid. Build them out with React, Views, Svelte, you name it. Sanity is the platform for structured content that powers your apps, your websites, your sandwich boards, literally anything. They have a wicked CMS. We'll talk about that partway through the episode. And Log Rocket rid. Modern front end monitoring, they do session replay, and product analytics. We'll talk about all them partway through the episode. How are you doing today, Scott? I'm doing good, man. I'm I'm doing good. My my my fingies are all cut up because I've been installing a bunch of smart

light switches all weekend, rid.

And I I only got 4 of them done yesterday.

I'm gonna try to do at least maybe 2 more today. I I bought I bought some Caseta Diva Switches, they're really nice, actually. But, man, getting in those little electrical boxes, getting my little thingies all cut up, and it's it's tough on it's tough on your hands. I don't know how electricians do it. Yeah. Not

easy. Do you got a pair of lines bins that you know, what's the word for them? People use different words.

Like, they call them diagonal cutters, linesman's, electrician's pliers.

Those are really handy.

Yeah. No. I'm just I'm taking some needle nose out here. I got needle nose.

Oh, okay.

Wirecutters, strippers, But, no, I don't have any anything super fancy going on here. I'm just the the straight up normal homeowners kit. I find the hardest part about Installing light switches is you have to find a time when the people aren't home because

sometimes you got to flip the breakers and Turn off the Internet or whatever. And my family gets annoyed by that. So I have to wait until everyone is gone. And I'm like, okay, I'm doing it.

I got my headlamp on. I flipped the breakers off. I wish I could go. I'm stalling, trying to figure out a three way.

Rid. I could really use a headlamp. It's so funny.

We we've talked a little bit about your headlamp usage, and, like, this is the perfect opportunity. I had my My headlamp was my, 5 year old son holding my phone phone and flashlight at the thing. Here. Hold this. Go blue. Like you yell at them? Yes. Please. Just don't move it. Don't move it. Yeah.

To make matters worse with the, the breakers at our house, Wes, is like they're not labeled really well, but they're also just really bizarre.

Like, the living room, the kitchen like, half the kitchen, the living room, and then my son's bedroom, which is on the other side of the house, is on 1 breaker. Like, And and it's not labeled. None of them are labeled correctly or labeled really at all. So I'm going to go through it and start to label them now, but I'm just like, What is this setup here? This is so nonlogical

compared to how I'm used to. Our new house is not labeled well at all. It's awful. And our cottage, the previous owner labeled literally every single thing. We have this amazing printout of every single breaker. So I've started doing that. Now I have a Google Sheet. Every time I do it, flip a breaker, I'm like, okay, let's write that in the sheet and got to keep it.

Yeah. 3 years I'll have it.

I'm just doing the Sharpie on the breaker box, but. Yeah.

Oh, yeah. Yeah. That's a good call. Rid. Cool. Alright. Let's talk about CSS trends in the almanac.

This one is very surprisingly, 90 2% of web pages use box sizing border box, which is amazing because that is not the default. So almost every web page rid. Sets box sizing to be something that is not the board what not the default, which is good because it's hard to build websites otherwise.

Yeah. And and, honestly, I don't know. You know, this trend started with the Paul Irish initial blog post saying to do it, and And it was always included in all of the CSS 3 type of type of documentation or Libraries or anything like that. But I I do wonder why where the inflection point was because it it doesn't feel like everybody would have just figured this out from that That one singular blog post, it seems like maybe it's just something that's been around for so long now. At this point, it has made its way into Bootstrap. It's made its way into everything, and people have just like, I guess this is what the box model is. And to be honest, box sizing border box was a huge upgrade for anybody who existed before box sizing border box.

We were always having to calculate the width plus padding essentially without calc in a way where, Especially if you're doing things percentage wise, you're always having to account for everything.

And now it's like the width is the width. Okay? The padding, rid will then adjust itself normally. So you got to love it. Box sizing border box being the bomb.

Some other interesting stuff around this is 44% of people declare on the star selector.

I believe the recommended way to do it now is to Set it on your HTML element and then select star before and start after and say box sizing inherit Instead of saying apparently it's better for performance. I'm not sure about that, but that's what Paul Irish says. So I think I believe it. I believe it. Yeah. And then it says rid. 10% of websites declare it once and 90 how do you read this this rid. Box declarations per page.

It says the median mobile page declares border box 22 times.

I don't know how much how many times you declare Borderbox unless you need. I very rarely ever need to overwrite it. Like, maybe once when I had, like, declared at the top. Yeah.

Rid. I had something in, like, you wanted to adjust, like, padding on, like, a modal. I had to change it once, but Very rarely do I ever have to change box sizing.

Yeah. You know, it's funny. In the last episode, we talked about CSS columns.

Yeah.

And I, I said there's there's always a like, every time I think I should use columns or something, I I don't.

Yeah. Or there I I forget exactly what I said something to the to the respective. Every time I wish I or every time I use columns, I wish I did it. And I I kid you not, rid Later that day and subsequently since, I have found several good use cases for CSS columns, and I'm using them Multiple times in the new level of tutorials website. So I would like to rescind the, s h a I t talking that I was doing about CSS columns. There are Specific instances in which they do work quite well.

So I am I am wrong about that. I actually didn't know that there's some new properties for CSS columns too. So we had columns before was the property, but now we have I I don't know when these were added, so I don't know if these were all newer or what. But there's a lot of Properties here that I didn't realize existed from column count to column fill, column gap. So we got gap in columns now, column rule, column rule color, column span, column width. You know what? I use these things a couple of times, And CSS columns to me have really found an actual place in my workflow.

So it was a little bit surprising last time we talked about CSS columns to see their usage, But it does show that CSS columns have had a increase of 3 points since 2021, and they're up to 23%.

So people are using them. 23% of the people are using them. They they have a specific use case, and that specific use case is when your content goes vertical, Down vertical down vertical down rather than, you know, like, it doesn't work necessarily with Flexbox the same way.

Rid I don't know. Yeah. CSS columns have been very good for flexible. If you want something to fit in a certain, dimension dimensional box, and you don't necessarily want it to go left to right down, left to right down, then CSS columns do work pretty well. I was just looking at

some of the properties of CSS column. And there's orphan and widows.

Do you think that that would fly anymore

if we name those today? Like that. Those are very old things. So I'm going to add to our next time we do stump.

One of the stumped questions will be, don't look this up until I ask you. I'm gonna it's gonna be, what is the difference between CSS orphans and widows?

Okay.

Don't look it up. I should I should have told you, but dark.

It's dark, dark, dark. Alright.

Let's check the aspect ratio.

A 2% of pages using the aspect ratio, that's really interesting. It became it just, like, this is a new property.

So the fact that's being used 2%, 2% of pages is pretty huge. I have found some some issues here or there. Safari doesn't like nested aspect rid ratio.

So, there are definitely some some hiccups with aspect ratio. But overall, you know, as far as all stars go, aspect ratio is is one of my favorite new properties in CSS. Absolutely.

Transitions and animations.

What are the most popular transition properties? This is great because the what's the golden rule of transition, Scott? The golden rule of transitions? Yeah. What should you what property should you Transition on.

I don't I don't which should you transition? I don't know.

I I I see that the number 1 is all, but you shouldn't do that. Yeah. That's exactly why I love it. They say you should only ever transition on

what transform, rid. And maybe color. I sometimes I say, opacity. No. You can transform on opacity. Yeah. So all is the most popular one followed by opacity. It makes sense. You fade something in and out. Transform, that's that's the best one.

None? Why would you transform transition none? Maybe turning off? Yeah. Turning off.

I bet that's for, prefers ridged.

Yeah. It's probably in, like, bootstrap or something like that.

There's, like, that's in transition dud. Yeah. Everything transition, not important.

Border color with left some other uninteresting stuff, but very interested. You're not supposed to transition

Anything that moves something's position. So those 12% of your websites transitioning top or left, Don't do that.

Use use transform or even better. You know what the new version of, transforming transform is? Is using the translate property.

I gotta say, Wes.

I've Oh, yeah? I'm no longer using transform as a property in my CSS, and I'm only using the translate or rotate or any of those properties. Individual properties? Individual properties, and it totally rules. There's like it's it's so much more clear what's going on. I love it. They're easier to animate Overall, 10 out of 10. 5 stars.

And if you're using like a CSS preprocessor, it'll just Convert that to whatever supported in the older browsers as well. CSS. Believe it or not, the support is there, though. Really? Because I used years ago. And then they yoinked it from Chrome. And I got bit by that because I had a bunch of examples where I was using rotate as its own property. Yep. And then they pulled it. So So now it's back. You know? Okay. So it's it's we got green Fiat. We got nothing but green way back until older versions of just about everything. Obviously, Internet Explorer's red, but you got green for everything. And then the only modern browsers that hit red,

rid. Is Samsung Internet an upper mobile? And honestly, I don't care enough.

So I'm using translate there. What what's the what's it called to look it up on Can I Use? Just translate. You could just do translate or rotate, and it's just under CSS property, rotate. Rid. CSS property translate.

Oh, I see. I see. As like a standalone property.

Yeah. Yeah. Yeah.

Yeah. It's it's It's funny because it hasn't been in the browsers for long, but

It is. Yeah. It has been. But it is like Chrome 104. When was that released? Rid

Release. Released August 1, 2022.

So that was, like, a month ago, 2 months ago. That's Crazy. And it's same with it's like everybody hustled and got this thing in here really quickly.

Edge, same. Obviously, Safari came in April of 2021.

So Safari, the, rare instance of Safari being super early, and then get this Firefox added it in January of 2020. So Firefox, really on the early of that one. On the ball. It knows.

Yep. Oh, I think some of the stuff around transitions is interesting where we have distribution of transition durations, so, like, how long a transition takes place. It does feel like people are getting into, like, a one second long, transitions a lot. It it seems like rid.

Quite a bit of these transitions are one second long, which is a long time. That's that's long. Yeah. I I pretty much like, my max is, like, maybe 400 milliseconds or I'll my default is 300 milliseconds. Fast For me, it's 200 milliseconds. Slow for me is 400 milliseconds.

So getting into a one second, the fact that there's a lot of one second, it's the most of it. Like, the most the 90th percentile, the median transition duration was half a second. This has now jumped to 1 full second.

What?

That was that was that. What explains that, though? Like, are people because the one second animations look awful, unless it's, like, Even a slider on one second looks awful. Yeah. Who's saying give me a full second of anime? I love animation. I'm an animation guy, and, I don't want a one second. You know what? I just. So my screen flow, any like any animation, it defaults to half a second, and it looks it looks amateur. So I changed it to 0.2 seconds

because it's much faster and nicer. Yeah. Peep yeah. Yeah. People just wanna see thing get to point a from point b. They don't want a Whole story. I don't need Martin Scorsese here, doing long cuts. Alright. Now let's say key frames per animation is pretty interesting.

With most animations taking 5 key frames, again, what are you what are people doing that take 5 key frames? You know, I could see 3. Right? 3 key frames in an animation. It does this. It does that. It does that. Typically Minor like 2. It has an endpoint and an outpointed. Maybe I'm reversing it or I'm looping it or something.

But 5 seems like an awful lot. Yeah. But that's That's the 90th percentile, though, right? That's the edge. That's the high limit, right? I guess, Like, I'm trying to think about, do I have any? Most people are doing to, which makes sense from and to. You're not even using percentages.

Maybe everybody's doing the Mario Run tutorial to learn how to use keyframes.

Rid. CSS sprites.

Yeah, that's wild.

The most popular timing functions. This is really interesting. Obviously, ease ready. Ease in out are probably the 2 most popular linear.

So ease ease will do it. What? Fast, slow at the start and fast at the end or opposite.

Easing out is something along that linear is it doesn't speed up or slow down anywhere out.

16% of people using Cubic Bezier. That's that's where you do custom timing functions. I love those. I don't I usually just either go to a website that has timing functions and copy them. Or I open up the little cubic bezier tool

and I just drag everything around until it looks kind of cool. Yeah. I almost never mess with any of that stuff only because there's so many other people who've already gone through and, like, taken all of the The quintessential easing functions, like, anything you could possibly want, even getting into, like, bounce type of things. And I'll just load those up as CSS variables, the one that I like, And then use those. I got a question for you. Have you ever

used steps as a timing function?

I've never used steps as a timing function, but I know very much why. So steps are used if you have, like, a key frame type of animation.

So for instance, the Twitter like, when you heart something on Twitter, it does like an animation of a heart. You know? And it does several key frames in that animation, and that's being done via a sprite where it's stepping through several images of that sprite to do an animation.

So steps are largely useful when doing animations with sprites made much more of like a video game style technique, than what we're used to on the web because you're you're stepping through actual images. You're doing key frames of or not key frames. You're doing rid. Frames, literal frames of an animation.

Yeah. If if you go to westboss.com and hover over any of the links in my nav, there is like a big grit, like some some texture that moves through the background.

And every,

2 seconds or something or every half a second, it will change the actual background value. And I use steps for that.

Rid. So I didn't have to say, like, 10% move it over 50 pixels. I basically say go from 0 to a 100% background position and do it over 10 steps, and it will figure out how much to do it for you. And it's not actually animating it like like there's no easing and it's simply just changing it every, what,

200 milliseconds. It is a 2 second animation with 10 steps. Yeah. Yeah. You could think of it just like a classic animation technique. Right? You're drawing individual frames, and you're just flashing those frames. Flashing those frames quickly creates motion in some sort of way or Just create some sort of energy, motion, animation.

Cool. Let's take a quick break to talk about one of our sponsors today, which is Prismic. Rid. Wes, do you want to talk about Prismic? I do. And one thing that Prismic does, and this is really, really cool, is that you sign up for Prismic, you create your content types. And then when you start to use the API, they give you TypeScript types for all of your data. They're all generated for you. So boom, you are making a slice for your, a person, and the person has a name and maybe has an image, and you don't know what the properties are on the image to actually get the cropped version of it. Well, they give you TypeScript type, so you have IntelliSense typing right in your text editor, right in your React component, right in your component, you name it. I thought that was really, really cool that they just generate the TypeScript types for you. So check it out on your next project that you need to see a mass. They have a REST API, GraphQL API, you name it. Go to Prismic. Ioforward/ syntax,

and they have a bunch of starters there as well. Thank you, Prismic, for sponsoring. Dick, well, let's talk about blend modes. Wes, have you used blend modes in anything in your CSS World. Yeah. What have I used them on? We're using them on the new level website to do, like, this gradient overlay on an outline text.

So, like, you you wouldn't be able to do doing that? That's how I'm doing that. So with CSS, you wouldn't be able to do a gradient border color on some text. So we wanted a gradient border color. So what I did is I did text shadow to do the border color so that it would be completely outside of the text rather than inset or along the lines of the text.

And then I took a gradient and set it on top of there. It's an after. It's a pseudo element.

And then I use the blending mode, darken, and that is what creates a gradient over the outline. You know where I

have used that before. I just googled West Boss blend mode.

Mhmm.

And if you use mix blend mode multiply, it will Punch out a white background. So if you have an image that has a white background and you want it to be transparent.

I'm using air quotes here.

You can use mix blend mode multiply just like you use multiply in your Figma or Sketch or whatever Photoshop.

And that will make the background multiply onto whatever it's On top of it, it kinda makes it look transparent. It's one of those features that it feels like a lot of people would have been like

in the past. Like, man, it'd be really cool if we had Blend modes inside of CSS. It's something that designers used to give you all the time. They would give you an image with a color overlay, and you'd say, Do can you just give me this? Like, do I take this asset, and do I put a rasterized version of the overlay of the asset on the site, or do I do something with opacity to try to mimic that effect of an overlay? But now we have blend modes, and it's like You don't have to manipulate your images to accomplish some of these cool techniques that designers love rid. Do, you know, designers that just do things in Photoshop or Figma and just be like, oh, yeah. That's the way it is. Right? Of course, you have blend modes.

But it was rid It was always one of those things you had to side step around all the time. That's what Stripe is using. Stripe.com. I always wondered. They have a gradient that moves,

And it goes behind the text, and the text is constantly changing. I just inspect element, mix blend mode, color burn. Mhmm.

I love it.

Rid. Color burn. Yeah. That so okay. So to get to the actual almanac points, the most used one is multiply, then overlay, And then screen and then darken, light, and soft light color, color burn, dodge difference. So these are color overlay functions are are not exactly the easiest thing to visualize, but the easiest way to do it is just head into Figma or any of your apps and just start dragging stuff around and experimenting with them. So, You know, they're they're one of these things that if you don't have any experience with them, they they do take a bit of understanding.

They there is a lot you can get into with overly Modes or blend modes where you're just saying, like, alright. Here's the math. What we're doing is we're we're we're multiplying this pixel value by this pixel value. That's why it's called multiply. And the end result, like, you know, 0 if you have black and you're multiplying it by black, it becomes black. Right? Or whatever.

So a lot of these end up they're just essentially math functions to analyze this pixel value versus this pixel value. Which one do we display or how do we manipulate or modify the current pixel value to show you what it is? A lot of interesting stuff to get into if you actually dive into the math there. Diving into the math.

That's something that is funny. Sometimes you get into animations or stuff like this. You go, I could dive into the math, or I could just mess with the numbers until it sounds like what I want. I did that. I just hit the down arrow till it looks right. Yeah.

That's getting into the math for me. Yep.

Well, let's talk about responsive.

Yeah.

Responsive web design.

Responsive web design is really you know, I think we're about to undergo a major transition in response Web design with CSS container queries becoming a thing. It's it's funny that I would say that because the very first sentence on this is while many developers are eagerly eagerly anticipating container queries, that is So true. I am. I this is the first thing I thought of when I see responsive design here.

It talks a little bit about media queries and, you know, Media query features that are being used for max width and min width inside of a media query, obviously, the most used.

I I pretty much, you know, I'm only using max with their min width in my immediate queries. But now I'm actually using the greater than or equal symbols because I'm using a post CSS plug in to do it for me. But next step is min device pixel ratio prefers reduced motion, which is being used by 34% orientation, max Device with high contrast, max height, min resolution, transform three d. So some of these are just like being used as a kind of feature detection. Right? But other other ones are accessibility checking, and then you obviously have your mid width, max width for Device size. Yeah. It's funny that min height and max height are quite a bit lower, which totally tracks with my usage of CSS media queries. I'm almost never

rid. Using the height ones even though they exist. Yeah. A couple times I've had to use the height ones, with specifically my checkout. I was getting people on the 11 inch MacBook Airs. Yeah. And those those MacBook Airs are really wide and short. Rid. And I just had a media query on the width because I thought, you got based on the width, you have it. But I've I forgot that rid. Wide and short, you can't. I was I was covering up some stuff, and I I hadn't put a scroll bar on at that point.

So, I had to Make sure I accounted for that. I see it sometimes, but almost always width for me.

The prefers reduced motion ones is kinda interesting. It seems like a lot of people are.

You should be doing this is you select anything that has an animation and then just turn it off. Turn off your transitions for when people prefer reduced motion. What that is, that's a setting in your computer that will turn off. Some people are really disoriented by things flying around the screen, and they just rather it snap to where it should go. So that's how you turn that on. In perverse color scheme, though, that's that's light and dark mode. Right? Yes. There's light and dark mode.

Okay. Rid.

Which so what percentage of websites would you say use reduced motion prefers reduced motion?

34%.