The state of CSS 2021 results are in!

the state of css is an annual survey that's been going on for a few years now that looks at the knowledge of and usage of different css features as well as the use of and satisfaction of technologies like post css sas less css in js solutions and much more than that the results for the survey have just landed and i'm really excited to jump in and explore them so let's go and check out and see what what this current state of css is all right so here we are on the page and i'll put the link to it just down below and what i'm going to do is actually a refresh here because check out this little loading animation when we get here it's just super sweet i just like that a lot and before we dive into it i just do want to say that you can actually get a lot more of their information as well through their api or you can download the data directly so if you want to analyze this in any other way they've opened all of that up including like if i jump through and we jump into this first one there's different breakdowns where you can see like the breakdowns by a chart but when you go to that chart breakdown you can also get the json data or the a graphql query so if you want to play with these numbers in any way they've made that available which is really really cool of them and i just i had to go back because i wanted to see that animation again uh but yeah we're gonna be jumping into the survey just i'll be going through the results but also giving you my feelings on any of the results things that stand out to me things that i find interesting things that maybe disappoint me a little bit let's jump in and see what the current state of css is so let's go to the next one which is the t-shirt which i'm wearing last year's t-shirt so we'll probably be getting this year's t-shirt too because it looks pretty great um let's start off here though with the demographics and i might skip through a few things here quickly i might go through some of them a little bit slower and explore them in a bit more detail the ones i'm really interested in are the features technologies environments things like this but there's also some accessibility questions and other stuff that came up this year so i think we'll go through pretty quickly on the demographics but let's see what we have here so it looks like most people were in the states which i guess is no surprise only 70 percent of people answered that one but most people in the states quite a lot in russia i do think it is important to know who's answering it because this can influence the results the general results that we're getting as well because there might be some countries in here that didn't have a lot of respondents but it doesn't mean that there's not a lot of them that are actually actively using css most people were speaking english or we have the age breakdown most and then we get the years of experience here that goes up over time and look at that so we have some breakdowns now actually and this is kind of interesting so i'm going to do by salary and see what we have there um and as you'd sort of expect the salary goes up with the the longer you've been working in the industry the more money you make which is not surprising that's generally how it works everywhere and yeah so basically anyone who is making over 200 000 a year um was either a few people two to five years experience congratulations to you guys uh but most of them were with quite a lot of experience as you might expect there and so let's keep going here this company size this surprises me a little bit it's a nice pretty even breakdown with most people working at companies of 100 to 1 000 people and i guess quite a handful of freelancers going on there at the other end of the spectrum and a lot of people at really big companies as well who took the time to answer this if you keep going higher education degree all respondents and by gender ooh by gender i'm curious what the difference will be there actually um but one thing i find here is i actually fit into this one yes in an unrelated field but if you look at like the overall breakdown and again this is of total but we're only adding up to 75 so let's go percent of question respondents just so we actually get to 100 and it's basically half the people have a higher education degree in computer science or something friend nd related i guess since it's a css survey and then the other 50 either don't have a degree or they have one in something that is not related um so it just goes to show that the self-taught versus go to for the higher education it's a pretty even split in the end that's kind of interesting but here by gender i'm very curious by and so really interesting that women in general actually have more and actually this doesn't really surprise me as that much i guess where a lot of them didn't study necessarily say computer science but then for whatever reason ended up going into that so there's quite a lot more in that unrelated field kind of interesting though and again the response you know we do have a lot more men than women answering it so that might skew things slightly as well but i don't think so so yearly salary but in u.s dollars and 50 to 100k is the one but here we do get some breakdowns by degree by experience but by country is i think an important one to look at because obviously salary and living expenses and cost of living are also really highly linked so as you'd sort of guess we have the silicon valley uh crowd pushing the salaries way up where a lot of people in the states are in that 100 to 200k group and i wouldn't be you know you're dealing with the large tech company so that does make sense and the cost of living if you're in san francisco even though you're making that much so much of it might be going to living now we're talking a lot more about remote work and other things as well uh which obviously if you're remote work somewhere where cost of living is low and you're making that salary that's amazing um but i do think it's an important thing that you have to look at is not just the the raw number but you know how much does it cost to live there and by degree by degree related field i'm just curious here how it compares it looks like people actually this is kind of interesting people that don't have any degree at all looks like it's slightly lower on the pay scale especially here in the z i work for free um so i guess you're just learning and that's students so that of course they answered no there uh which makes sense but just the the overall salary does seem to be skew a little bit higher for people that are in that have a degree whether that degree is in a related field or not so that is kind of interesting there and by experience i think we sort of saw something that looked a little bit like that before and yeah under one year a lot of i work for freeze because they're they're still working they're still learning i should say uh source i think this is how they found that so we'll skip through that one gender mostly men as we saw already not too surprising that it's mostly men uh race and ethnicity yeah that makes sense uh by experience actually i'm kind of curious here because here we you know it's it is what it is uh you know we're at white males basically is the industry sadly but it looks like um we might be getting slightly more diverse so um but let's go and look at the by experience because i am just curious and it looks like 20 years experience is basically mostly white men and then it does look like over time we're actually trending toward a more diverse group and hopefully that holds true as this keeps going so like slowly as the people here start getting more experience they're not leaving the industry but instead they're just falling into these more experienced ones um but yeah yeah i i see this as a hopeful hopeful that we're we're getting into a more diverse um yeah i see this as hopefully things are becoming more diverse um as time goes on that would be let's let's cross our fingers and hope that's what this is indicating um and disability status we do have some most people percent of respondents um just because it's really skewed most people it looks like not many people actually answered that one so it looks like 30 completion so not listed i don't know if it means some people might have chosen that even if they just meant they don't have a disability um whereas so i like i don't know if 30 of people were saying i have one or if there was some misunderstanding with but even if you do take that into account you know say you dropped this by ten percent less people or whatever and you only had twenty percent of respondents that were listing a disability that's still quite a lot of people replying that they had um disabilities oh there we go adhd autism oh so they list it so if they chose not listed then they were listing it out here um though only 41 people did that but um yeah even if we drop these numbers down quite a bit to even if it's a thousand people out of the total amount that answered the survey it just shows why accessibility and taking accessibility into account is so important because it can still be easily 10 20 30 of the people that are going to be visiting your sites might have some form of disability or not so taking into account all that is interesting and there are questions related to accessibility this year which were new so i'm looking forward to that but now we're into the demographics not the demographics the features and we're going to start i guess let's see we have layout shapes and graphics interactions typography accessibility and other features so the way this works is the size ah grouped let's do by awareness and then by usage okay i like these animations that's fine um so basically the size of the dark circle is how many people are using it and the size of the transparent circle is how many people are aware of it but haven't actually used it so for all these people who say they know grid because they're you can see there's actually more people saying it's probably tied right know about 877 876 and okay whoever that one person is that knows about grid and not flexbox i'm guessing you made a mistake when you filled out the survey but for anyone who is in this group where you've heard about grid but you haven't used grid yet get on that grid train come on it's we're almost 20 22 now it's time to get into it um but by awareness so see aspect ratio so even here like let's this is actually really interesting because i'm looking at like a few of these lower down ones actually have pretty high usage whereas like css the container at container which makes sense um isn't a lot of people actually know about it but the usage is super small basically because we can't really use it yet um so but a lot of people are aware so once container queries happen um it means like our subgrid here a lot of people have heard about subgrid but they haven't used it yet so once these things start becoming available to us i have a feeling they're just going to explode and be everywhere very quickly whereas obviously these things down here at the bottom like uh scroll timeline oh my goodness people you need to get on scroll timeline it's absolutely it's going it's css on scroll based animations with css only um it's really really awesome um really really cool so yeah this is i think once this gets adopted by browsers actually the and it might be a little while but once it is i think the the the know about it and have used it are gonna skyrocket once that happens um but yeah i mean i guess it makes sense there let's go by usage instead of by awareness just to see if there's anything that stands out flexbox gap actually i'm sort of surprised that if you know about it why you're not using it um even if it's not all the time because you're still worried about internet explorer or something i mean a lot of these middle ones it doesn't surprise me that there's pretty high awareness but not as much usage just because even like scroll snap it you're getting into more uh like it won't come up on everything you're doing it just you'll find something maybe in a specific situation or perspective if you're not doing much 3d work you'll know about it but you're not necessarily using it so things like that make sense to me um yeah i mean i think overall i'm not surprised there's nothing here that really jumps out at me and i'm like holy moly uh people need to get on this more there's a few of these next year i'm very curious to see how things trend a little bit um and then this is just out of everything listed how many did you know about so most people were sort of in that 40 to 80 group which makes sense let's go check out css grid oh okay so this is cool here's those trends i was talking about we can see the trend year after year so grid more and more people are using it very nice to see that subgrid some people are getting on that hopefully we're going to see chrome is hopefully going to be dropping it very soon ish 2022 i'm guaranteeing it's going to land in chrome then we just have to wait for safari before it really explodes but uh yeah that's cool flexbox i think that you know pretty much i think the people who haven't used it yet are just people who are new to css multi-column is yeah i mean multi-column's really cool but it's not useful in every case um and maybe some people don't even know like you see multi-column you might not be sure but multi-columns like columns three or something like that uh but yeah that's really cool writing modes this really did like left to right right to left and different scripts and everything um it doesn't surprise me that people it looks like you have used and knowledge are growing on it which is good um but it doesn't surprise me too much that it's it's slowly growing just as awareness raises but a lot of people don't write multilingual websites so position sticky logical properties logical properties will continue to get bigger that logical property sort of goes hand in hand a little bit with writing modes but i like logical properties even for things like margin inline or padding block or something like that um i like using that aspect ratio come on if you know about it just start using it it's so great such a useful uh property content visibility has basically not grown look at that there's actually the growth of it's gone up a little bit but the know about it's actually dropped that's interesting and hopefully people that didn't know about this have started knowing about it now after doing this survey and they they've got onto the flexbox gap property for flexbox because it's fantastic the brake rules it doesn't surprise me because it's about how as it says here how things break um yeah i'm really not surprised on that one container queries this is once this lands it's going to explode like the fact that it was this past week the container queries hit their public draft and so it's like actually part of the draft and everything now it's and it's already at 54 percent of people who know about it is crazy because usually when things are just landing at that first public draft nobody knows about it so the fact that it's already at 55 almost or 54 55 percent uh already know about it it means people are excited for container queries and have been talking about it a lot whoa that's weird less and less people are knowing about css shapes i'm wondering if it's how the question was asked or if it's just because there's more respondents that are responding that's a weird one that less people or more people are saying they never heard of it um and yeah it's basically if you do i've done a few videos where i've looked at it no not too much but you have something floating and then it's a circle instead of you know you want it to wrap around that or you have a shoe and you want it to wrap around the shape of the shoe or whatever it is you can use css shapes for that i'm really surprised that the knowledge i've never heard of it's actually dropping instead of rising it's interesting object fit that's just going to keep going if you don't know about object fit it's like background image but for actual images or video elements it's really awesome clip path as you'd expect it's just growing masks as well just not as fast doesn't surprise me too much blend modes yeah i mean blend modes aren't super they can be really useful but you don't always need them um so i'm not too surprised with that filter effects yep makes sense backdrop filter i'm surprised actually the backdrop filter doesn't didn't have a huge jump here just because of the whole glastomorphism thing that happened you needed backdrop filter to do that um and it just that sort of trend exploded i think this year so i would have thought you would have seen a huge jump but hey who knows color gamut being low doesn't surprise me at all just because most people aren't too stressed about that it's specific use cases especially right now but yeah that doesn't surprise me perspective have used it dropped that much so this is a case of the survey getting bigger i'm guessing because i don't see why else it would have shifted like this and it's just a lot of new people coming in i guess we've never done 3d css stuff that's kind of weird but i don't know um intrinsic sizing yeah i mean intrinsic sizing is really nice i don't know if i have a video on that or not but intrinsic sizing i probably should do a video on it um give your min content max content and fit content and it's super useful and i'm happy that that many people know about it iconic gradients i'm actually surprised it's that low i hear about them all the time there's so many cool things you can do with conic gradients and i think browser supports finally gotten to a point it would have been cool if they'd asked in previous years because last year the browser support was really bad for a long time and then all of a sudden got better and actually can i use we have useful links here i didn't even realize that there we go we can use conic gradients now so i'm surprised that it's that low because they can be super super useful uh the color yeah here too actually have used it that many people have used color i don't think so i think they mixed up um and didn't realize what it actually was um we had that other question earlier where the color gamut and people are saying they haven't used color gamut if you and don't even know about color gamut uh well i mean 17.3 there but um if you don't know about color gamut like you're not going to be using color because this is really about naming the specific color space and i don't know why why would there be so many people who know about and again color color gamut they're not the same thing but it's when you need to define something other than the srgb which is the default i would be really and even can you what's the i thought this was like yeah nobody's using are you really using color i don't think you're really using color um it's it's barely supported it's it's cool that it's coming but i i just i'd be very surprised by that as and here like if you you're not using color but then i think people misunderstood the question there because if you accent color like accent color is something that's like easy to use easy to understand uh easy to implement and you still only have seven percent of people doing it whereas most people i don't even think would realize like the difference between color spaces uh maybe i'm wrong but and again the browser's port there is non-existent whereas here it should be pretty good i think uh wrong one we want can i use uh yeah so you know oh it's coming in safari yes you know again it's it's not this huge big change when you use accent color but it's a nice little cool thing that helps and i think you know and it's super easy to do so that surprises me a bit uh let's go into interactions scroll snap yes that's going to keep getting bigger and bigger and that sort of goes with the overscroll behavior it's yeah i mean it can be used with that i think but it's also just boundaries how things are going to act and everything and with scrolling especially you know when you over scroll you don't get it so much on a computer you get it more on mobile um so i could see this slowly growing but it's one of those things that i think will never be this like massive thing that people are using all the time maybe i'm wrong but overflow anchor so again dealing with scroll behaviors um this one could be useful but again this all these scrolling things sort of go together touch action i'm surprised a little bit that that's not getting better but you don't hear a lot about it so that makes sense point your events so like this can actually be really useful if you have um when you have for some reason you need to overlay something over something else but that means when you you can't actually like click on that thing that's behind who knows why you need to do this it comes up rarely but it can be super useful so you need to like point your event none the thing in front so you can actually click on the thing behind and i'm sure there's other uses for it that i don't think of scroll timeline again nobody knows about it but it's it's coming and it's going to be fantastic um font variant so this is dealing with yeah that doesn't surprise me and act well does surprise me is the trend here where it's getting smaller but again i must be the growing audience and sort of these more niche things that not everyone's going to be using so i think that's why but i guess i should do a video on font variant just try and raise awareness a little bit on it same here i guess type r it looks like just this general trend looking at these here um that typography you know as the audience increases and the survey respondents are increasing um that we're getting this downward trend um in a way of not knowing about it or never heard of it lying clap's an interesting one but i don't think you can use it too much can we oh uh i knew it's prefixed you need them is it not prefixed yeah every it's prefixed everywhere uh i didn't realize it was available everywhere so line clamps like how many lines long so you're not limiting you're not doing like a certain line length this way it's how many lines do you have and then you can have like your ellipsis or whatever so say you have a card where you're pulling in dynamic information or dynamic content and some of the paragraphs are two lines and some of them being 10 lines and you want all your cards to be the same size you could say line clap of two lines and that means even if it's tons of content coming in it's just going to chop it off automatically so it could be really useful actually variable fonts this is a shame they didn't look last year because i'd be curious um i've been wanting to do content on variable fonts for like three years now probably um but now that they're really here and i've played with them and i've done stuff with them i really should make some content on them because variable fonts are fantastic and i mean they're even in google fonts now they're a bit different but they're there um prefers reduced motion is growing that's good and more people seem to know about it so i definitely this is this accessibility section is one i was really looking forward to getting into here and it's sort of nice to see that it's growing i really would like to see this growing much faster though um prefers color scheme i'm really this is cause light and dark mode that's why this has anybody knowing about it which i guess makes sense i'm actually i'm sort of surprised with how low this is um just because of the whole light dark mode thing whereas this is a little bit it's kind of encouraging i guess that they're roughly the same stage just because this is sort of something that people like implementing whereas this is more about taking into account accessibility stuff even though the color scheme and you know having a light in dark mode is good for accessibility and not just for um fun prefers reduced data it's really small uh this is just a nice way to reduce the amount you know if somebody's on a situation uh where they want to reduce the data that they're using um [Music] yeah i'm surprised that not more people know about that but uh i guess it makes sense color contrast that doesn't surprise me again i mentioned that on earlier but this is going to be one that once it becomes a thing i think it'll take off i'm guessing because it just makes our life a lot easier basically you can say like i have this color and i want to here's four different backgrounds that i could put this text color on choose the one that would work the best and the browser will figure it out for us it's gonna be fantastic um in general don't use tab index if you don't have to um have used it hopefully they're using it in in a good way and often you're doing a negative one or a zero you're keeping something in tab order uh or the negative one to make it so you can't tab on to it even though normally it would be uh area that's kind of can a lot of people have been using area so that that's nice that um i'm surprised i was expecting this one to be a lot lower so i'm happy to see how high the the area is there um css variables this again this doesn't surprise me there we go it's just going to keep growing and taking off at supports is growing that makes sense containment so this is going to explode once container queries become a thing just because they rely on containment a lot but there's other reasons to use it um dealing with layout shifting and other stuff like that but i think that container queries is gonna be the big thing and people are gonna know about container queries without really knowing about css containment as well um but this should when this performance is becoming more and more important this might actually gain a bit more traction too i guess hey look it's me definitely check out stephanie if uh if you don't uh already will change again this is about performance a little bit on letting the browser know when things will change there's performance you can help gain performance with it but it can also slow things down so you want to be really careful with wheel change you don't use it just because you want to use it you use it because you found a performance issue that you want to try and fix um so yeah it's it's an interesting one uh calc yeah that makes sense basically everybody's using calc these days houdini i'm in the know about it stage houdini as the name implies is magic and i have no idea how it works but it's really cool it's really really cool and i should dive into it maybe that could be a project for 2022 for me um comparison functions uh min max and clamp and yeah i see those next year will probably be growing a lot i think that's gonna sort of follow this maybe i don't know we had some other trend lines where things were growing a lot and min max and clamp are just amazing so that's just going to keep growing for sure uh houdini custom properties actually this is the one place where i have played with it um the app property css rule is amazing and once other browsers support it i will be doing content on it because it opens up some new doors to custom properties that we don't have or we can't do at the moment marker i've talked about this one um it's one of those things that like if you know about it just use it because it's cool and it lets you do you know it's very small sort of subtle changes it's like accent color in a way that it's not like oh my goodness i have so much more control even marker does make our life quite a bit easier though um for styling the markers like our list items and other stuff um there's a few other places that can be used uh summary yeah um so you can anyway it's a cool thing that if you know about it you might as well use it because it's it comes in handy just to make these little stylistic changes uh that otherwise aren't possible okay here's another one i was really looking forward to seeing um so we have satisfaction versus usage of things so pre-processors or post-processors sas less post css things like that frameworks tailwind bootstrap foundation and then all the css in js things as well your css module style components things like that and interestingly the only one that's an adopted sas that really surprises me so it means a lot of people are using it and a lot of people are also very satisfied with it so it's high usage and high satisfaction so a lot of people there uh whereas interesting bootstrap has a lot of people using it but a load of satisfaction so that doesn't surprise me so much so just looking at the preprocessors they're sas or pre and post we have post css which actually has very high satisfaction that makes sense actually the css in js seems to have very high satisfaction but lower user counts so they're all like some of them have very high and the interesting with the the other way the frameworks frameworks are going generally speaking with low satisfaction uh even though most of these frameworks are sort of in this like not very good group here um which is interesting uh because generally you want to be like in one of these two up here and down here is not so good because it just means lower satisfaction i'm really surprised less and like stylists are down here stylus usage i knew wasn't very high but i would have thought that people liked it more because the people i know who use stylus really like it and like i don't know why sas is so much higher satisfaction compared to lesson stylus i have no idea but yeah so it looks like i think i guess one issue here is like you have sas you have less than your stylus so like most people seem to be using sas and post css is is pretty high too whereas then and and there is a lot of overlap between them so like they're getting a lot of the usage the numbers are pretty high on user count whereas here in the css in js staff there are so many different ones that the user base is sort of split across a lot of them so even though the satisfaction is high the total users is low just because they're it's sort of all over the place right um even though style components and css modules are are the higher on the count but it's interesting and just in general other than tailwind and a little bit of the pure css there people don't seem to be too in love with frameworks in general um a lot of in the lower satisfaction range there rankings of preprocessors pre-post processors so post css satisfaction post css is up there and sas is oh look sas is actually dropping a little bit in its satisfaction over the years though um that's interesting um stylus and we have assembler down there at the bottom i'm actually for something that's more niche i'm surprised that the satisfaction is so low like most people probably haven't even heard of it the interest level oh look at that post css has passed sas i still like sas a lot but i see i i think why that is there's stuff post css can do that sas can also do you can bring in things like nesting and and other stuff um and there's sas features that people don't use and so people might be making that sort of switch over from one to the other a little bit even though i still think sas is worth using personally um i like using sas and post css together they can work well together too usage sas is still way up there and it's actually growing and less is dropped down post css is growing as well that makes sense and awareness everybody knows everybody knows about sas even if they're not using it less people generally know about just don't use it post css it's growing the numbers are going up so cool and yeah stylus is there and yeah as i thought assembler not many people know about it um and experience over time would use again sas is dropping a little bit i mean post css is is really taking off and it's interesting because post css has been around for a long time now so it's interesting to see it's gaining steam pretty quickly um at this stage and it's baked into a lot of stuff now too which is kind of cool positive negative split so yeah assassin post css as we sort of saw in that other thing very high less is less stylus are not doing so great um overall which i'm still a little confused by but i never really got into i saw them i played with them but i just got into sas as the first one so i had no reason to switch but i'm curious why people don't like those as much and if you know why leave a comment down below how happy are you at the state people generally are happy neutral or very happy i've been very happy i think they're very good what we have right now css frameworks satisfaction tailwind ooh look tailwinds actually had a spike in 2022 and people are not as happy with it in 2021 as more people are using it that's kind of interesting uh pure css is 70 so i mean in general like the satisfaction level with these is pretty low but people seem to just keep going back to them this is why you need just to learn css guys uh interest tailwind again taiwan had a spike and is dropped back down that's really interesting to me that it was got up to from 50 to 62 and then back down to 51 so people i guess got excited about it it was the hot new thing and then now it's sort of leveled back off to where um i hear about it so much i always think more people use it than they actually do um semantic ui is dropping bulma is really dropping look at that that's in interest um what about tachyons has really dropped off as well and i haven't heard much about that foundation's dropping off that's i find it really interesting at seeing how some of them actually just drop off in interest because i think it shows interest in bootstrap is at the bottom but usage of wood strap is look at that so high 85 percent of people have used it until when they're uh so it does show tailwind um has really it's gone from six percent to forty percent of people who responded having used tailwind um so despite the interest sort of fluctuating a little bit the usage of it has exploded um i'm wondering when bootstrap's actually going to start dropping and again this is people who have used it so i it'd be a long time i guess before that actually drops even if people aren't currently using it but we can see bootstrap semantic uis dropping tachyons things like that doesn't surprise me too much um an awareness everybody knows about tailwind now even if they're not using it that makes sense look at that like just from one year to the next the awareness of tailwind just went crazy there um so yeah i mean this doesn't surprise me too much it's sort of what we were just looking at negative positives so yeah bootstra people either really like bootstrap or really don't like it with more people on the don't like side uh tailwind more definitely a lot more on this side but it you know the negative trends here just blows me away on how how high they are and a few other write-ins there i just learned about windy css i hadn't heard of it before and happy not too many people there a lot of neutrals um yeah makes sense css in js which is not my forte but we'll look at them anyway uh there's this you know look if you go back to 2019 there was one two three five and look now like holy cow has this part of the world exploded um with vanilla extract like this just out of nowhere having super high satisfaction let's go to usage it's pretty low down at one percent of usage though so people really the p that one percent who use it have really liked it um but basically most people are on styled components or css modules which that makes sense because that's just those are the big ones style jsx is coming up next i mean nothing here surprises me too much and like these other numbers here at the bottom are so low awareness i'm a little bit curious about usage and awareness just to see if there's any so the only one i see here is the vanilla extract i have a feeling we'll see that one taking that next step next year just because it does have quite high awareness compared to the actual usage uh so yeah i wouldn't be surprised seeing that one go up and yeah and the in the fact that the interest level in it is so high um i see that one don't i haven't even heard of it before to be honest but i have a feeling we'll be hearing more about it with it being that popular and so yeah let's go on oh look somebody picked me i didn't even realize thank you so much gift i'm apologizing if i said your name wrong but thank you so much for nominating me that's really nice i appreciate that um let's keep on going look at that like neutral i'm surprised like i haven't found a good solution so maybe just don't use them hot take there no i'm kidding other tools prettier yeah auto prefixer style and purge css css nano used on a regular basis all of that makes a lot of sense browser usage which browsers do you primarily work in during initial development look at firefox holy moly clearly people are using multiple browsers just because the numbers add up to way more than 100 here um question percent yeah so pretty much everyone's using chrome and firefox and safari i'm guessing or maybe some are mixing an edge there instead of maybe chrome i'm not sure so this is you working during initial development um so yeah i guess you know people are about you know they're making sure to use multiple browsers even during initial development which is a good thing to do so you don't run into a nasty surprise later on library evaluation ranking oh yeah this is the interesting one where they they did like head to head like which one is more important and you sort of had to like head-to-head battles on some and then you'd pick your winner for each one in like a tournament style bracket um and it looks so documentation developers they pitted all these against each other of um which factors do you prioritize when evaluating a new library their documentation their developer experience user experience accessibility et cetera et cetera et cetera and it looks like documentation is the most important which makes sense because you need to know how to use it followed by developer and user experience um that i get why we haven't can we just well here's the individual match-ups too that we can look at to see like who how they faced off against each other interestingly hype and momentum are really low but why i don't think anything is going to gain a lot of hype and momentum if it doesn't have good documentation and developer experience um so but i i think this might be higher than it actually is people will say that the other things are more important and i think i guess if you're once you're in it and you're looking at it you're not going to check it out unless you know you're not if there's not a lot of hype and momentum around it you might not even explore it in the first place so just just throwing that out there what browsers do you test in so this yeah here's test which makes sense let's go to this one because there's so here basically you expect a lot of the numbers to be higher and i'm surprised safari is so low it's windows developers i guess that don't have access to safari i'd encourage you to buy a cheap like used macbook or something um that's easy to say a cheap macbook but you do want to test on safari because it is a little different from the other ones uh and even i found a weird thing in firefox the other day with svgs and blend modes that doesn't seem to work in firefox so it is important that you do tests in everything that you can get your hands on basically um as much as possible testing environments desktop smartphone again like guys test on your smartphones don't just rely on your your the what's the mobile mode or whatever it is there um make sure you actually test on different devices you have chances are you have a phone at least test it on your own phone as well not just you know load it up test it on your phone not just assuming the browser is going to do the job the accessibility stuff isn't desktop with keyboard only come on guys you can that's easy it's not that hard to do you should be testing your stuff definitely with your keyboard um screen reader i get why not everyone's doing that but if you're you know a combination of using some testing tools for accessibility plus potentially running it through a screen reader not too hard to do print support i get you know it depends on the site you're building if you're doing a recipe site i i think you might want to test that a lot of other people might not be bothering accessibility feature which accessibility features do you usually implement so yeah everybody saying that they they knew and had used area but then you have only 56 percent of people saying they use alt texts so like that's a little sad fifty two percent saying semantic markup or even here like so people have used area but only regularly use it forty 46 of the time and you might not need a lot of area on your site and if you don't know what area is don't stress too much but it's worth looking into um focus indicators like alt text semantic markup and focus indicators to me this is super like that's the easiest minimum bar in my opinion and it should not be hard to implement um keyboard navigation is super easy to test and and play with and make sure that it's all working so like the skip to content people 20 okay i actually have a video coming out tomorrow i think on that one or if not tomorrow it came out yesterday and if not yesterday it's coming out next week so i'm glad about that because it's super easy to do um and yeah this is for me super disappointing like a lot of the like alt text is the easiest thing in the world to implement um and you can do it programming if you have dynamic content it's still not that hard to do so it takes a bit of work in that case but it's not that bad um so kind of disappointing on that end i won't lie what do you mainly use css for web apps marketing sites yeah i mean nothing too surprising there i saw an emails in there which is scary first steps with css when how do you initial how did you initially learn it self-directed learning is really high online courses that are free that's sort of the same thing i think google stack overflow and then you found a free online course videos and screencasts on the job training books high school or higher so school and higher education paid courses mentoring podcast i guess you could you learn css through podcasts though when starting out or maybe you heard about it and then sort of got interested in it that's always possible you're doing back-end stuff doing other stuff and then you start hearing more about css through a podcast you just decide to learn it that could be possible blogs and magazines which ones css tricks not surprisingly followed by smashing followed nothing let me just see if there's anything that stands out here but um oh css in real life and nice happy to see those they're front end horse nice if you're not following those uh definitely give them a follow yeah nice to see those showing up on the list that's awesome but yeah no big surprises on there cool sites and courses which sites stack overflow and mdm that makes sense they're really high people still use w3schools isn't as bad as it used to be but i'm glad to see that mdm is so much higher free code cam udemy west boss makes sense front end masters yeah nothing standing out here level up in there definitely cool that makes sense to me podcasts syntax shop talk show makes sense css podcast definitely worth a listen um if you haven't listened to it and you're into podcasts yeah nothing nothing too surprising in the list of podcasts and if you want to follow some front and related podcasts here's a nice list that you can choose from and dive into and guys seriously um [Music] free so this is a free form field comma separated names and there's a lot of people on this list that i don't deserve to be ahead of so i do appreciate that you enough of you wrote in and submitted my name for this but there's amazing people on this list that definitely should be higher up uh than me but thank you all very much i know it does help i guess that my focus is purely on css um whereas some of these people it's not purely on css but yeah i just thank you very much for that that makes me a little bit uncomfortable i won't lie but i do appreciate it um yeah thank you very much and just if you need more people to follow looking through this list is just a list of wonderful people that you should definitely be following and i don't know why i'm above most of them uh yeah some really good names in there to follow so we can't read them all out and they're all worth the shout outs so definitely you can check that out um opinions is css easy to learn interestingly the agree grew and it's about the same as last year so that's encouraging to see it actually interesting the agree and the disagree sort of there it's about the same as last year i mean that does make sense i don't i think the strongly agree is it easy it's easy to get into but it's one of those things that's hard at the end uh css is evolving too slowly this is agree is shrinking down which doesn't surprise me and the disagree is and strongly disagree or growing um so that that well actually it shrunk and then grew but the disagree is a general um is disagreeing and that makes sense with all the new stuff that's coming to css so i get that utility non-semantic classes centered large text etc should be avoided uh you know what it is the neutral shrunk when 32 31 29 because then the two other ends have gotten bigger um just because you know i don't think there's any well yeah that's kind of interesting actually but utility classes should be avoided and yeah i just find that interesting especially with utility frameworks like tailwind taking off um that's kind of interesting i enjoy writing css well that makes me happy this is what i like to see the strongly agree is oh it shrunk down a lot from there actually i don't like seeing that necessarily but i do like the the neutral and these other ones are shrinking which is the most important one as long as you enjoy writing it and that's in the agree or strongly agree that makes me very happy all right are these are there any features they have difficulty because of the difference between browsers these numbers are actually really low when you consider i mean 725 people so only an 8.4 completion percentage so in general not too bad um big grid i get internet explorer i know um subgrid 100 for me uh it's not so much with differences this is just not everyone supports it flexbox gaap i think we're good to use that now again it depends are you supporting internet explorer or not which aspect of css do you struggle with the most ranked by number of tournament rounds one browser compatibility architecture and maintenance styling form elements responsive design that's encouraging that it's it was not winning it's sort of in that second round area layout and positioning performance interactions and scoping and specificity and that's going to get even easier so next year that or two years from now maybe that would be a lot lower browser people who are newer uh to this whole thing might not realize that this is not that big a deal anymore compared to what it used to be really not a big deal anymore um to me the architecture and maintenance is so much worse than browser compatibility um but that's how people feel and i actually i'm surprised styling form elements isn't higher up on that to be on yeah uh css feature is missing so people want people are excited for container queries parent selector so by the end of next year these two might container queries parent selectors nesting and scoping and subgrid and potentially color functions might all be things that we have so for things that are missing from css next year promises to be a really good year there might be some browser compatibility issues with some of it still but we're going to have them at least right because parent selector to me that's the has container queries are there they're trucking scoping is is coming nesting is coming browser support is just browser support it's always going to be something we like to complain about subgrid is on the way so yeah there's really good how happy are you with the general state happy yes that makes a lot of sense to me uh how happy are you with the generals oh wait oh web technologies was happy and css look more people were neutral than happy uh just compared to the two of them together but i'm happy that people in general are happy with css this might be also skewed a little bit because who's it's a survey for people who write css um at least on some basis or not so like i know there's some people who hate css but they might not have even bothered with the survey awards things that stood out this year the most adopted feature year over year hmm i have no idea comparison ah yeah okay that makes sense let's hear the min the max the clamp that type of thing uh highest satisfaction awarded to that post css right that was the one that was like super high yeah and highest interest the most interested in learning once they are aware of it was that that vanilla one the the css and js vanilla something oh no css modules huh interesting and oh vanilla extract was next hmm interesting and conclusion of course that oh written by killian awesome if you don't know killian it says right there he was the creator of polypain uh but i just want to say there's if you know the state of css right now is a really amazing place i think and it's only going to be getting to better and better places next year there's so many exciting things coming and as i mentioned one of those things i'm really excited about is scroll timeline so if you'd like to check that out there is a video right here for your viewing pleasure and with that i want to give a really big thank you to adam johnny stewart randy and tim for being my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your internet just a little bit more awesome

Channel: Kevin Powell

Views: 11,788

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial

Id: gqrKn6FOA7g

Length: 49min 38sec (2978 seconds)

Published: Wed Dec 15 2021