2022 CSS Trends and Usage Web Almanac

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

Welcome to Syntax. This is the podcast with its tastiest web development treats out there. We've got a really cool one for you today. So the HTTP archive, they are, I guess, this body that scrapes the entire Internet and, rid. Saves all the websites, and they once a year, they run a whole bunch of, like, stats on sort of what's going on. And this is kind of interesting because We have state of CSS and state of JS, and that is answers from developers.

But then if you actually look at what The entire Internet is using in terms of web tech.

It's actually a bit of a different story, and it's kinda interesting to see what are people actually using, what's popular, and rid. New things like, something that has been used like CSS variables. How how much pop more popular are they than just A year, a year or 2 ago. So we're gonna go through the CSS portion of that on this episode. We'll have another one on JavaScript and whatever else there is. Rid. We are sponsored by 3 awesome companies today. 1st one is Prismic. They are a headless CMS with a rest in GraphQL API. Rid. LogRocket, they they let you replay what users do on your site and help you fix bugs on your website.

And FreshBooks, the cloud accounting software you need to run your business. Talk about all of them partway through the episode. With me as always, mister Scott Talinski. How are you doing today, Scott? Hey. Rid. Doing good.

Doing real good. Just kinda hanging out. You know, I cleaned my office a couple weeks ago. Yeah. Feeling just it's great to come back to

your your workspace and have it just feel like, hey, man. This this space is for working. Yeah. It's all nice and tidy, and it's feeling great. Rid. So, yeah, I'm feeling good. I was thinking about doing that, like, as like a Friday ritual. You know, like, the last thing you do on a Friday is just clean your office, get it all set up for the next week. Because sometimes I just leave, like, Friday afternoon. You got an hour left. I start doing like, I was stripping Ethernet wires on Friday here, and I came back and I was just like, oh, there's freaking little pieces of copper everywhere.

Like, what did I I just, like, kinda shot myself in the foot for, like, a bad start to Monday and Had to spend 15 minutes cleaning it up. I think that kind of ritual type of thing is good. Like cleaning or having those the same you do the same thing

The same time every week sets you up for success.

Yeah. Next week, I I like that kind of stuff. And my type of brain, I think, really appreciates having rid. Just kind of regularly scheduled

activities like that. Yeah. I need to

start that cleaning is probably not on the list of things that I am good at. So maybe once every Friday is was good for me. Oh, man. I'm super late cleaning. I did. So we have, like, that wolf range. That big ring. Yep. Oh, yeah. I did a deep clean of that thing last night. And what's so cool about that is that it's an old one. Ours is, like, from the nineties.

But, yeah, each individual piece of it, you can take apart completely.

So it's it's really truly you could take the entire thing apart and replace any little bit of it. And so that means you could also take it all apart to clean it. So I I could just take every single little piece apart, deep scrub deep clean. Put it back together and feel like, yes, things sparkle in the bed. No, it's, you know, what, how, how long ago was the nineties?

Yeah.

Forever ago. But that's that's why you buy something that is, like I don't know. People sometimes say, like, stuff like that is, like, People buy it just for the looks, but, like, here you are with 30 years later, and you can still buy parts for it and and replace things on it. So and And I don't really have to buy parts for it. I can just clean it. Yeah. Take care of it. Yeah. So sick pick for you. Talking about range. Can you have your views? Barkeeper's Friend?

I you know what? My mother-in-law has used Barkeeper Friend, and so I think we have some of it in the house because of that.

But I I don't know if I've used it really myself. Do you ever have trouble getting

stuff off of a pan or, rid Cleaning your sink or your your range or something like that. Parking for spray is where it's at. Nothing the powder stuff. I was gonna say, how do you feel about the spray? Rid No. Don't buy a spray. Don't you got it. Cleaning products in general, there's a lot of fluff and and, like, ease of use stuff out there. Rid. You gotta go with the OG stuff that people have been using for 400 years.

Yeah.

Because that's a sick pick for you today. Alright. Well, looking up stuff that people have been using for 400 years. We're gonna be talking about the technology featured in the Web Almanac today, because there's a lot of stuff in here that, well, I guess the the CSS portion, not so much. In the JavaScript portion, you'd be seeing a lot of jQuery and stuff like that. But, I think real quick, maybe we should talk a little bit about their methodology before we dive into some of the data. So Wes and I were taking a look at this a little bit. It what What it seems like, it it seems like they just scrape a ton of data. And so it says in the dataset used for this data, there's 8,300,000 websites, 7.9 are mobile friendly and 5.4 are desktop.

So that's interesting.

Right? 5.4 are desktop and 7.9 are mobile.

So doesn't it feel like it's swapped? I mean, I know it's 2022 here, but it still feels weird that that's

so much more in mobile than in desktop. Yeah. Rid. Yeah. But I I I often find myself stumbling upon it. Like, we sit at a computer all day, and then, like I said this many times, I go and talk to my friends in the real world, and they never sit at a computer. Never. The whole Oh, they do. World Yeah. Is yeah. Their entire world is through an iPad Or an iPhone. So right. And it drives me crazy because it's like, how are you productive just using your phone? You know? How do you do research on things? And rid. Yeah. Nuts, but that's the way the the world is going, I guess.

That's the way it is. Yeah. I was I was wondering about you know, people talk about, like, iPad coding. Rid. This is somewhat unrelated, but Yeah. I always wonder, how do they get dev tools and stuff to work in iPad coding environments?

I'm sure you can open it. Then we talked to, Because dev tools is just JavaScript at the end of the day, so it can run. Like yeah. But mobile Safari, whatever, doesn't

Allow you to have inspect all the Internet stuff. But but you can inject

Chrome DevTools is a web app, and you can inject literally any web app into a website.

So I'm sure there are others probably even a bookmarklet,