 Hello, everybody, hopefully I'll keep an eye on chat. Let me know if audio is okay and that you can hear me and Steph. And I just wanna say thank you so much for coming to join us live. We're gonna drive in in a second and start looking at the state of CSS results that just just landed. And I've done this before. You might have seen me going through them in the past, but this time I thought it'd be more interesting to do it with someone else. So I'm bringing Stephanie here on with me. You wanna just, for anybody who doesn't know Steph, she's also just into all sorts of CSS love and sharing and education. So there's links to her site as well as modern CSS and small CSS in the description. Do you wanna just let people know a little bit about what you do before we dive in? Sure, yeah, hi everyone. Yeah, Kevin mentioned my main CSS related projects, but I'm a software engineer at Microsoft by day and a content creator of CSS when I'm not also being a mom. So that's kind of my short and sweet summary, I guess. But yeah, thanks for having me on to talk about this. Thank you for taking the time. I know you're busy, so I appreciate setting aside some time to do this. It will be a shorter stream for me. Usually I sort of hang on and answer questions and go through a bunch of stuff, but both of us have some things that are gonna be happening. We have stuff going on today, so we won't be hanging out too long today. Looks like the audio is good, but the Steph's mic is loud and I can be louder. I'll turn mine up a little bit, perfect. All right, so yeah, thank you for everyone for coming and joining and Alex is here. Thank you for coming and joining, Alex. Alex Trost and I see just a lot of the same names as usual. So thank you all for coming and hanging out. Let's go and jump into this. And I'm always excited to see this. I did get access to it early through Sasha, who was nice enough to give me the early results and we were gonna record this before they released, but then the results came out before we got around to it. So here it is. And yeah, we're gonna dive in and sort of go through it. For anyone who doesn't know what the state of CSS is, it's an annual survey that's been run for three years now, I think. That basically just sort of is a nice way to keep track of sort of the evolution of CSS, how people are using CSS, what features people wish CSS had, what features they're actually using and seeing the evolution of them there and other stuff. So it's a nice initiative. I should also probably link to the state of JS, which is running right now. So I'll just grab that really fast and put it in the chat. So state of JS survey is open now for anyone who wants to go and answer that. And the more people answering them, the more diverse the base of people answering them is, the better it is for the results. So, and the more meaningful the results are. So jump in really fast. If anybody wants a nice t-shirt, they do have a t-shirt for them. And yeah, well, if I zoom out a little bit here, there we go, that might be a bit easier. Let's look at. And so first is the salary and years of experience. And I haven't looked at these at all. So I might be a little bit sort of trying to grasp what we're looking at exactly. But here is a lot of people working for free that did it by the looks. All right, let me zoom out a little bit. I don't know if it's gonna make it easier to see. So, okay, so it's based on years of experience, least at the top, most at the bottom, and then salary least over here, the more we go off to the edge there. And I guess it's not really surprising the longer people have been working, the more money they're making. Yeah, I think this is also just to clarify. I think this is also the new feature this year that Data Explorer. So I think you can customize, basically allow you to pull like your own version of what your curious overlaps or kind of define your own parameters and what you're interested like in trends or whatnot. Which is cool, I'm glad they exposed that. Yeah, oh, yeah, that's actually really interesting. So yeah, in the link here, we can click in there and actually change the way the demo goal. We can change it by different stuff here. We won't go through everything. We have yearly salary and years of experience, but you could also do it by age, by gender, by race. And I do get questions sometimes when I share the survey of people asking, like why are they asking for my gender or my age or my race and things like that. And I think it's always just, it's nice to see what the diversity within our little world is. But now that we have this, it also can show if there's some imbalances in places, like if we do by gender and have the yearly salary, we might see that there's a discrepancy there potentially. Now, one issue always is also the amount of people that respond. But I think for, it's probably, the genders probably also gives a bit of a divide in terms of, I think that's just what the industry is at this point. But actually, it seems to track fairly, as you'd expect, the yearly salary. I might've maybe shouldn't have done yearly salary. But it looks, as we get to that 50 to 100 K range, it does seem to peak for both at that stage. Cool. So that's their data explorer. That's why we started there. That's really cool. So this is something I think we could be really fun to poke around in a little bit more and get a bit more information of that I don't wanna do now, because I feel like we'll be wasting our time trying to figure out the best way to plot things out on there. But that's a really nice little addition that they've definitely made there. That's really cool. So demographics, most people in the United States. And then it sort of just, I don't think there's anything too surprising. I think it does, one thing that's important and I think it's good that they share about the demographics here is that I don't think this is realistic to the share of people working in this industry. It's just the people that are responding to the survey. Right. Because based on my analytics, India has a lot more than 1.9%. So yeah, it's just important that like this is, it gives you a bit of context, I think, to the poll in general as well. Even though in- It's more like how effective was marketing of the survey. I mean, I think that's just a good general lens to view the survey with. Yeah, definitely. Is there more actually, let's go back to demographics really quickly. There's probably more of which there is. So language, most people in English, I guess follows a little bit with the countries people are in. I will say that's really good that most people seem to have completed most of it. That surprises me because it is, it's not the shortest survey in the world. So for anybody who's here, thank you for taking the time to actually go through it. Yep. Most people, and then there's, I think normal age, years of experience, and probably, I was company-sized, I'm surprised so many people didn't answer, but if you, I bet you the no answers probably divide similarly along these graphs. Higher education, this one is always interesting to me, seeing the unrelated field versus people that just don't have higher education. I think in years past, the unrelated field was actually quite a bit higher. I know I fall into that one where I have a degree that has nothing to do with any of this. Yeah. And just to point out too, there are a couple of different ways to view it this year too. Just if, I don't know if it's helpful for these, it's maybe more helpful when we get into other parts of the survey, but anyway, just different lenses, I guess. Yes, yeah. So if we look just really fast, or I guess, there's the different ways of viewing it, and then we also have by salary, we can see it. That's sort of, I like visualizing things like that a little bit actually. So here we're seeing the salary based with experience. You can see the people that are zero, basically are very little experience are really heavy on that side, whereas once you get into the people that are making 200,000 a year, they tend to be more than 20 years or 11 to 20 years like you'd expect. So it sort of gives you that, as you said, another way to explore it, where we have the tables as well. And just, I have to say for everybody who's involved in creating this, it's really well done. So I must have been a lot of work to get everything working. Oh, I'm sure. Yeah. So hopefully I didn't skew the results too much. Sasa did tell me that a lot of people found out the result of the survey through me. So I'm glad that I was able to get people here to take it. But yeah, that is a fair bit of people that found the survey through me. Is there anything else here that? I do think, again, well, gender, I think it does sort of speak to just the industry at large. Whereas the race and ethnicity, I think at least part of that is coming down to the fact that it was mostly the US and Germany and the UK, sort of all the Western countries that were answering it, highly in the results. So I think you just have to take that into account with the race and ethnicity that does come in there. Though even if you do look at that, it is one of those things where I do talk, I've mentioned it previously, where it'd be nice to see a little bit more diversity within whether it's men and women or whether it's through different races and stuff and people are like, oh, it just is what it is. And I don't see why it's a big deal. The more diversity we can have in anything, I think it's always a positive and it leads to more ideas and more thoughts and more differing viewpoints on everything that's going on. And so saying it is what it is, it's true. But I think in preferring to see some movement or some added diversity isn't necessarily a bad thing. Well, yeah, especially when, I think important thing to keep in mind for this survey is that the browser makers are actually considering this data in terms of helping inform what are their priorities going to be? So from that perspective, then I think that helps drive home that the diversity of respondents is hugely important because obviously the web is global by its very nature. So yeah, it's definitely a continuing area of improvement. Yeah. Disability status, I think they do, there's always, pretty sure there was a big part on accessibility within this one as well, but just a little bit on visual impairments, cognitive impairments and all of that. And I think it's important to be aware within, I'm curious actually, I mean, this is one of those ones where it'd be interesting if you could get more data on different sort of use cases or it's hard with a survey like this one, but just, I think it's important to remember, like sometimes you get some pushback when it comes to like including things that make things more accessible because it's a lot more work. And I'm like, well, you know, it's a larger user base than you might think it is. And not even, you shouldn't be thinking of it that way, but it's easy to make things. And I put up a video recently where I was looking at a mistake that I made because I made something that was pretty much as inaccessible as possible, way back in 2017 and pulled the video down and looked at how we could do it in a much better way now, just to make sure that, you know, anybody can use it. And so, this is one of my favorite things I think they added last year on this little sort of ball graphing. I don't know what type, how you call these graphs. So it's the feature overview. So it's, it shows, they've sort of grouped things. The outer circle, if I remember correctly, is how many people know about it. And then the inner circle is how many people have actually used it, which I think makes sense in terms of, you know, there's some things that we know about, but we don't actually use them because maybe browser support's not there yet or for other reasons, like app container makes sense. There's been, you know, a lot of people know about it because there's been so much news and excitement over it, but because browser support is just getting there, I get why not a lot of people have really taken the dive into it yet. I'm just looking if there's anything on here that surprises me. You could click those tabs at the bottom. Maybe that breaks it out a little bit. That animation's really nice. I thought like the one that really stood out to me, and I know you've, I just so happen to know you've been looking into it, is image. I feel like, so I appreciate it on this year's survey that they did a nice job of including a little blurb to attempt to give you context to try to make sure you understood that they're asking this one. I think folks got confused what was being asked because it's not even in browsers. So a 50% having used it. Probably not. Yeah. So yeah, just so I don't know. That's hard to weigh for some of them, but like the other one surprised me was subgrid having such low awareness, which is more than likely accurate for the respondents. Yeah. Yeah. What's this media query? Oh, range context. Okay. So that makes sense. So yeah, actually this came up to a current color. It was on one discord server. I forget somebody had asked about, isn't current color common knowledge? And it's sort of like, it's, you know, this old school value that just seems to be that a lot of people know about it, but there's always people who have never really seen it or maybe don't see the value in it. And I guess with the rise of custom properties, maybe it's taken a bit more of a backseat, but it still can be really useful. Yeah. I mean, SVG icons is definitely the time I pull it out the most, but. Yes, yeah, definitely. Some of these at the bottom don't surprise me too much. I think fontpal had just got added to Chrome. But, you know, it's, you know, at property too. I guess yeah, a lot of people knowing about it, but not having used it yet. And I guess it is important to know, I don't know if the table would emphasize it more, but like, even if you're, as you're hovering over it, it seems like also those ratios, I just realized this when you hovered over the image one, is like a lot of people skipped it as well, which kind of throws the ratio. Right, yes. So. I don't even know if I can find it now. Image, no, it's image set, image. Yeah. Yeah. It's just not, if you compare about the numbers here to the numbers there, yeah. So, yeah, it's kind of interesting, but. I'm actually surprised cascade layers are that low, because I felt like they got a lot of hype when they first came out. I could see maybe this number being higher, even if this one is lower. Yeah. But again, I always feel too when I'm looking at this is like, for some of these things, I'm like, oh, everybody must know that. And then I'm like, oh, it turns out that I'm the only one because I nerd out on these things and most people don't. I know. I appreciate that context though, right? Like we get kind of really focused and hyped about the new stuff. And even though I know like you as well as I do, you know, try to also bring in the practical angle, but it's a good reality check to know like what is actual or at least stay slightly more actual awareness of this thing. Yeah. And like you said, I think this time they did a nice job of sort of saying what something is, because I think a lot of people if they just saw CSS comparison functions, they might have no idea that they actually have used that before. Yeah, yeah. Whereas an even intrinsic sizing. Yeah. I wonder if that many people, well, I guess if there was more context within the question, since we don't have them on us right now. Yeah. Let's keep on going. Here's the knowledge scores. So this is just sort of a breakdown of how many people, I think it's a percent of respondents, you can't switch that. It doesn't change it though. So this is, if you knew about it, I think. Yeah. At the very end, basically how many did you know? Yeah. How many did you know? So I think it's 50 to 60 for most people. I think that's actually a pretty good breakdown considering this survey did put a lot of emphasis on upcoming things or very new things. As you can see with like things like font palette, color mix, the color functions, app property, image, even cascade layers, and image set, things like that, that I could see that aren't, well, image sets around now, but there was a lot of things talking about newer features. So I think if you fell into like that range there, there's nothing to be ashamed of. Right. Yeah, exactly. I do get this question. And since I have you on, I'll ask you, people always ask me how I find out about all the new things that are coming up. How do you find out about new stuff as it arrives onto the scene? Honestly, that's one of the reasons I'm like hanging on to the remnants of Twitter is, even in the past few weeks, despite the chaos, like I've still picked up most of my new knowledge there or like new awareness of things there. So, tentatively still Twitter. But newsletters too, do a pretty good job. I have to look at my inbox. I'm blanking on the one that especially seems to do really good. Like front end weekly is that one. I think it seems to be pretty good. Sasha's the sidebar newsletter is pretty good. But then I also like to remind folks that you can go out to GitHub and actually see the literal in progress issues. And I know that's a little bit less readable, but if there's something you have in mind and you're like, what is the status? You're not gonna find that on, can I use necessarily if it's in progress? You can go to the GitHub and search for some keywords and try to see and actually go ahead and comment on those. Sometimes, you know, your feedback can help move those things along. And then also the dev advocates for different browsers is also pretty easy way. If you're not into RSS or newsletters, if you can follow folks like Yuna and Adam Brahmas is also in J on that team recently for Chrome and then of course, Jen Simmons for Safari. Firefox, it feels not quite as visible. And I feel, I apologize. I'm sure I know somebody that's over there, but they all have issue trackers as well, which again, can be a little less friendly to explore. But also the interop project is definitely something I've been keeping an eye on the past couple of years, which basically says that all these browsers, the primary ones, Chromium, Firefox and Safari are working together on these initiatives. So at least you have an inkling of what is probably going to become more stable during the year, so. Yeah, awesome, good. I'm happy. I'm not the only one who relies a lot on Twitter. Yeah. And yeah, I definitely, I mean, basically everything there. And even with the GitHub issues, you know, you can just sort of follow along with some of the threads there to just know, like I've been with subgrid coming in Chrome every time I see an update come in there, I'm like, oh, it's getting closer or whatever it is. So you can sort of have a better idea. And another thing too is for like when browser updates, just they always put in really nice change logs that are super easy to read and tell you what their new features are. So you might find out something there that, and because it's in the feature release, you know that you can actually use it now potentially. Yeah. And those read a little more like a blog sometimes, especially Safari, what they tend to, or at least they do a blog version, which is really nice. So yeah. All right. So we'll keep on going through here. How do we position elements? So subgrid, what's, are we in sponsored charts? That's, if anyone, that's interesting. We'll see about that. But nesting deeper than that. So people on subgrid, oh, so we're breaking down basically what we were looking at before. So I might go really quickly through this, but stop a couple of them. I'm a very big proponent and I've been waiting long for subgrid. So having just mentioned following the issue there for Chromium, so it is interesting how sort of things develop on some of these. And interesting, I guess there's more people answering it. So there's less people who have actually used it. I'm hoping that next year's, this is very different. We have a lot of people who have used it because it's gonna be there. Oh, we can leave comments now too. That's cool. Oh, and there's comments on these. So writing modes, this kind of interesting that more people are getting into writing mode. So that's good to see. Logical properties, again, gaining, we'll go through. This always surprises me when I see FlexboxGaP not having more people using it. I guess it depends on what your browser support is since. Yeah, it's been over here now, folks. I know, there's still legacy reasons. Yeah, if you're worrying about older versions of iOS, I could see being something that's a hang-up still, but man, it made life so much easier. People already getting into container queries, which is awesome. Object ViewBoxes, that's when you phrase it. I don't remember what it is often. Object ViewBox, I'm wondering if that just has to do with like... Is it SVG, really? Oh, maybe. Or is it? Yeah, we don't even know, so there you go. You can see an upcoming video for you, Kevin. Yeah. Yeah. Huh? The real deal, yeah. Exactly. Yeah. All right. For anyone who doesn't know, I'm looking for it. I don't know where the support stands for this, because I think I know Firefox was the first, but I don't think they fully did it. But I'm looking forward to that, where it's just instead of doing a media query with minWidth or maxWidth, you can use the greater than and less than and equal and greater than and equal to, or whatever. I think it's in latest Chromium, and I know the polyfill was also updated. The container queries polyfill helps support range context. That's gonna be a nice one. And I think they're coming odd, like they're just included with subgrid, and not subgrid container queries, I think when I was playing with it. So yeah, I might skip some of these because we're gonna run out of time if we don't. I'm gonna jump to colors just really fast, even though we saw that. I think, oh, there's probably not too much, but we saw some of this already. But color functions, accent color, that's a lot of people that don't know about accent color. I think that really flew under the radar. So just a side note, because current color is the next thing, I'm kind of, I keep meaning to go over to the issues and see if they're gonna do an accent color keyword, because I think that would be a nice addition, so I don't have that if I don't have it already. And yeah, for anyone who doesn't know what accent color is, since a lot of people don't, it's basically a super easy way to style things, like your radio buttons, your checkboxes, range sliders. It's not, you don't get like full styling over them, but you can change the color of the checkbox or the radio button. And it's nice because it just sets the accent color and it is set like the actual check or the dot to either white or black, depending on what is higher contrast automatically, so you don't get that control. I know some people are fed up and really don't like the limited amount of form styling we have, but at least that's something. Yeah. It's all the category. Yeah. A lot of this, I can not surprise that they're very low, just because these are a lot of those new things that are on the way that don't have full browser support yet. And I'm wondering with things like white gamut colors and color mix I could see becoming pretty popular once people know how that works and relative colors, but like wide gamut colors, I'm wondering if like how big the usage of it's ever going to get. Yeah. Yeah. Creating color spaces too. I can see people using it, but not really understanding it. You just sort of try out the different ones and take the one that looks the best. I think a lot of the color stuff is exciting, but yeah, frameworks seems to be like we rely on frameworks for a lot of color management and probably not think twice about it generally. So folks that are doing design systems or other like really care about it from a branding angle is probably as mostly confusing. Yeah. I'm gonna jump just to accessibility really fast to take a look. Preferred reduced motion. I'm glad that it looks like it's trending in the right way. This is something that a lot of these are like really, you know, prefers color scheme prefers reduced motion. I'm actually really surprised that that's this low still just because it's an easy way to do dark and light modes. And reduces prefers reduce motion. I seem to be seeing that in a lot of just default resets these days. So I'm surprised that there's more people who haven't sort of come across it at one point or another just in passing. Preferred reduced data doesn't surprise me, but that's another nice one. The nice thing with all of these is just like they're not that hard to do and to set up and to use, especially with like prefers color scheme and using custom properties to redefine stuff is really nice. Though I will say, and I'm not the best at always taking my own advice, but if you do use this to set a color scheme for your site, you should probably also have a toggle because somebody might have their settings one way but want to toggle. I think Steph, you mentioned to me that you actually are one of those people who likes light mode for stuff. Yes, it depends. Yes, I used to have an astigmatism. So that's like a category of folks that get halos around it and dark theme sometimes. So yeah, yeah, being able to switch it for long form content. Yeah, exactly. Yeah, so just because someone has their browser settings or their OS settings one way doesn't mean that's what they want to get stuck with, but having that as the default doesn't make sense if you have created both options obviously. I see color contrast here. That's one of the ones I'm really looking forward to. So for people who don't know, it's gonna let you set, like here's the color I want to use and here's, I haven't used it yet. So I don't know, are you doing? I'm hoping you know Steph. Is it you're setting the foreground color and giving it potential background colors or is it the other way around? I don't remember. What I do know is that it has kind of stalled out. Unfortunately, there's been debate about because of there's debate in the accessibility world about the algorithm behind this. And even though we're probably a few years out for the algorithm changing, I don't agree with this decision, but it stalled out the color contrast function moving along. So I haven't looked into it too much, but I would love to have it be native. And yes. Yeah, I'm really looking forward to when that actually comes along, even if we have to wait a little while for it. It'd be a nice one to have. Focus visible. Well, it doesn't surprise me that more people don't know about it, but it's sort of like, isn't that the default now in most browsers? Is it all of them? Yes, it did become the default pretty quickly after it landed, which was interesting to me. I didn't realize that was going to be a side effect. Yeah. And it's basically, I'm sure people have seen it when you say tab onto a button, you want to have a focus ring on it. But if you click on the button, you don't necessarily want to show that the button selected because it's done something else. So you don't want it to always gain focus by clicking on it. So focus visible lets you show focus if it's been keyboard navigated to or reached. Is it only keyboard navigation that would activate it? Practically speaking, yeah. Generally speaking. Yeah. So yeah, it's sort of the one that you'd want most of the time anyway, probably. So that's, yeah, I guess why the browser's very quickly switched over. I'm going to look really fast at selectors. Another one that I'm really surprised just because I use it all the time now for quick things. So marker just lets you change like your bullet points really easily. Or if you have a numbered list, just changing like the one, two, three, if you want to style it differently. Yeah, I'm surprised there's not a bit more on that just because that's one of those ones that I've used. So I'm like, oh, everybody must know it. Oh, and Josh recommended your site. There you go. I've seen that yet. I've seen that yet. Thanks, Josh. Haz doesn't surprise me that it got so much love just because I think, or people know about it just because it was getting like all the news. It was pretty, that and container queries, I think have dominated the CSS talk this year. Yes. I was surprised when I did the survey that they mentioned where but they didn't mention is or like combine them together. I agree. I think it was probably, I think it was accidentally missed last year to probably include in so. Because I wouldn't be surprised if some people know one and not the other one just because they're not deep enough into it to realize how similar they are. And I was surprised with how quickly I saw where being adopted within resets and stuff just to be like it just exploded and everyone's like, oh, that makes sense. Let's make zero specificity selectors and make my reset using that. I'm like fair, that's. Yeah. Yeah, just a side note. I'll be curious how that evolves as a best practice, especially with layers being stable. I can't decide which is better. I haven't used and there better is probably not fair to say it's gonna have different reasons for the reset category of styles. But yeah, so fun one to watch in coming years. I'm wondering my gut instinct with layers is it won't become as widely adopted just because it's like this added sort of thing that people have to worry about. I mean, in a way it should ideally be set up so you're reducing your maintenance, not increasing it. But I could see, but it's nice that you can just do your layer for a reset and then have your own stuff coming after and not work as the simplest way of doing it too. But I guess it's also if you're creating a reset that you're sort of sharing publicly that people would be using, you don't know how if they're gonna create a layer for it or if they're just gonna do whatever, so. Sure, true. One I'm curious always about, even though I don't really use them is CSS frameworks. So we'll look at this and then sorry for the chat, by the way, that I haven't been paying any attention to it. So I appreciate everybody being here, but if I get sidetracked by the chat, then we're not gonna get through any of this as, all right, so it's retention, interest usage and awareness ratio over time. So I'm guessing that's tailwind at the top. So this is retention. I wanna go to awareness first because usually bootstraps at the top, which it is because everybody knows about bootstrap. But you can clearly see the ascension of tailwind here going back in 2019, it was at 34% awareness. So that's not even people having used it, it's just people having heard about it. And then it sort of exploded over the next two years. And I guess now is sort of, once you get into the fringes there, it makes sense. But it'll probably be matching bootstrap in terms of awareness by next year, I would guess. Yeah. Usage, it's quite a lot lower, which I'm always a little bit surprised by. Bootstrap looks like it's finally trending downwards very slowly. But yeah, tailwinds definitely sort of, they'll cross paths maybe at one point, but it doesn't look like it's exploding and taking over everything, which sometimes when I'm on Twitter, I feel like that's the situation, is that just I'm the only one not using it anymore? My two theories for that is legacy projects. Bootstrap's been around over a decade, I think pretty sure. And side by side with that theory is the implementation and WordPress themes, which is over 30% of the internet. So if you're working on either of those things, which most developers are by volume, yeah, I can see where that trend makes sense, compared to like you said, the chatter that you may see around it. Yeah, interest actually, interestingly enough, even though more people know about it, interest is sort of, I guess maybe it's found its market and the people who love it love it and the people who don't don't, which makes sense, because I think it's the first framework that I've seen such strong opinions about on either side. Bootstrap, people just always seemed a bit ambivalent about and just used it because it was there and it sort of worked. Whereas I feel like with Tailwind, people are behind it or they're not like sort of more against it. So it's kind of interesting there, yeah. It's almost like, and I think we also, it kind of corresponds with the evolution of CSS. So Bootstrap was helping solve problems that just gave you a leg up. Tailwind, you're ultimately just writing styles and you can get benefits of design. There are benefits, they're just different categories of benefits, I think. Yeah, I agree, yeah. Interesting that foundation has really been dying off. You don't hear much about foundation at all anymore. It was sort of like, for anyone doesn't know, like when Bootstrap was really big, it was sort of in that same thing where it was, we had to do float based layouts and it was hard. They were solving those problems. And I think foundation actually went into like setting up potential grid solutions when grid launched as well. But I think grid's a hard one to build into a framework, I think. And let's just keep going. So it's sort of different ways of visualizing. Oh, this I like to actually, you've never heard of, you're interested in, not interested, interested would not use and would use again. So would not use means you've used it and you're like, no thanks, I'm not gonna touch it again. So we can sort of see that with tailwind. There's a lot of people that are, the not interested group is growing about as fast as the people who are actually using it. And then the interested group is staying about the same and then would not use again, not too big. So yeah, it seems to be most people who don't want to use it just don't like the idea of authoring their CSS that way and aren't even trying it out, which, yeah. I at least gave it a try before I sort of said, not really my thing. Do you have any opinions on tailwind? No. It's just not for me, that's my short and sweet answer. It's exactly what I said. I get why other people like it, but it's not for me. So yeah, other ways of visualizing, getting the same ideas. Other tools, open props, getting a lot of love, which is pretty cool to see. That's awesome, it's that high up, I'm really surprised. And I guess, so that's an interesting mix, I guess, because it's write-in answers at this point, because then you get UJS, which doesn't really fit with what we're talking about. So yeah, Cube CSS, getting some love, which again, maybe that would fit into some other part here. But nice seeing, have you ever heard of UNO CSS? I'm sure it, you know, crossed it. This is one that I'm always interested in because it seems, it's a little bit like your JS frameworks in general. There's like an explosion of them and different people. So like here, it's just like, there's so many dots on here now that it's so many different sort of ideas and everything seem to be popping up within this world on how we can write CSS and JS for those who do like writing CSS and JS. I'm curious more about usage than anything else. And it seems, yeah, there's just like a ton of them down here that exists, that not too many people are using. And then I guess it makes sense to style components has been around and the big one for a long time and everyone, it just sort of has its niche and it's living there, I don't know if you have any opinions about any of them. And I just used JSs very briefly several years ago. I'm actually, okay, nevermind. I was gonna say I'm surprised CSS modules isn't higher but it's the second one, so it makes sense. Yeah, I won't go too far into those. Oh, these are, I didn't, maybe they had that for frameworks. I might jump back to that. Most people are neutral on, so that's why there's more all the time because someone's like, oh, I can do it better than what's currently there because they're not happy with the current solutions and then there's another one. I am wondering if with the rise of things like with Astro as an example where you can just sort of have your style tag without a component and it's scoped to that that you don't really need any other, it solves some of the problems that I think a lot of people are going to these other solutions for if that's sort of what you're after and eventually we'll have scope in CSS maybe. You might know more about any progress on that than I do. Yeah, I mean, I think, I don't think it's, I think there's some lingering issues but I mean, I think it's still making progress. Other tools, it's SAS, Post-CSS, LAS and Stylus which doesn't, that looks about right. Yeah. Can we get, that's for people, so people using other tools, I guess that's just other SAS. That's interesting that SAS was the top here and had the right in as the top answer to. Do we get the chart on this or no? I mean, I was curious about like the same idea as the last one of like what do people like using and even over time because I know they've asked this question previously. But yeah, it doesn't surprise me, it looks about right. People still ask me if SAS is relevant today and I think it is and as amazing as modern CSS is getting and it sort of, we don't have to rely on some of the old solutions that we used to have to rely on. You know, it's come a long way. There's still use cases for SAS, just maybe a little bit different and maybe you don't need it for your little simple landing page. You just, you know, as things scale up, I think there's still benefits to things like that and Post-CSS. Yeah. You still use SAS? I do. I'll probably hang on to it until, honestly, I'll hang on to it unless they do CSS gets something better than imports, I guess. Right, yeah. Yeah. This does, yeah, prettier auto prefixer style lint. I can see style lint, again, it would be curious. I don't know if they included that previously but I'm curious if it would be getting more love as time goes on. I've never done any content on that and I probably should. You are on the count tab. I don't know if the other ones, I can't remember. I think it stuck you on the count tab at the ones below the chart. Oh, down here. I guess it doesn't change the field. Same idea, yeah. Just raw numbers versus percentages, yeah. Yeah, useful if you're not using prettier and style lint, I'd suggest it. Auto prefixer just comes baked into so many things or like with Post-CSS now, I think, right? Or with other tools, like, or with a preset ENV anyway, which I use, so. But yeah, things that just make life a little bit easier, browsers. So this, I like that they break down for initial development and I think they also ask what browser use, oh, do they not? Is it just initial? I thought they also asked what browsers people used for other stuff but maybe it's only initial development. And I guess it's sort of as you'd expect. Well, initial development, I'm not sure. I guess if you're doing iOS stuff, it makes sense to be focused on that for mobile stuff. But Chrome, Firefox, Safari. I'm actually surprised Safari's not a little bit higher but I guess their DevTools weren't the best for a while. I still like Firefox's CSS DevTools a lot. Chrome actually recently added that feature that Firefox has had forever where it tells you that it's a valid property and that's good but it's not doing anything because it's not a flex container or whatever it was. That was like one of my favorite things for beginners that were learning CSS. It's like, no use Firefox because if something's not working and it not only say, there's no typos, everything's fine but there's a reason it's not working. So I'm glad to see that's been brought over to Chrome. Yes. What browser do you use? I'm usually using Edge these days. So Chrome. Yeah, I sort of go back and forth between Chrome and Firefox and what I'm doing stuff but it's annoying when you every now and then we come across that edge case that it doesn't work in Firefox or whatever it is and you're just like, oh, I wish I'd double check that one earlier. I had just an issue. I was doing an update on my 12 days of web series that's coming up and I realized that I need to file a bug, probably an issue with aspect ratio with grid and sizing in Safari. And so I fixed it but I forgot to check the second place that I had that style and just realized right before this stream that it was very bad, very bad. Like exploding and taking over the page. Oh no, yeah. So, you know. I'm always like, when we're looking at like some of the features of some stuff and you're like, oh, I can't the browser's just like, you know, get this stuff out there. And you're like, when it gets to like the complexity of how the browser, like the engine must be working for like something like grid or flexbox where there's like, then it's like based on the aspect ratio of an image which is gonna be different than how it's working with text and like all like the layers of complication and complexity that go into these things for the browser engines to figure out. It's amazing that anything works really. How do you choose a new library? Oh yeah, this is like, I remember this got a bit of controversy on their previous one when they did it on, I guess, just some of the choices people had to make that they didn't like. But what people base when they're choosing things was like a head to head. So you had to choose like this one or that one. Which one would you pick? So it's ones that one, one, round, two rounds or three rounds. And most people go off documentation, developer experience and user experience all by accessibility, user-based size, community creator and team and hype and momentum. This is one of those things I think definitely hype and momentum, you probably don't want to admit it. The problem is it's a little bit like that thing where you're on Twitter and you feel like every single other person has ever like has used it. But in reality, it's just like these eight people who are talking about it a lot or whatever it is. So you get a little bit of FOMO but definitely, these are definitely the ones we want to admit for the reasons that we use something. I know why. CSS usage, testing environments. So what form factors do you test on? This is one of those ones where, it's funny that nothing's like passed 72% actually. We don't test, we just assume that it works. I guess it would be nice. I think now that I'm really trying to dive a lot more into accessibility and bring a lot more accessibility into my like just the regular content that I'm creating, I do think that being able to test, there is like, it's funny, but like the tools to be able to test accessibility are hard to get into a little bit. And I think there's a lot of friction at that point for people that like they would really like to do it. But you know, whether it's time constraints at work or just it's such like another thing to learn and actually be good at and understand what you're looking at to make educated sort of choices on that, that it doesn't surprise me that testing using these tools is as low as they're saying, even though Lighthouse is listed there. You know, they're sort of including a few because they have acts in Lighthouse there. So it's not just accessibility necessarily, but yeah, I do think that your screen reader being only at 10% doesn't surprise me because not only do you have to be able to get one running, but know how to use it properly. Yeah. Yeah. Do you do a lot of accessibility testing or what steps I guess are tools do you use for it? Yeah, I mean, I do, but just because I mean, that's been an emphasis for me for a while. So to your point, if you don't know how to do it, it's quite tricky. So the tools they listed acts wave and accessibility insights, those three are browser extensions. And then if you are using edge in their dev tools, they use WebHint, which is also available as a VS Code plugin that's owned by Microsoft. But so those are some quick, quick heading tools that you can use that help highlight errors for you for four things that are detectable by tooling. So, yeah, at least gives you a fundamental baseline of kind of the really high hitting categories of things. So. Yeah, I think there's a lot of low hanging fruit that can be handled at the very minimum, just by doing a few like quick passes a lot of the time. And actually, I just saw somebody mention how they can they learn accessibility. Sarah did just put out a course, right? So I'll throw that in there. I'm actually looking forward very much to it, but I think it's pre-order is available. Yeah. Yeah, so that's one way that you could learn it. So that's kind of, oh yeah, and just I put links to all these in the description, but this is all of step stuff. If you're curious to know more of what steps up to, but yeah, the right place for there. And she has selected one of those exciting ones. CSS versus JavaScript balance is an interesting one for me and we're gonna finish really soon because me and Steph have a few, we have to get going, but how do you divide your time between writing CSS, including HTML market, markup and JavaScript? Most people that answered are very heavy. I guess that's a 75% time writing JavaScript would be about there, which makes sense. Can we get the table? There we go. That might be a bit easier. Yeah, so most people sort of, maybe it's not. Most people seem to be sort of in that range and then it sort of tails off differently. A lot of people didn't answer, which is a bit of a shame, I guess, 70% completion, 72%. But I think most people fall into the 50% more writing JavaScript in the real world job market the way it is these days, it's just what it is. And a very few people, I do get a lot of questions from people asking, learning HTML and CSS, I love it a lot. I'm having so much trouble with JavaScript. Can I get a job just knowing HTML and CSS? And it'd be really hard if that's the boat you're in. I don't know. I haven't had to be actively looking for a job in a long time, luckily. So I don't want to say 100% and I don't keep my ear on exactly what's going on, but I'd be very surprised if there's a lot of jobs that, and I think most jobs that do focus primarily on CSS aren't junior roles. They're more like, if you get into the design systems and higher level stuff and you're more of a senior person, then maybe that could be something that you fall into more, but do you have any insights on that stuff? I don't know. Yeah, design engineering seems to be a growing position. Not that it's huge, but I at least see it or hear about it. And then I always bring up, because of my background, advertising and marketing agencies. Yes, they want to be interactive stuff, but they're also going to need folks to just produce as well. So. Cool. Next thing, are there any CSS, existing you were having difficulties using or avoid because of lack of browser support? And I think this is just, that's depressing. I know, I know. Five years folks would be, yes, I have almost six years of support cross browser. I even saw Westboss put out, I think it was a tweet or a TikTok or something lately that had, it was looking at like using Flexbox to like line up some logos, used aspect ratio, I think to, no, it wasn't even aspect ratio. I don't remember what he did, but he just got like all the logos the same size, set them up, put a gap probably between them and then used a blend mode, I think, because some of them had like a different, like a gray backgrounds, have a white background. It wasn't even a Flexbox gap. I don't remember what he did, like everything was like pretty much completely supported for like it's probably 97% because I use not supported. And the first reply was like, I can't use this because of browser support. And I'm just like, I'm glad I'm not the only one who gets those comments. Yep. But the fact that Flexbox also made that list is. Does it be something to use that data explorer on? For sure. Like what is your awareness versus what you, because this is also subject, like this is what do they think? Doesn't mean that to your point, like most of this is better supported than probably is reflected here. So that's pretty fascinating. Just again, that comes back to like, well, what is the actual awareness of these evolutions? So. Yeah. And I think people, I get this point, if internet, well, again, there are people that definitely live in a world where internet explorer has to be supported. I get that. I don't want to dismiss those people. There's one in the chat now that I know. So he's going to be mad if I don't mention it, but in certain markets, in certain depending on what you're doing, you might have to support it, but definitely like if your boss is telling you, you need to support it, maybe see if you can find your site analytics and see if it's actually true, because like with all the big brands all saying we're not going to bother anymore, there can't, as a general audience, you're probably not having to stress too much about it because they wouldn't be leaving money on the table if it was there. Yeah, it's sort of the way I see it. And we're going to end this in two seconds, but I just want to say a few of these, I saw people mentioning with CSS nesting being pretty high up. So yeah, the things that people are, the things that are on the way, I think CSS nesting, parent selectors there, guys, it has, because this is all together and it has more than just the parent selector, but people also included it there and variables. See, there's a little bit of lack of awareness, I guess. Yes, yeah. There we go, I guess we all have our list of things to hit on for next year. Yes, yeah. But I'm definitely looking forward to CSS nesting becoming a thing. Yeah, and pain points really fast, same thing, Safari being up there, it's kind of funny. Oops, I didn't need to click on that. I do think it's getting a lot better. It sort of had that reputation of, it's replaced Intranet Explorer, but now it seems like they've expanded their team, Jen's there doing a lot of good stuff and I don't think it's only her, but she's sort of the face of it a little bit and it seems to be like they're pushing things. I guess the one thing that's annoying with them is sometimes they sort of go in their own direction a little bit with certain things when, because there's a few things they've supported for a long time that we don't see elsewhere, whereas the other browsers, but it seems there's, I was worried about a lot of fragmentation with a lot of the new stuff that's coming to CSS and it seems to be that, not so much something to worry about, which is good. Yeah. Awesome. So yeah, we went a little bit quickly through that. There's definitely more to go in. I'd encourage anybody to actually go and check it out. The link to this is in the description. Also go and check out stuff, stuff in general. She has lots of amazing things. She also streams on Twitch, so on her actual homepage, I think there's links to all our social stuff, including Twitch, yes. And yeah, just lots of really good learning resources with modern CSS, small CSS, which is just really cool snippets and other stuff like that. And yeah, thank you for coming and joining me, Steph. Yeah, thanks for inviting me. And we'll end it there. Thank you everybody for coming and joining. We've had a lot of people here for this whole thing, so I appreciate it. Not much interaction with the chat this time, but next, probably sometime in January, I'll try and get another actual livestream going and be back on Twitch then, but until then, have a good holiday season, everyone, and we'll see you in the new year. Bye. And there we go, it's done.