The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage

Welcome to syntax. Today, we have the state of CSS reaction part 2. So we Had gone through it a couple episodes ago. We got went through the 1st hunk of the state of CSS survey.

This is always kind of interesting because we get to Have a little peer into what are other developers using, what are the new features that people have used over time.

And we're going to go into CSS framework, CSS and JS resources and a couple other pieces. So My name is Wes Bosma, developer from Canada. With me as always is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good.

Slight disclaimer, I had dental surgery.

So I am, speaking with a retainer. I'm going to do my best To not make weird mouth noises or be obnoxious, I will, just putting it out there. Okay? But other than that, rid. You know, I'm on, narcotics. I'm feeling decent, and, just trying to get through it is is how I'm feeling. Right on. Rid. Syntax is brought to you by Sentry.

You gotta take action on your lines of code, crashes, busted API calls, rid Stuff's going wrong with your app. Sentry helps you figure out what went wrong and how to fix it. Check it out. Century. Io. Alright. Let's Dive in with the first one here, which is CSS frameworks, different UI frameworks that you can use to build your UI sort of like a starter.

It's kind of interesting. I think very clearly the winner here is of retention over time is 75% of Tailwind, and Tailwind is killing it on 46% of interest. You know what about usage? This is actually kind of interesting.

Rid What do you think the most used CSS framework? Obviously, people are interested and use keep continuing to use Tailwind by far the most. But what do you think is actually the highestly highest used framework?

Obviously, Bootstrap.

It's been used the most for a long time. I do wanna point out, though, that, even though, like, interest in tailwind is high, it's gone down from twenty rid 20. It was at 62% in 2020, and retention has gone down as well.

But, like, awareness is, like, pretty much flatlined. So It seems like usage is going up, but maybe, like, they've reached maybe saturation in terms of, like, who's picking it up. Although,

You know what did go up? Bootstrap went up. Just just a rounding error. Probably not anything significant. That, at this point, is has felt like rid

It's, like, the most mature tech it is. Probably, like, WordPress firmly rid implanted itself into the web at this point. I think we've reached a point where a bootstrap is forever embedded into the web, and no matter what we do, it will be here forever. When was the last time you went to Bootstrap's website, Wes? That is a good question. Not in a while. Oh, that looks nice. It looks nice. Yeah. It looks much nicer than it did before. I mean, I remember There for for people who are newer to the web, there was a time when every single new project that came out was a bootstrap, Essentially, copy and pasted Bootstrap.

You had the hero. You had the the header.

It was obviously Bootstrap, and, obviously, that there was a a huge pushback on that because it was so ubiquitous all over the web. But I I will credit Bootstrap with being the very first technology that made it effortless for Back end engineers and developers who are not UI people to make nice looking UIs incredibly easy.

And because of that, it majorly took hold even maybe in places it wasn't supposed to be used. And at that point, it was Twitter Bootstrap. It was A Twitter project, and now it's just Bootstrap. It's in version 5.3.

And you know what? I'm not reaching for it, But that doesn't mean that it's not a a very powerful and and great tool today. Yeah. I think that's kinda interesting where

the way that you author CSS And the way that it looks are like obviously they can be anything. But with something like Bootstrap, rid. They're often same with, like, material. Every time I see a material design website, I'm just like, ugh. You know? And I feel It makes me feel like this app is going to be crappy, and I think that's because it's been slapped on so many half cooked apps over the years, rid, which is which is sad because when it came out, I remember the clicking a button and the little, like, the background just went like the little radar animation in the back of the button. I remember that just blowing my mind. That was the coolest thing ever, but it's just come to a point now where I'm like, oh, this is going to this app is probably not going to be very good, you know.

So we're starting to see like tailwind, tailwind UI. That's the What it looks like and how you write the code are separate. Right.

And I'm starting to see that in a lot of new Frameworks come out. They it's like, we will give you some CSS if you want it, but

don't make all the websites look the same. Yeah. Although I will say, I think there is a bit of this this world we've hit with CSS frameworks where so many of these back ends are using the same exact properties now. Yeah. And it could be like a symptom of tailwind or whatever, But there is a specific aesthetic that I can pinpoint immediately as using a certain set of tools rid In whether, like and that aesthetic has gotten a bit boring to me. Yeah. You can smell it.

Rid You can smell it. That said, people can bend and manipulate tailwind to look like anything, and I I have seen Websites I would have never in a 1000000 years guessed to be Tailwind looked like Tailwind, so or be Tailwind at the end of the day. So I think that there is, like, a A subset of that same boost stratification with tailwind sites because it some of the defaults are are, you know, ubiquitous. Yeah. But Colors and whatnot. The same same thing. Good developers will be able to to make anything look unique and awesome.

What about some of these other ones on here? You know, an interesting option is foundation is, you know, interest in foundation has gone down year over year over year, rid usage of foundation year over year over year, retention.

What what's interesting about this is even awareness. Now we've gotten to the point where foundation is so

Not considered that people aren't even aware of it as being a thing. Yeah. There's a whole generation of kids that don't even know what a foundation is. Totally. It it makes sense. It's It's probably it's probably been, like, 6 years since I like, my own website still my course website still uses Foundation for a little bit of layout stuff. Wow. That's just rid. It needs to be ripped out. But the other thing like, that's why Bootstrap is so popular right now is that, like, it probably should be ripped out, but I don't care enough because it's just a grid. It's a grid of things.

And if I were to spend a day rewriting that to To make it look exactly the same, it's not worth my time. But but when a big redesign comes around, then certainly that thing gets ripped out. Yeah. There's a lot of things on here that I haven't necessarily looked at too much like UIKit,

Pure CSS.

Man, Pure CSS has existed for a while.

I I haven't looked at it in a very long time.

Blaze UI, Yeah. How do you feel about these kind of 2nd tier CSS frameworks? I I guess you'd call them maybe even like lower than that. Yeah, I think it's exciting. I like seeing lots of options,

As well as a lot of these CSS frameworks are also component libraries, meaning that they make Building accessible, tricky UI really easy.

Like every time I go to a website and I need to Filter for Canada. You know? If it if you give me a drop down that I have to pick Canada out, it's oh, it's okay. I know I know to hit rid See button 3 times, and I hit Canada. But if you let me filter the list and select, that's so much better. Rid. That was a hard thing to implement, but not now that we have these UI libraries where they have made a filterable multi select drop down With the flag beside every country, it's a little bit easier, right? It's a little bit nicer. So every time I hit that, I'm like, oh, good. I'm glad that these things are getting easier because as a user of websites.

They're much better. Yeah. And then and then there's kind of a weird, distinction here where we're hitting. Some of these things are UI frameworks with CSS and CSS as a part of that. Other of them, like, that's, like, full kit and caboodle here. You got the UI and you got the CSS. Other ones, You have UI things like maybe like Shoelace, which is a web component for or web component library for UI elements. Right? No CSS involved rid Other than the bare bones to make it work, you bring your own CSS.

And then you have things like open props, where open props, from Adam Argyle is on this list for the is it on yeah. It's on this list for the 1st time, and I really like open props. I end up using this all the time because It's just straight up CSS variables. They call it subatomic styles because you're not dealing with classes here. You're dealing with CSS variables, And that's personally how I prefer to work.

So,

I I I like tools like that, and I'm glad to see open props on here. Yeah. Maybe we should explain for people listening, like the differences between the 2, because at the first level, there is just a way to write your CSS, And that's what like a tailwind would be, right? Like it's just a way to write margin. It's a way to add padding. It's a way to change the text size on an element.

And then you have a 2nd layer, which is like a UI component foundation, Bootstrap were big ones.

UI, it's what it looks like. You know, like these are prebuilt things. And then the 3rd level of that is like, oh, now they also come with the JavaScript as well that allow you to build things like interactive drop downs or modal pop ups or filter lists or all of that stuff. So There's kind of 3 levels to this type of stuff. Yeah, totally. How happy are you with the state of CSS frameworks? Rid. Most people are either happy, very happy, or neutral. So I feel like that is is really good. Rid. Right. I feel like that's much better than previous years. Only 5% of people are unhappy.

So I feel like we're in a pretty good space for both how to write your CSS as well as CSS features. One thing we didn't talk about, which is CSS in JS, it got it, it sort of blew up 5, 6, 7 years ago as a way to author and tightly couple your components in your JavaScript framework With the actual CSS that goes in it, obviously style components being the most popular one, Emotion, style JSX, CSS modules, all of that. Seems like they're all on a downward slide.

And I would probably attribute that to A couple things.

A people are just using regular CSS, a lot of the getting values from JavaScript Into CSS can be done with CSS variables, and it's not necessary.

B, I think some people have hit Lots of perf issues with that type of thing. And see, I think a huge part of the industry is going over to utility class based stuff. So rid. They realize, oh, I don't even need any of this stuff. I just need to be able to add classes to my elements.

Yeah. I do think that's that's definitely some of it. You know, the CSS and JS 2 and Underlook part of it was like some of these tools, like rid. Styled components, they had, like, a Babel component to them, and people are moving away from Babel. And now you're, like, stuck in a situation where, like, well, what do I do? I can't get my rid Styles with SSR and everything like that without the babble component if I'm using a babble less world.

Rid. That's that and that's not, like, a huge component, but that's definitely a component.

And, again, I think some of these frameworks are getting better at CSS.

Rid Vue does CSS really well with scope styles. To mention that. SvelteKit does super well with scope styles. I couldn't even tell you, Like, what benefit CSS and JS would bring to Svelte because a misunderstood aspect of CSS and JS is that At the end of the day, it's really just a strategy for scoping.

It scopes your styles rid to a component.

And if you don't need a strategy for scoping, you don't need rid CSS and JS, really, there are some cool benefits like being able to do JavaScript.

That's something that rid. I do miss in Svelte occasionally as being able to do straight up JavaScript to maybe loops and stuff since we're not using Sass, we're using post CSS.

But most of the time, you wanna pass props into CSS or the types of things you do with, CSS and JS.

Yeah. Man, that can be just done in CSS variables. I think CSS variables has completely flipped the script on everybody using this stuff. It has been like a A massive productivity boon for boon is the right word. Right? That means good? Yeah. Yeah. I think so.

It means good. If boon means good, I mean to say it's good.

It's a it's a massive good thing for CSS writers, not to have to bring in a library just to get, rid you know, reactive variables across their entire

CSS space. Yeah. Exactly. I I tweeted out the other day. I was like, if CSS rid Was a JavaScript framework, people would be losing their mind because you know what you know what's reactive.

Rid. CSS variables. Change a variable literally anywhere that variable is used or, computed rid to be used. You know, like, if you if you have a value of padding 10 p x and you divide that by 2 and then add 1 pixel, then it would just rid. Update it and then re render where that variable was used on the page. Like, that's amazing that CSS variables are reactive.

Yeah, there's there's still a couple of times I wish I had loops in CSS, but I think for a lot of people that are saying, yeah, I'm still sticking with Sass because I want my loops and and everything like that. You a lot of the time, probably 87% of the time, you can get it done different way. It's not you're not generating a bunch of classes, but if you sort of take a step back and say, maybe I can rethink how I approach this type of thing, Then you can make that variable part with

variables. Right? Yeah. There's only 1, like, time I wish I had looping.

I I was recently doing, like, a grid of color boxes, and I had to do, like, nth child 1, nth child 2. That's my intention. Like, rid This would be so much better with a lube, but yeah. Hey. That's it. One time in my entire code base is not that bad. And and, honestly, rid. You could just put a style tag in your

in your Svelte. Right? You're right. You you could just inject me from doing that. You could just inject like, A style tag is a dom element, so you can put CSS in there. I don't know what that there's probably some sort of downside to that, but I think it would work. It's doable. Yeah. I think it's doable. Yeah. You know, one thing I I,

I think is really interesting is if you go to usage in CSS and JS before we get of this topic in general. Yeah.

It's pretty low across the board with styled components really being the main one. And and CSS modules to me is so surprising at 44% of usage because that DX for me of using CSS modules has been DOA since day 1. I I've never been a fan of that workflow. Like, you're importing a class and attaching it. Like, No. You missed me with that one. I I'm surprised that so many people are using that given

it just does not Feel good to me to use. I don't get that either. It I I many times, I've gone back to CSS modules and be like, rid. Alright.

Why is this popular? You know? Yeah. Yeah. And I just can't I can't do it. It's just not for me.

Rid. And I'm surprised. I'm I maybe I shouldn't be surprised because, like, the way I do it is not the way everybody does it. Right? But I rid. The way I do it is the is the only way and the best way.

Let's talk about the next section, which is other tools.

Which pre or post processor do you regularly use? 72% of respondents saying Sass and 45% saying post CSS.

I bet that these numbers are much higher in the post CSS regard, But people don't necessarily know that they are using PostCSS, right? Like they might not know that their rid Tailwind tool or their Vite tool or whatever parcel is using post CSS for them.

They just Do the thing and the CSS works in all of the browsers.

So I bet that's much higher because was surprised to see Sass being much higher than post CSS. Yeah. Yeah. Me too, especially nowadays

when CSS can do so many of the things that you would do Sass rid anyways, but let's not discount the amount of people who have been using SaaS for a long time and just as part of their workflow. Yeah. Solid. Thing as Bootstrap. You know? Like, you're not gonna you can't swap out

years of CSS because Oh, it sucks. I've done that. Conversion life process.

Yeah. It sucks. I've done it. And, you know what? I've done it a number of times because, down here at the very bottom of the list is, 290 respondents responded with Stylus, which is it brings me great sadness because Stylus was really the best, and I miss it so much all the time. It's actually shocking that Stylus is so well, it's not shocking given the adoption of Less, but Less to me offered nothing. It offered Less.

It it it was always the worst of the the preprocessor options or post whatever they are. Postprocess rid. I forget which it one it it is in at this point, but, like, it it always offered the least to me. But yet, somehow, Because Bootstrap initially offered it, people just got roped into using Less, and, I feel bad For for people who chose less as their main processor when, SaaS was so much better, stylus was better. Pick anything other than less. Rid. Utils, one of the top

utilities used by everybody Prettier way ahead, which is amazing because Prettier was initially a JavaScript tool, but it's fantastic for formatting CSS as well.

Auto prefixer.

That was a question we had the other day. Like, what are the things that we still need to auto prefix. There's, like, a handful of, like, weird ones out there. I think it's mask has to still be webkit mask.

But there are some things that pop up. Yeah.

Well, I'm not going to do it because I'm going to ask you. Don't research it. Next time we do stump, I'm going to ask you that, like name 5.

Okay. Bender prefixes that we still

must ship to Have browsers. If you were asking me this right now, I might be able to come up with 5, but there's a good chance I would fail that. Because, Luckily for us in in the year 2023, with all of the tooling we have, CSS prefixes, thankfully, is not something We need to think about Yeah. They used to be something that you had to copy and paste or even worse right by hand. Yeah. On CSS 3, please. You used to have to go to a website.

Back in my day, you used to have to go to a website and copy and paste a whole list of prefixes just to get a border radius.

That's, Yeah. That's how we used to work.

StyleLint at number 4, I really like StyleLint. I think it's underutilized.

I think It's maybe not the most fun thing to set up, but when you get style and set up, it can really be one of those tools that takes rid The code review part of your workflow and makes it into an automated process, enforcing things like CSS variables or specific code styles or don't use these certain properties or even some of the better things in it are, like, rid trying to do a transition on animation on a position instead of, like, using a translate three d property to do it. Right? Rid. So just being able to understand where you're kind of foot gunning yourself with, you know, potential performance issues or or general code smells. 213

people, Using Lightning CSS, I bet this will be at least 1200 in the survey next year Lightning CSS is sort of an alternative to using post CSS. You can use them together, but it parses, Transforms, bundles, minifies does all that good stuff. So if you've got some future CSS that you need to use, Lightning CSS is the one for you. It's made by Devin, who is also the author of Parcel.

And I bet that it's going to be extremely popular in the next year. I I like lightning. I think it's cool. I think it's, nice and easy. Definitely has an a knack for making things easy to use, and Yeah. You gotta love tools like that. Rid I haven't heard of some of these. Project Wallace. That sounds very unusual with 30 people rid. Responding about project walls.

Let's see what that is. The best CSS analyzer out there. Project walls is a set of CSS analyzers that check Complexity, specificity, performance, design tokens, and much more in a single web app. Oh, that's cool. It'll tell you How many times have you used pixels, ems, rems, the different font families? How many colors? The colors is nice because like Sometimes you can drift like this is this is a problem with logos as well as people just use the color picker to match it as close as possible.

And then before you know it, your colors don't look consistent across

the across the board. Yeah. There's an interesting stuff inside of this.

Code quality check calculates specificity. I don't need to do that typically, but the, the code quality check is interesting. The analyze For color distribution like, these aren't essential tools here. Let's face it. But it's interesting.

Rid It's doing something a little bit different. I learned something here. What is what is Atomizer? Create small reusable

rid. CSS that scales as your website grows. Okay. This feels like a CSS

framework.

This is a way read To author your CSS, but instead of just classes, it's kind of like rid. Functions.

That I see. It's kind of it looks similar to like the the Tailwind stuff where you can generate it on demand, right? Like There's not going to be a class for absolutely every single thing. So in this case, it says there's a class called BGC parenthesis.

You pass it a hex code and put a dot five on the end, and that will basically take that hex code and give it 50% opacity.

So that's kind of interesting.

Yeah.

I guarantee everybody will look at that and be like, what? The syntax is pretty gnarly.

So I bet there would be a a pretty, big reaction to that, but it's interesting.

Yeah. I I'm looking at it feeling a little uncomfortable myself, But I you know, I've done a a cursory glance here.

I think the section on browsers is somewhat interesting. Which browsers do you work Primarily during initial development, it's no surprise that Chrome is number 1 and Firefox is number 2. I'm surprised that

rid Firefox is so Chrome's 81, and Firefox is 86. That's I would think Firefox would be much smaller than that. Really?

I have, I have a confession to make. I've been using Firefox as my primary browser lately for the past, like, 5 months because I I do that sometimes. I just change the browser that I use for a long period of time. It's a good idea. The and one thing I've noticed about Firefox is that There's some weird perf issues occasionally. Like, for the most part, I really like Firefox, but there's some times where it's it's not quite a of a Not quite paradise, but it's nice to try different things. I am surprised that Edge is even at 23%.

Edge folks, if you're out there using Edge as your primary browser, hit us up at syntax.fm on x or Twitter, whatever you call it. I wanna know Why? What does what does Edge give you? I've seen Edge install some kind of bloatware in the browser itself.

It is just Chrome at the end of the day.

So, like, why not just use Chrome? What's up with that? So I'm interested in in those of you who are 23% edge users. What what is edge giving you that Chrome isn't? What edge is it giving you? What's, what what what's the edge app? What edge are you getting in? Have they been to the edge and back? Safari, do you remember those commercials? Am I speaking into an empty void there? No. I I don't know. There's, like, some pizza commercials from the nineties about the pizza has some kind of an edge, and it was like kids rid Being like, I've been to the edge and back. I have no idea why that just came up in my brain, but, hey, it's there. Safari, 18%. Yeah. Safari is a decent development experience. Is it the best? No. But hit something that's really good about developing on Safari, one, you catch bugs pretty early because Safari's Kinda strict on some stuff. But, 2, if you're on an m m m one, m two base Mac, whatever, Man, performance on Safari, battery life on Safari is really good. Sometimes if I'm running off my battery on my Mac And I'm, like, like, on an airport or somewhere I don't have access to plug my computer in, I'll dev primarily in Safari just to get that perf benefit, that battery life benefit. You know what kills me is

the Safari console is stuck to the bottom instead of just wherever the text is. So by default, I have to type in stuff into my console at very bottom of my screen, and that drives me nuts. Yeah. You could move it, though. How? You can move it to the side. No. I mean, like Like, when you're when you're in a cloud, it's kinda like terminal. What you're saying. If you're typing LS on terminal, it's it's at the top of the screen, and then your content moves down from there. Yeah. That's a, rid It's a oopsie daisy to me. It's probably in in I should try Safari again. I remember trying it, like, a a year ago, and I was like, this rid is awful.

You know? There are things that bug me about it. Yeah. Grid tools weren't very good.

The dev tools are considerably worse than both Firefox and Chrome, which makes it a hard sell. Mhmm. And I I use Safari somewhat frequently, Especially because I've been working a lot in Tori. The dev tools are in Safari, the dev tools, so I've been really in that headspace lately.

But, yeah, it's it's not lovely. I do see, Polypane got a, you know, got a usage percentage here, and I like Polypane. I probably wouldn't use it as my primary tool because it can be a bit much with all of the different window. Like but I will use Polypane Frequently in development all the time for many different reasons, but it's a really wonderful Developer based browser, not something you would use to browse the web with. But as a tool, it's a a really excellent tool. So

rid. Shout out to Polly Payne. Going into the next section here is CSS usage.

I'll let you pick out an interesting one, but I thought this was pretty cool.

Industry sector, which industries do you work in? So the largest amount is programming and technical tools.

That means that most people are working for, I'm assuming, like startups, not startups, but basic companies that build a piece of software that people use pretty close behind it. Consulting services And then ecommerce and retail are the 3 biggest ones. So you're you're either working for Someone who sells stuff online, big company.

You're either a consultant who works on all kinds of stuff or you're building like rid. An application that people use in from their day to day, like a FreshBooks or something.

Yeah.

It it is interesting to see rid Programming and technology is number yeah. It does feel like

it's like the industry is supporting itself. Right? Like, where Well, not really. Like if you think about if you think about literally any industry. So, the McDonald's you drive through and they show you your order total. I saw the rid day that the McDonald's somebody tweeted a photo of the McDonald's order saying like, showing the Chrome broken page. And I was like, the freaking McDonald's Screens that have the menus on them are built in HTML and CSS and JavaScript. You know, like, how awesome is that? And literally everything.

No matter what industry you go into, there is some sort of web app that The people that are using to run that business. You know? But isn't that industry food? I wouldn't think so because, like, You would work for a like, I guess if you work for McDonald's. But what I'm betting is that they they use some service rid Yeah. Yeah. Like Yeah. You're right. Like bored smart TM or some BS like that. You know? And whatever crazy thing it is, They are probably building that. At least part of it, they are building it in web tech. If not like the actual board itself not being built in HTML and CSS, it is. There certainly is a UI that people use to update what's on that board, and that almost entirely is built rid in web tech, unless it's, like, entirely just an iOS app, but it's almost always a website that people can use to log in to.

Rid. Yeah.

Unfortunately, this this one, I don't think they had data from previous years, so it's not like you can see over time. I think one of the most interesting things to see over time would have been the crypto one over time to see with that numb where that number went. Yeah. Interesting.

Rid CSS usage, most people are using it professionally instead of as a hobby or as a student, Which makes sense if you're the type of person filling out a survey on CSS, probably somebody who's working in the industry. Right? Yeah.

Java, CSS, and JavaScript balance. How do you divide your time between writing CSS and JavaScript code? This is interesting that A lot of people are writing more JavaScript than CSS according to this. That makes sense. Although, rid Most people have no the yeah.

Yeah. I guess so. It's fairly

fairly well balanced. It's about 10% In all of them, except for 9 or sorry. 20% of people are writing how do you even say this? 20% of people

Write JavaScript 60% of the time.

That's some of the criticism of these surveys. Sometimes you're like, what does that even mean? But I look at that and I say, all right, most people are doing a fifty-fifty split with a slightly higher eek rid towards writing more JavaScript than CSS, which I would say is fair for my own development as well. I'd say it's fair too. I think it's rid Interesting

when compared to maybe 10 years ago. Mhmm. Because I think 10 years ago, these numbers would be very, rid Very far skewed to CSS being a thing that people were writing more. I mean, at the time, people just weren't writing as much JavaScript straight up. Yeah.

Yeah. This one is really exciting, browser incompatibilities.

And to me, this is more of what features can't you wait until you can use? Features that you have had difficulties using or avoiding altogether because of lack of support or differences between browsers.

CSS has coming in at number 1. Everybody is just waiting to be able to do that. CSS nesting, Close 2. Container queries, close 3rd.

Subgrid, close 4th.

And then scroll bar styling. Oh, come on. That's one of that's a progressive enhancement. You could do it in almost every browser,

and you get being in here. Yeah. That's bizarre.

It's also something that, like, do you really need to do that? That's always I like Oh, I always stop my crowbars.

Yeah. I get it, but it's it's one of the ones where it's like, rid. Do you really need it? Like, is it how big of a deal? It's not a big deal to me. I I get that it's cool and that it's fun. Yeah. Maybe because it's it's different in all the browsers. So you have to write different code for every browser and people are probably just like, you

rid You know what? Like, it's not something you can really transpile because the scroll bars are different, but that's that seems odd that that many people are are, miffed about scroll bars rid. Scroll bar styling.

Yeah. Totally.

Interesting.

Missing features, what do you feel like is missing From CSS entirely, animate to auto was number 1 hun number 1. Yeah.

Bro, like, it's one of those things that should have just worked from day 1. I get it. It's hard. CSS, has some difficulties with that type of thing. But, if we would have had the ability to animate 0 To auto in CSS, a huge amount of time spent would have been saved over the time. Masonry layout is really high, but How many websites We're getting that. Yeah. I get I know we're getting that. But how many websites do you use on a daily basis that have a masonry layout. Me? 0. Absolutely none. When was the last time you opened Pinterest? Never. Who cares? Yeah. So I just don't I don't get who's Who's dying for masonry? But I get its need. Maybe it's useful in, like, like, I could think of, like, a tweet cluster where you just want it all to fit in, right, or something. Rid. But as I guess I think that's it.

It's variable content that packs in nicely.

And the frustrating part is that we we have it with CSS columns. You can do that, but if you want it. But then your content goes everything column 1, then everything column 2. People want Column 123, then start again. 123.

You want to just pack them in tweets, Even like pricing pages that are different heights.

I think if we had it, it would be like not necessarily like a whole photo gallery Pinterest thing. But every now and then you've got 6 things and you want them to be nicely packed into each other and one of them spans 2 columns.

It's nice not to have to explicitly put them in a grid and just say, you know what? Here's how big you are.

Figure it out. Word.

SVG and CSS.

What's the what what am I missing? A support for s g SVG inside of CSS code such as background, why do we need that? Can you think of a a reason? Let me we can already reference rid. SVGs, images, but, like, that that feels like you're mixing up the the content with the the styles in a way that

rid I don't know. So in the syntax website, in the trend the new transcript layout, I indent values underneath the heading. And it's kind of like a timeline, right? And the timeline follows you around. And Basically, when we get to a new heading, we squiggle out to the left. You have the heading, you squiggle back. Right. So I had to make these little SVG squiggles, ready. But then I need them to be like, I need to be able to control the height, the width, the color, all of that stuff with it. Right. So, like, I had a couple of options, which is like I could inline them.

But if I wish I could just use them as a background image. But then as soon as their background image, you can't You can't control any of the SVG parts of it, right? You can't say the color or anything like that. So I had to inline it and use CSS variables to change the colors on it so rid. You could see that.

Like, what else, though? I don't I don't know. I I don't know if I've I've run into that pain point, I suppose. Maybe it's like a like a path

in CSS.

Yeah. If you want to, like, border left, I don't know. That's a bit of a tweet us because I can't think of anything right now past that one

thing, but I'm sure there's some good use cases. Here's a fun one. Number 9 on the list, Wes, is something that we just Talked about support for visually hidden content. Oh. We talked about that in our episode.

Yeah.

Visually hidden content.

Right now, you gotta use a class with a bunch of, like, a very hacky pinpoint of way of doing that. It's a accessibility thing, so you gotta have it. But, like, hey. Just get us that. That'd be cool.

More pseudo elements, having more than 2 pseudo elements per element.

This to me is something that I've Before before? Yeah. I've actually would love this, but it does feel a little bit like a cold smell to me. At the same time, I would absolutely use this, and I would like this. So, I can't hate on it. Yeah. Before and after are so handy when it's rid Purely

a stylistic thing. You know? And sometimes 2 ain't enough.

Maybe we could have 4.

Rid Yeah. Before after,

left and right. Why put a limit on love here? Let's let's go as much as we can. I'll build my whole website out of, befores.

What about grid line styling? This is actually something that I would love as well, being able to style the lines on a grid rather than Having to do borders for specific, elements because it can get a little hairy if you just wanna style a specific column line. Mhmm.

That could make laying out things really nice and easy and and just, like, really take us into rid More powerful grid tools. It's not something I had thought about, but it's something I would use. Definitely.

I I had to do that the other day when I was I was showing how to rid. Get equal columns in CSS Grid, and I had to overlay the dotted lines.

And I had to I just had to add divs rid and style them how I wanted it. And then you explicitly overlap them. Right.

You use The grid column on it. But, yeah, it would like, the the grid lines are not an element, though. So how would you I would just style that. Yeah. A gutter background or something? That'd be cool. I mean, I think about it like,

You know, you have those grid tools in Chrome and in Firefox. Yeah. You if you click on the grid, you get those really nice grid lines and the the dashed, rid backgrounds for the co for the the gutters and everything like that, hey.

Rid in that sort of same way. I know they're just doing it with divs and hacking around it, but it'd be really cool to do that without those, hack arounds. Let me style the gutter. Let me style the whenever.

Now let's take another look here at, CSS pain points. Rid. Browser compatibility still being the highest. I don't ever see that changing. That feels like that's always going to be the highest pinpoint.

Number 2 being the form element styling. Yes. Form elements have never not been a pain to style. I I'm still doing, You know, CSS hacks to get fancy looking toggle switches. Come on. What year is this year? We love toggle switches.

Let's make it easier. Right?

Architecture and maintenance, file organization, dead code elimination, refactoring, etcetera.

Yeah, that certainly is getting a lot better rid these days, but probably still a pain point. Responsive design is a pain point for a lot of people.

Rid Really? Yeah. I know. I feel like we have a pretty good handle on it. Like, it's hard. Like, maybe maybe, yeah, it it can be a pain. To lunch. Sure. You have the tools. You gotta do the work, though. I gotta say, Wes, I rewrote

a section of the Syntex website the other day that I had With media queries, I'd I'd 3 media queries to do some little, reforming of things, and I rewrote it using a CLAMP statement.

And boy, howdy. I felt great.

Folks, if you want to get better at responsive web design, I would invest your time into deeply understanding CSS Grid.

You can do an outrageous amount of adaptive layouts with CSS rid. Grid. And 2, the things like clamp and dynamic units and min max, that sort of stuff. There's so many different Fun things there that you can do to avoid just, hey. Let me just set a, media query and and address the values here. You can,

get some really nice adaptive layouts. 41% of people are happy with the state of CSS. 15%, very happy.

I I think I'm pretty happy, especially, like, layouts.

Someone on Twitter was saying, like, CSS is the worst layout engines ever. And I was like, bro, rid No. Paul No. Please. Show me Holy.

Like, show me literally any any other UI tool for laying things out that is as powerful and as flexible as CSS. Certainly, there's lots of things that I'd like to be easier and better, but rid. Grid and Flexbox layouts with responsive design.

We've got the tech to build rid. Amazing UI. And I don't think that there's any other like, maybe I don't know what it's like to build rid. An Ios app, you know, but I think that it's probably not as as flexible and as easy as this type of thing. CSS

is the best it's ever been. Mhmm. It is shockingly good now.

I was a a CSS Stan, rid You know, 10 years ago, it was my favorite thing to work on. And if you would have told 10 years ago, Scott, that CSS would look the way it has now, it's, like, not even rid It's, like, hardly even the same tech as far as layouts go and variables and things like that.

So I I would have responded to this very happy because to me, it's been on such a wonderful trajectory.

And right now, hey, we don't have some rid Some little things, but we have, like, many of the things that we would have loved a long time ago. So I I love it. It's so good. Rid Resources kinda interesting.

The way people learn self directed is by far the biggest.

Rid Videos and screencasts, about half of that online courses, about the same.

On the job training about the same. So people are either figuring it out themselves by Googling or rid Doing video screencasts, online courses, whatnot. View source, also very popular as well. You learn I learn a lot from that type of thing. Yeah. Hey. Podcast number 1, Syntax. Woo.

Yeah. Yeah. Yeah.

We we didn't even send people that way. Next year, we gotta we gotta pump that up. Pump pump pump pump it up.

Next year, give us a vote

for for that type of thing. Yep. Yeah. Totally. And, West Boss showing up pretty high on the CSS people. I gotta get my numbers up here. I'm on the other answers tab, which is honestly a little depressing considering I I do feel like I rid I, I I do really love CSS, so maybe I need to spend more time honing my, rid CSS chops here on the, socials and and put out some much better CSS content. Because honestly, some of my best Courses, modern CSS layouts, modern CSS design systems. Some of those courses I've done, I'm really proud of. If you're interested in learning about, You know, CSS layouts with grid and stuff like that. I got some courses on level up dot video for free, so check them out. I I think it is a bit of a popularity contest as well because, Like, certainly, I should not be above or

Jen Simmons who literally work on the CSS specs. You know? Like, Here I am talking about it. These people actually spend time trying to figure out how should CSS grid work? You know, like, Can we get Yeah. Conical gradients in CSS, like, all of that sorta hard parts as well? So Yeah. Una and Adam,

Both of them.

Yeah. Yeah. There's a lot of people that make CSS below me, so that's just the, anything. But, rid. Good to see Kevin Powell up. He's killing it on YouTube, though. I see a lot of his stuff pop up all the time. We should have him on talk about that. Rid There's quite a few of the stuff, so I should look it up. Oh, yeah. Definitely check it out. I think Kevin Powell and, Fire Ship rid are killing the tech YouTube game right now. Yeah. Totally.

Yeah. Okay. Let's go into the awards, And we could do our our little, reviews of the awards. Alright. Most adopted feature, which is the largest, rid most adopted feature year over year.

So feature. This is CSS feature. What's the most adopted feature, Largest year over year. Since this is, from, 2022 to 2023, I don't wanna say variables, but maybe I'll say variables just because. Yeah. I It's mainstream. Like, variables is like, I saw it. It was at, like, 94%

usage. So pretty much everybody's using it. But that's why it hasn't jumped that much since last year. Probably not most adopted feature.

I'm going to go with scroll snap. No.

Aspect ratio. Aspect ratio.

Ready? 3, 2, 1.

21.

Rid. Has. Nobody. You come on a bunch of liars.

You're liars. It's not even supported. Container queries,

runner-up, And dynamic small, large, and dynamic

viewport units. I could see container queries. Yeah. We're using them. I started using them this year, A con. Alright. Most commented feature, a word to the most feature that, feature that received the most comments, Has. I'm gonna say has again because we know has.

Yeah. I'm gonna say has.

Subgrid.

Subgrid.

Rid 531 commas. No other feature even claim close to generating as much feedback as subgrid. I think people are like, where is it already? Come on. Yeah. We gotta do a subgrid show Talking about how it works and when you would use it. I think a lot of people don't understand, but why would you even need that? Totally.

Highest retention, technology with the highest retention of returning users.

Say bootstrap. Tailwind.

Rid OpenProbeins.

Wow. Nice. 91%

retention rate. I think this might be a mistake, because I don't think they were on the I don't think they were on the thing last year.

I don't think they were on the is this year over year? Yeah. It should be year over year retention.

Or maybe retention is would use again. That's what that is. Okay. Oh. I used it Yeah. Would use again.

I'm just open props. Yeah. Yeah. Most write ins awarded to the item with the most Write in answers. Scott Talinsky. No. I'm gonna say

lightning CSS.

I know it's probably gonna be wrong. Joseph.

So it would be something that's not popular enough to make the survey, but people had talked about it. I'm gonna say lightning as well.

Rid. 3, 2, 1.

Panda. What's Panda? Did we talk about Panda?

No. We haven't.

I mean, with a name like Panda Oh, this is a good website. There's a lot of things named Panda. Yeah. Panda UI. You you Type safe styles. Okay.

This is a good website, and they got a cute little Panda logo, which your tool's name, Panda, it's gotta have a cute little Panda logo. Oh, no. I'm on a different website for Panda.

Pandadashcss.com.

Oh my gosh. If you do Panda UI, there's, like, 800 different libraries called Panda UI.

Oh, this is a cool website too. They also have a cute panel logo. I guess that,

goes again goes with what I'm saying. Yeah. So this is a way to write CSS kind of inline.

Type safe styles, just in time utility classes.

This seems very CSS and JS. Yeah. It is. It's CSS and JS.

Hey.

More power to you, panda panda people, but, I don't know if this tool is for me, but it looks cool. Yeah. It looks a little syntax is a little bit intense. Bit verbose. Bit verbose. Indeed. Alright. Hey.

Let's get to the part of the show where we talk about sick picks. Sick picks are things that we pick that are sick, things that we enjoy, like, or anything.

Rid. Westland, do you got a sick pick for us today? I'm going to sick pick

a a set of step drill bits.

So if you need to drill a hole in literally anything. Often what is the case is I was hanging up a closet bar the other day, and I wanted to it was kind of, like, wiggly, you know, like, it was in there, but, like, it didn't have, like, a perfect fit. And there's a little bit of wiggle in it. And when you put a put a hanger on it, it wiggled a little bit and they were metal things. So I just went down to my workshop And I grabbed a step bit and I drilled a tiny little hole, and then I kind of just put a screw in through that hole. It's kind of like a set screw, right? And I've been drilling holes in all of my workout equipment and my kids often.

This is one frustrating issue we have with my kids is that we have lots of trucks and we have lots of trailers, but the trucks and trailers don't all have the same rid hook up.

So I've been I've just been drilling holes in all of our all of our trucks so that all of the Different trailers work with all the different trucks. Like, they're all interchangeable, and you can also get, like, a little eye hooks for them as well. But, basically, rid If you need to drill a hole in something and you don't know necessarily what size it is, going through, like, a 1000000 drill bits is really refreshing. And if you're drilling through something really Nick, it's often easier to start small and progressively make it larger. So step drill bits, they look like a Christmas tree, and it will allow you to incrementally drill larger and larger holes through wood, metal, plastic, whatever it is. And They are so Dang handy.

It's like 5, $10 for a set of 3.

They have really expensive ones, rid.

But I'm I'm here drilling through, like, 11 gauge steel with a $5 set from AliExpress.

You can get the cheap ones. They are fantastic.

I love how cheap some stuff like that is. Right? Yeah. I'm always surprised that little, like, Bits and bobs in in the tool space, how how cheap they can be. Yeah. Like, you can certainly

there's a reason why some of them are $100, and you can buy a set of 3 for $8.

And if you're cutting through tile or you're, like, you're drilling more than 3 holes a year, yeah, maybe you wanna get rid a more expensive set that has a cobalt or a diamond tip edge.

But for most of us homeowners out here, just get yourself a cheap set of Home Depot, Amazon, AliExpress ones, they're all the same. They fit right into your they chuck right into your impact.

Just good to go. I highly recommend you get a set. Nice.

I'm going to sick pick a A YouTube this channel has I don't know how many videos they have. It looks like they don't have that many, and maybe they do.

I'm gonna stick pick a specific video and maybe even a specific set of videos here. I'll I'll stick pick the whole playlist.

I have I've never been into boxing ever in my entire life. It's one of the sports I have a huge blind spot on. I just don't even think about boxing that much. But I'm a history guy. I like watching history stuff. I like watching documentaries on YouTube, and I like long videos that I can watch to fall asleep too.

And so this really fits into that alley. I I found these videos, most of which are over 3 hours long, And they are the timeline of heavyweight boxing.

And so the one I'm I'm I'm almost all the way through It's the 19 7 I'm almost all the way through this one, which, shows you how good it is. I'm sick picking. I haven't even finished it, you know, nearly 4 hours, but it's rid The timeline of the 19 seventies heavyweight boxing division. And I find this to be so fascinating because it covers a lot of really famous names, People that you've heard of, people that you you know things about, like, you know, obviously, Muhammad Ali and, Sonny Liston and these, like, big names in sports. But it it, like, covers a timeline through the set of the most important fights of every single year kind of month by month Starting at 1970, going all the way to 1979.

And, like, you really get a handle on both Social cultural things that are going on around the time, the the story lines, these huge names, and and, like, what what exactly the the context for all of this stuff is, and you feel the the gravity of what these big fights mean and their outcomes. And, they don't spend, like, an outrageous amount of time on each Each fight or anything like that, it's just like, here here's the background.

Here's why it happened. Here's why it's important. Here is the outcome. Let's go to the next one. And they show the original posters from the seventies and stuff.

If you if you that sounds interesting. If you if you're the type of person where that sounds interesting to you, You're gonna really like it because it it's super well done.

I've been going nuts on this thing, so check it out. Awesome. Alright. That's it for today. Thanks, everybody, for tuning in. We'll rid Catch you later. Peace.

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