CSS Trends Almanac for 2022 Part 2

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.

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

let's write that in the sheet and got to keep it.

Oh, okay.

And I I only got 4 of them done yesterday.

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

easy. Do you got a pair of lines bins that you And if you're using

what's the word for them?

To make matters worse with the, I I don't know when these were added, so

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.

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

Like, they call them diagonal cutters, linesman's, have used that before. I just googled West Boss blend mode.

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

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 Yeah. You know, it's funny. In the last episode, we talked about

know,

I'm gonna try to do at least maybe 2 more today. I I bought I bought some Caseta Diva

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

that. Now I have a Google Sheet. Every time I do it, flip a breaker, I'm like, okay, The most popular timing functions. This is really interesting. Obviously, ease I bet that's for,

Those are really handy.

People use different words.

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

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? So, I had to Make sure I accounted for that. I see it sometimes, but almost always width for me.

So it was a little bit surprising last time we talked about CSS columns to see their usage, But it does show that So, there are definitely some some hiccups with aspect ratio. But overall, 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.

It says the median mobile page declares border box 22

Set it on your HTML element

Do you think that that would fly anymore

how do you read this this

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

and 90

and then select star

Rid I don't know. Yeah. CSS columns have been very good for flexible. If you want something to fit in a certain, Yeah.

before and start after and say box sizing inherit

and they're up to 23%.

left to right down, left to right down, then CSS columns do work pretty well. I was just looking at

I don't know how much how many times you declare Borderbox unless you need. I very rarely ever need to

CSS columns.

CSS columns have had a increase of 3 points since 2021,

rid. Box declarations per page.

Down vertical down vertical down rather than, you know, like, it doesn't work necessarily with Flexbox the same way.

A 2% of pages using the aspect ratio,

It's dark, dark, dark. Alright.

if we name those today? 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.

on, like, a modal. I had to change it once, but Very rarely do I ever have to change box sizing.

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

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%

dimension dimensional box, and you don't necessarily want it to go They there is a lot you can get into with overly And I,

of websites declare it once

I believe the recommended way to do it now is to syntax, But 5 seems like an awful lot. Yeah. But that's That's the 90th percentile, though, right?

overwrite it. Like, maybe once when I had, like, declared at the top. Yeah.

Yeah.

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.

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

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,

times.

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

transitions a lot. It it seems like rid.

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, I'm just doing the Sharpie on the breaker box, but. Yeah.

Quite a bit of these transitions

January of 2020. So Firefox, 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

doing

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 light switches

With most animations really on the early of that one. On the ball. It knows.

long cuts. Alright. Now let's say key frames per animation

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,

Release. Released August 1, 2022.

Yep. Oh, I think some of the stuff around transitions is interesting where we have distribution of transition durations,

it defaults to half a second, and it looks it looks amateur. So I changed it to 0.2 seconds is the most popular one followed by opacity. It makes sense. You fade something in and out. Transform,

What?

is pretty interesting.

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.

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

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? the breakers at our house, Wes, is like they're not labeled really well, but they're also just really bizarre.

then overlay, you know, the,

So a lot of these end up Okay.

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.

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

or stuff like this. You go, I could dive into the math, or I could just

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.

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

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

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.

out a white background. So

And then I use the blending mode, darken, 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.

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.

your images to accomplish some of these so, like, how long a transition takes place. It does feel like people are getting into, like, a one second long,

if you have an image that has a white background and you want it to be That's the edge. That's the high limit, right? I guess, Punch The headless CMS that makes it easy to build web pages as a set of components. You can break your website into components 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, Rid. CSS sprites.

Well, let's talk about responsive.

and that is what creates a gradient over the outline. You know where I that's really interesting. It became it just, like, this is a new property.

a person, and the person has a name and maybe has an image, and you don't know what the properties are

I love it.

the API,

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 taking 5 key frames, again, what are you what are people doing that take 5 key frames? You know, I could see 3. Right? Don't look it up. I should I should have told you, but dark.

transparent.

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

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/ Some other interesting stuff around this is 44% of people declare on the star selector.

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

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 400 milliseconds or I'll my default is 300 milliseconds. Fast For me, it's 200 milliseconds. Slow for me is 400 milliseconds.

Mhmm.

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

Rid. Color

I'm using air quotes here.

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

in the past. Like, man, it'd be really cool if we had Blend modes inside

prefers ridged.

Anything that moves something's position. So those 12% of your websites transitioning top or left, 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.

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

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

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?

rid. And maybe color. I sometimes I say, opacity. No. You can transform on opacity. Yeah. So all

Overall, Let's check the aspect ratio.

So

what transform,

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

like a CSS preprocessor,

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

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

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

Yeah. Yeah. Yeah.

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

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

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.

Yeah. It's it's It's funny because it hasn't been in the browsers for long, but And if you use mix blend mode multiply,

that's the best one.

that's

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

Don't do that.

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

We are sponsored by 3 awesome companies today. Prismic, You should be doing this is you select anything that has an animation 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

they are

and then rid. Build them out with React, Views, Svelte, you name it. Sanity is the platform for structured content that powers

which rid. Basically, scrubs the entire Internet 10% move it over 50 pixels. I basically say go from 0 to a 100% background position That's something that

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

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.

the width plus padding essentially without calc in a way where, 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,

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

This one is very

or 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 all weekend, rid.

documentation the median transition duration was half a second. This has now jumped to 1 full second.

type of rare instance of Safari being super early, and then get this Firefox added it in Use use transform

90 2% of web pages use box sizing border box, 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.

Especially if you're doing things percentage wise, you're always having to account for everything.

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

Yeah. 3 years I'll have it.

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.

We were always having to calculate

16% of people using Cubic Bezier. That's that's where you do custom rid. Using the height ones even though they exist. Yeah. A couple times I've had to use the height ones, ease will do it. What? Fast, that will turn off. Some people are really disoriented

made much more of like a video game style technique,

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,

And every,

Yeah, that's wild.

So ease 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, which is amazing because that is not the default. So almost every web page That's getting into the math for me. Yep.

as a timing function? it will

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 10 out of 10. 5 stars.

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

ready. Ease in out are probably the 2 most popular linear.

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.

that moves through the background.

Rid. So I didn't have to say, like,

So for instance, the Twitter A lot of interesting stuff to get into if you actually dive into the math there. Diving into the math.

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 you know, as far as all stars go, aspect ratio is is one of my favorite

2 seconds or something or every half a second, it will change the actual background Rid. I had something in, like, you wanted to adjust, like, padding

So steps are largely useful when doing animations with sprites Media query features that are being used for max width and min width inside of a media query, obviously, the most used.

tool

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

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

any of the links in my nav,

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?

used steps slow at the start and fast at the end or opposite.

there is like a big grit, like some some texture

and hover over electrician's pliers.

what,

value. And I use steps for that.

Yeah. If if you go to westboss.com

What are the most popular transition properties? and animations.

new properties in CSS. Absolutely.

Transitions

So the fact that's being used 2%,

and then just turn it off. Turn off your transitions

I I pretty much,

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

with

prefers reduced motion?

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.

Which so what percentage of websites would you say use 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.

your computer is funny. Sometimes you get into animations and do it over 10 steps,

checking, s h a I t talking that I was doing about CSS columns. There are Specific instances in which they do work quite well.

orientation, But other other ones are accessibility So Safari, the,

transform three d. So some of these are just like being used as a kind of feature detection. Right? I gotta say, Wes.

reduced motion

It talks a little bit about media queries and, burn. Yeah. That so okay. So to get to the actual almanac points, the most used one is multiply,

which is being used by 34% 2% of pages is pretty huge. I have found some some issues here or there. Safari doesn't like nested aspect rid ratio.

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.

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

Okay. Rid.

Responsive web design.

by things flying around the screen, surprisingly,

max Device with high contrast, max height, min resolution,

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,

Run tutorial for when people prefer reduced motion. What that is, that's a setting in 34%.

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.

to learn how to use keyframes.

Maybe everybody's doing the Mario 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.

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.

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.

The HTTP archive has an almanac, 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.

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.