Brian Kardell: All right. Hi, I'm Brian Kardell. I'm a developer advocate at Igalia.
Eric Meyer: And I'm Eric Meyer, also a developer advocate at Igalia. And welcome to Igalia Chats. We're going to talk about the state of CSS survey today.
Brian Kardell: Cool.
Eric Meyer: The results were just recently-ish as we recorded this announced. And I don't know. I don't know how you felt about it, Brian, but in some ways, it was the usual mix of, oh, that doesn't surprise me at all, and, oh, that completely surprises and possibly shocks me.
Brian Kardell: Yes.
Eric Meyer: Yeah.
Brian Kardell: I agree, I agree. My favorite thing about it is that Igalia Chats is listed in the podcast resources-
Eric Meyer: Yeah.
Brian Kardell: ... which I really am floored by. I mean, cool.
Eric Meyer: Yes. Thank you. I mean, 2%, so spread the word to your friends and colleagues if you'd like to see that number go up. But yeah. Especially since I don't think it was actually listed as an option, that people had to write it in, and enough people did that it ended up on the list. That was pretty cool.
Brian Kardell: Yeah.
Eric Meyer: And it was a surprise. I don't know. What else did you like about it?
Brian Kardell: Well, the number one best thing is :has(), which-
Eric Meyer: Right.
Brian Kardell: ... doesn't surprise me at all. And I think we have a lot we would like to talk about with that, right?
Eric Meyer: Well, yeah. I mean, so the results of all features, where they basically ask people, 'Have you used it? Have you heard of it? Have you never heard of it?' Et cetera, was the top of the used it numbers, and also, I believe had the... Well, sorry. It had the most used it and had positive feelings about it. And then, if you add-
Brian Kardell: Yeah. They have awards at the end, and the number one most loved feature award went to :has() as well.
Eric Meyer: Right. Yeah. The :has() pseudo class or pseudo-element or pseudo whatever it is. The :has() function, in a sense. Anyway. Yeah. And if you had together used it with positive sentiment and used it with no sentiment given, it was very, very large, sort of top of the heap, which feels good as developer advocates at Igalia, because :has() was pretty much kicked off by Byungwoo Lee here at Igalia after so long.
Brian Kardell: Since 1999 or 1998. I mean, it was on the list of things that got cut from CSS 2 and immediately, day one, was on CSS 3.
Eric Meyer: Yeah.
Brian Kardell: And yeah, I advocated for years even before I came to Igalia, when I was with the jQuery Foundation, because jQuery supported :has(), and the reason that they supported :has() is because it was-
Eric Meyer: In CSS 3
Brian Kardell: in the CSS 3 specs, right? and it's awfully, awfully useful. So I, for years, advocated for either dropping it from the spec if we're not going to do it and stop teasing developers, or let's do it. I prefer let's do it because it's really useful.
Eric Meyer: Yeah.
Brian Kardell: So finally, eye/o actually sponsored some work on it, and kind of surprised that we got it done.
Eric Meyer: Did figure out how to do it, yeah. I mean, the blocker for years had been that browser makers basically said the performance is a nightmare and we can't take it on. And eventually, it was figured out. Basically, Byungwoo figured out a way to do it, and now we have it. The most loved things on this list, there's a little bit of a worry that comes up for me. So the top five features on this chart are :has(), aspect ratio, CSS nesting, scroll behavior, and viewport relative units. That's the top five. I would say at least three of the five and probably four of the five are not progressive enhancements, which on the one hand makes sense, because the thing you're most likely to love is the thing that you've wanted forever and now you have it.
Brian Kardell: Right.
Eric Meyer: So :has(), for example. For almost 30 years, let's say for 25 years, developers really, really, really wanted parent selection, is how it usually came up, but they wanted some way of doing more complex selection than just you can only look down the DOM tree. And then, they got it, and it delivered everything, basically, that they had been asking for, plus a whole bunch more, so of course they love it. But of course, if you use it in your CSS, then an older browser that doesn't understand :has(), that rule is just not going to be processed. It's going to get dropped. CSS nesting, if you nest all your things, nest all your selectors inside of each other... Which I have started to do for internal projects and I love it. It really is as good as... It makes so many things so much easier and cleaner and easier to maintain.
Brian Kardell: I maintained for a long time that that feature is one of the key reasons why people use pre-processors.
Eric Meyer: Yeah, absolutely, yeah. Certainly for the last little while. I'm not going to try to put a number of years on it or whatever. But for a while now, that was the thing that pre-processors had that CSS didn't, after CSS had adopted all these other things that pre-processors are good for, like variables. And I agree with you 100%. And in the way that pre-processors do, the fact that it was so popular was a big signal to the CSS working group to say we should maybe do this natively, because people literally will set up an entire tool chain just to get this thing. When pre-processors started out, it was to get these things. There were several things, like variables and nesting and so on and so forth. But the concern there, like I say, is that if that gets deployed, an older browser that doesn't support CSS nesting, most of your style sheet, possibly all of it will be unpersonable, and therefore not applied. Viewport relative units are... It depends on which viewport relative unit, like vw, vh, those have been supported for a very long time. But if you start talking about some of the more recent ones, that could be a problem. I mean, scroll behavior, I feel like, sure, there are probably ways you can use scroll behavior in a non-progressively enhancing way. But I would guess that most of the uses of it are, this is a nice to have, but it's not going to break the site layout if it's not supported. And aspect ratio tends to be similar. Your images might look real wonky in a browser that doesn't support aspect ratio. But on the other hand, aspect ratio has been supported for a while though, universally supported.
Brian Kardell: Yeah.
Eric Meyer: But yeah, it's one of those things. I feel like I go through this every year. I go through this cycle of, oh geez, everyone's adopting the stuff that will break older browsers too quickly. And then, I have to calm myself down and say, first of all, that's how progress happens sometimes, and second of all, probably... People say that they've used it and they love it. They don't say that they're using it everywhere, right?
Brian Kardell: Yeah.
Eric Meyer: They don't say they're using it for 100% of all of their selectors. So I have to calm myself down and say, some people are probably using it a little too aggressively, but I think there are probably people using it in good and progressively enhancing ways.
Brian Kardell: You make me wonder, I don't even know how we would study this exactly, I think there's dramatically not enough study of the existing web.
Eric Meyer: Yeah.
Brian Kardell: If there was something that I wish we could turn the artificial intelligence to, it would be like, 'Hey, help us find interesting patterns in this data that is way, way, way too big so that we can investigate them further and then pave the cow paths,' you know?
Eric Meyer: Yeah.
Brian Kardell: I feel like there are some potentially interesting things there. But what you make me think of is I wonder how many people... We advocate for it all the time. But how many people really are using things in a progressive enhancing fashion, even if they can be progressively enhanced?
Eric Meyer: Right.
Brian Kardell: And I also am curious to, now that we have baseline, to try to correlate the archive data with baseline or something and see if the adoption trend cares about baseline as much as we do. You know what I mean?
Eric Meyer: Yeah.
Brian Kardell: Those are great, great points.
Eric Meyer: Yeah. And yeah, I like your ideas too. I mean, I agree with you, the web technology usage is, as you say, dramatically understudied, possibly woefully so, because I would think it would be of use to standards bodies and browser makers, for that matter.
Brian Kardell: 100%, yeah.
Eric Meyer: To be able to look at, well, we introduced this thing, and here's the pattern of adoption. And then, when you compare it to all of these other things, it's out of band or it's what we expect or whatever. Some of the other results in that chart also interested me. :has(), for example, I'll go back to :has() because it's at the top of the chart, so it's very easy to look at, 83.7% of respondents had used it, whatever their sentiment was, they'd used it.
Brian Kardell: Wow.
Eric Meyer: 12.3% had heard of it, but not used it. 3.8% of respondents had never heard of it.
Brian Kardell: Wow.
Eric Meyer: Okay. Out of, what was it? Almost 5,000 respondents, I think. So if you go down the list, I'm just going to go to number seven, which is ad supports feature query. 52.7% had used it. 27.7% had heard of it, but never used it. 18.9% had never heard of it. So :has(), 3.8% had never heard of it.
Brian Kardell: Yeah.
Eric Meyer: Ad supports, which has been there for years-
Brian Kardell: Yeah.
Eric Meyer: ... 18.9% never heard of it.
Brian Kardell: Yeah.
Eric Meyer: That was very interesting to me. I assume it's that when :has() became widely supported, everyone was writing about it, like, 'Here's this cool stuff you can do,' and, 'Look at this amazing pattern that I put together that lets me select... Lets me do blah, blah, blah, blah, blah.'
Brian Kardell: Yeah.
Eric Meyer: Whereas ad supports maybe doesn't get that kind of love, because I don't think it ever really did. And also, it's been around long enough that people aren't really writing about it anymore. Honestly, the heard of it ratio is probably a little bit higher on ad supports just because Kevin Powell uses it so much in his videos. But yeah, that sort of jumped out at me. Some of the other ones, like the :where() selector, that was like 22.3% had never heard of it, but I get that.
Brian Kardell: It's a really good selector.
Eric Meyer: It is. It's super useful and super interesting. It's just I was not that surprised that not that many people had heard of it, but ad supports, I was just like, wow, really?
Brian Kardell: It's kind of a shame when some of these things come around, because I wish that we didn't do both :where() and :is(), because they're almost the same, but one is only two letters and it uses :is(), which if you look at web APIs and proposals, :is() is a very common proposal, and it completely makes sense and sounds like, sure, I mean, what else could :is() mean? But it can mean a lot of things, given the context. So yeah, people are going to prefer something that's two letters and :is(), and I think that maybe :where() is... :where() is the one that's zero, right?
Eric Meyer: Correct. Anything inside of :where() doesn't contribute to the specificity of the overall selector.
Brian Kardell: I feel like that's usually the one that you want, actually.
Eric Meyer: I actually disagree.
Brian Kardell: Okay.
Eric Meyer: I mean, it depends on what you're putting inside of the parentheses. If you're mixing stuff, if you have an element name and an ID, then the specificity of that chunk is going to be of the ID. But most of the time, you're not doing that. :is() is usually something like HTML :is(<h1>, <li>). That's probably a weird combination. But you're going to list a number of elements that can sort of be in a given context usually, or class names, let's say. And so I think :where() is useful for those situations where you do need to mix stuff, but you don't want the selector to have huge specificity just because you need to put an ID in there. I think that is rare enough that people don't really think about it or talk about it, and so that's why it has 22.3% never heard of it.
Brian Kardell: Yeah. I think the regrettable thing is that they both came out about the same time and they're almost identical. And I was there when Lea proposed the other one, and even still, I can never remember which is which and I have to go look it up. So even as we're having this conversation, I'm thinking, are we wrong? So yeah, I think that's the unfortunate part, is they're so very similar. I think you probably want the zero one most of the time. But maybe you're right, maybe you don't.
Eric Meyer: Yeah. Who knows? And I guess by my own argumentation, in a lot of cases, it's not really going to matter that much, but it might. And my recollection, although my recollection is very hazy, I think they came out about the same time because, basically, :is() was being worked on and someone pointed out, 'Hey, if I mix a bunch of stuff, then selector specificity gets real weird.' And so, oh, well, maybe we should have a zero specificity version of :is(). And thus, it was proposed.
Brian Kardell: Yeah. Lea Verou proposed it-
Eric Meyer: Yep..
Brian Kardell: ... and it was brilliant. I mean, I can't believe that it went through, and that it had basically people in the room going, 'Oh yes, brilliant,' as opposed to somebody being like, 'No, we must have the specificity.' And when it went through, I was like, wow, that's the one I wanted too. Good. I'm so glad.
Eric Meyer: Yeah.
Brian Kardell: Yeah.
Eric Meyer: That does happen sometimes-
Brian Kardell: Yeah, yeah, yeah.
Eric Meyer: ... as we can see.
Brian Kardell: You know what? Another thing that I found surprising is that there's a most commented feature, and the most commented feature is line-clamp.
Eric Meyer: Okay.
Brian Kardell: Mostly, people complaining about the prefix and tags and some things. But the reason that I am also very interested in that one is it's another one that Igalia is working on and-
Eric Meyer: Yep.
Brian Kardell: ... working on fixing. And I think it's pretty good, I think. Do you know where it's... Go ahead.
Eric Meyer: If you want line-clamping, it's really good.
Brian Kardell: Yeah. Both of those, and some of the other things on here, I think, what's interesting is we're also involved... I've stepped away from it, but you're still involved in the inter-op stuff. And we try, the community tries, developer advocates try. Browser vendors want to know, what things do you prioritize? And then, somehow, they have to balance it with, what are our available resources and what are our architectures, what things can we align on? We would love to align on all of it, but-
Eric Meyer: Right.
Brian Kardell: ... in a practical sense, how do we make decisions with finite resources and different architectures and things? And what surprised me is how many things appear on these lists that are done via somebody prompting it with external funding. You know what I mean? I learned about Igalia in 2017 when they were doing grid. I'm just still, even still surprised when I see how many things there are that are incredibly important, incredibly popular, noted everywhere, that are not able to be chosen because so many other things are chosen. Yeah, I don't know. I mean, it's an Igalia Chats episode, so I guess you shouldn't be surprised that I'm talking about it. But I'm not talking about it to pump Igalia. That's why I'm at Igalia. I think it's incredible how much stuff gets done because of external funding, I guess is the end of the word.
Eric Meyer: Yeah.
Brian Kardell: But external... Somebody taking the initiative to do the initial work when other people won't, basically.
Eric Meyer: Yeah. And Bloomberg said we need a grid-based layout system, there's a proposal, browser vendors aren't working on it, so we need to hire somebody to put that into browsers. They hired Igalia. :has(), eye/o needed it, same kind of deal.
Brian Kardell: Lime-clamp is also Bloomberg.
Eric Meyer: Yeah. Okay. I think that's right, yeah. Yeah. And sorting that particular chart by comments, actually, I thought was kind of interesting. Like you say, line-clamp was far and away the most commented. 78 people just took the time to write comments rather than just click to vote. And then, CSS nesting is the next one. But then, that brings up the number four most... Well, tied for number four most commented is CSS carousels, which, first, we're going to put out there, 57.1% of people who responded never heard of them, hadn't heard of CSS carousels specifically.
Brian Kardell: Yeah.
Eric Meyer: I'm sure that all of those people would say, 'Well, I know what a carousel is and I know what CSS is, but I didn't know the two were together.' But the positive-negative balance actually surprised me. 5.8%... Sorry. Not positive-negative. The used it-heard of it. 5.8% used, 36.8% heard of.
Brian Kardell: Right.
Eric Meyer: And even at that, the positive-negative was a little unusual, I thought. Because most of these things, most of these features that are listed, the negative sentiment, when you show the chart by sentiment, the negative sentiment part of the bar is so narrow that there isn't room to put the number-
Brian Kardell: Right.
Eric Meyer: ... for that entire... For CSS nesting, 2.6% had a negative sentiment. But for carousels, you've got 6.6% negative sentiment.
Brian Kardell: Well, I mean, that even sounds low-
Eric Meyer: Sure.
Brian Kardell: ... when you put it that way. It's hard to follow all the thing. But there were a ton of people commenting on carousels, and lots of the comments were about accessibility and separation of concerns. But to put it really simply, in the awards at the end, there is a most loved feature. There's also a most hated feature. And carousels were not the most hated feature, they were the second most hated feature.
Eric Meyer: Okay.
Brian Kardell: So yeah.
Eric Meyer: Yeah.
Brian Kardell: That did surprise me, actually, because I really assumed that... This is a problem whenever we release something, that there's a group of people that are like, 'Hey, let's do something kind of cool and innovatively new with CSS that will save you from having to write JavaScript and blah, blah, blah.' It's really hard to not like that. You know what I mean? Especially when the reasons for it are not super obvious to everyone. So if the reasons have to do with accessibility and things like that, then I would intuit that a lot of developers would not know about that, not care about it, say, like, 'Yeah, release it, then we'll worry about that later.' So yeah, I was really surprised. I think that it's probably even artificially low for the sentiment, given that. You know what I mean?
Eric Meyer: So when we were talking before recording, I know you said you were really surprised by the most heated feature.
Brian Kardell: Wide gamut colors.
Eric Meyer: Yeah.
Brian Kardell: Yeah, I don't understand why. It just really surprised me. Do you have any insight into why?
Eric Meyer: I don't. I haven't drilled down enough to sort of figure that out yet. But I think probably... I mean, colors in general, in my experience, in the... Okay. Let me start that over. When we started out, colors were very simple.
Brian Kardell: Oh yeah.
Eric Meyer: You could write a name or you could have a hex value. And then, it got slightly more complex. You could write a name, you could have a hex value, or you could write an RGB, which was a decimal equivalent to the hex that you already knew, or you could write an RGBA, which was super cool because then you could have alpha, right?
Brian Kardell: My favorite. Yeah.
Eric Meyer: And then, HSL was added, which some people really love and some people really didn't.
Brian Kardell: Do not. Yep. Me personally.
Eric Meyer: I get it and I don't get it. When it was first introduced, I was just like, well, I already know RGB. I don't like HSL. It's a completely different color space. I don't understand, really. I mean, I sort of get it, but I don't have a sense for it the same way I do RGB. But over time, I've mellowed out on it, and it's become much more of a, okay, well, if I have a color and I want another color somewhere else on the hue wheel, then all I do is change this degree. That's kind of cool. But HSL, it turned out, had problems where if you have the same saturation and lightness, and then you move around the color wheel, perceptually, the colors can look very different to each other.
Brian Kardell: Exactly. That's why I-
Eric Meyer: So then we end up with, OKLCH, which is an OK version of LCH. That's literally where the name comes from.
Brian Kardell: Got it.
Eric Meyer: Which is sort of like HSL, and the syntax is different. It's just enough different that if you haven't completely immersed yourself in it and absorbed all these differences, it can be very frustrating, but perceptually much more uniform. And so now, we have wide-gamut colors, which build on that, okay, we have this new syntax that looks even weirder than HSL, and unless you really take the time to really familiarize yourself with it and get used to it, it's always going to look alien. And now, we've made it so that you can have even more colors come out of that. But if you don't understand how to get colors out of it initially, then you're not going to understand how to get a wider gamut of colors out of it. And I think people get frustrated. I think there's a real frustration about, well, I don't understand this thing, and now you're making it more powerful and I still don't understand it-
Brian Kardell: Yeah.
Eric Meyer: ... and that annoys me. And why is it so difficult to understand? Why can't I have this thing that it promises in a way that I could actually understand?
Brian Kardell: Yeah.
Eric Meyer: I think that's some of it. I don't know if that's... Maybe it's all of it. I don't know. But I think there's that. And I myself have this perception. I do not really understand LCH. I sort of-
Brian Kardell: We didn't even get to LAB or... Yeah.
Eric Meyer: Right, yeah, exactly. LAB or Display P3.
Brian Kardell: Right.
Eric Meyer: There are these various wide-gamut colors. Each one has its own syntax, et cetera, et cetera. When HSL first came out and I was just like, okay, I get that there's a hue wheel, but other than that, I'm just going to stick with my RGBs. I think there's a lot of that, that these color syntaxes are very not-human-friendly-
Brian Kardell: Right.
Eric Meyer: ... in the way that a color name is.
Brian Kardell: Sure.
Eric Meyer: And RGB, you could say is not really human-friendly, but since it was the only one anyone had to learn at the time-
Brian Kardell: Right.
Eric Meyer: ... we all just learned it. But yeah, eventually, you get to the point where you have three very long decimals, like 0.5787717, and that does a thing, and if you change the decimal by not very much, it can change the color perceptibly.
Brian Kardell: Radically, yeah.
Eric Meyer: And it's like, but how?
Brian Kardell: Yeah.
Eric Meyer: Why? And we have enough color values now that to become familiar with all of them basically requires that you kind of become a color expert. You need to understand color theory in order to get them, and most web developers are not interested in color theory.
Brian Kardell: I mean, we don't need more than eight colors.
Eric Meyer: Yeah, exactly.
Brian Kardell: Crayola says.
Eric Meyer: 216 is the absolute upper boundary-
Brian Kardell: Exactly. Right.
Eric Meyer: ... of what any web developer should ever need. Anyway. Right. So I think a lot of it is just frustration born out of, I don't get this, it's not written in a way that I feel like I can ever get, and I feel like that there are useful things locked behind that experience barrier-
Brian Kardell: Sure.
Eric Meyer: ... or that understanding barrier, which is very human, very understandable. It would be nice if there were more human-readable equivalents to some of these syntaxes, but I don't even know if that's really possible.
Brian Kardell: Yeah. I mean, the problem is that there are just millions of colors. You can't name them all.
Eric Meyer: Right.
Brian Kardell: We couldn't perceive them all. I mean, if you look at even a Pantone book, there are 200 whites. You know what I mean?
Eric Meyer: Yeah.
Brian Kardell: And if you look at any one of them on their own and somebody's like, 'What color is that?' You would be like, 'White.'
Eric Meyer: It's white.
Brian Kardell: But you put it next to another one, and you're like, oh no, they're not the same, actually. And yeah, if you go to Best Buy or whatever electronics store you have near you, and you look at the televisions, the colors don't all look the same, in a lot of cases.
Eric Meyer: Yeah, yeah.
Brian Kardell: There's the HDR ones, and they look different. Much better, in my opinion. But some have a cool cast, some have a warm cast. Color is really, really, really hard, and it would be impossible to name all of the colors and expect somebody to know the names. I mean, you probably know, how many color names are there?
Eric Meyer: 148.
Brian Kardell: 148 color names. And I don't know them all.
Eric Meyer: Yeah. No.
Brian Kardell: I know 20 that I use a lot. And then, beyond that, I use a tool to pick a color-
Eric Meyer: Right.
Brian Kardell: ... and then I copy paste it. And when you look at it that way, the most important feature of the serialization is not so much that you understand it, as much as it can serialize the colors and it can probably separate the important parts of that so that you can do math on it, so if you want to make it a little bit more transparent, if you want to make it a little bit more saturated. And I think all those have those qualities, for the most part.
Eric Meyer: Yeah. And they can be very useful. And under the hood-
Brian Kardell: Yeah.
Eric Meyer: ... to be able... We now have color-mix(), where you can basically say, 'Take this color and make it 30% lighter or 30% darker.'
Brian Kardell: Yeah.
Eric Meyer: Under the hood, I believe browsers are using, I think it's LCH, and then just doing the math. It's like, okay, they want it 30% lighter, do the math, and then it yields a color. And the web author doesn't have to know what the exact LCH or LAB or Display P3 or whatever values they are.
Brian Kardell: Yeah.
Eric Meyer: It's just, I took a color that I got from somewhere, a tool, or I yoinked it off of somebody else's website because I really liked it, and then I wanted to make variants, so I color-mix()ed it. Cool.
Brian Kardell: Yeah.
Eric Meyer: I wonder if it would be possible to change the sentiment towards wide-gamut colors if there was an educative approach of basically, all right, take a color, and if you make it 50% more saturated, now it's probably wide-gamut, but you don't have to care because you just made it more saturated or whatever. And then, congratulations, you're using wide-gamut colors. It would take time in a sustained campaign to maybe change that, but I wonder if that would... Or, I mean, this is a state of CSS survey, it's entirely possible that it's just going to stay like that, because what do you think of the colors that come from these numbers that no human can really decipher - unless they've spent years and years and years training themselves?
Brian Kardell: Yeah.
Eric Meyer: People are probably always going to go, 'Yeah, I don't like that.'
Brian Kardell: Yeah.
Eric Meyer: Well, some people. Anyway.
Brian Kardell: I think this actually maybe hints at or is related to another thing that I thought was interesting, which was in the pain points survey, cognitive overload was a big one. There were 83 variants of people describing choice overload, hard to memorize, poor learnability, excessive complexity. And a lot of it seems to have to do with syntax. A lot of it was around grid versus flex or grid syntax. Not grid, grid is amazing. But I think also, probably colors, complicated functions, and things like that. And I don't know... I'm curious what you think about this, but I wonder how much of it is that it is actually hard to learn versus there's so much to learn all at once. I mean, I do agree. I still have to look up grid stuff. I mean, I just don't use it enough that I have all of the complexities of grid memorized. I have a few things that I do pretty regularly that I don't have to look up, but if I want to do anything remotely complex, I have to look it up.
Eric Meyer: Yeah. I think it's probably an 80/20, where I think 80% of it is there's so much-
Brian Kardell: Yeah.
Eric Meyer: ... and the other 20% is probably a mix of things. I think hard to memorize is part of the first 80%. It's hard to memorize because there is so much-
Brian Kardell: Yeah.
Eric Meyer: ... and choice overload is because there is so much. But I think the other 20% is things like, I don't like the way that this feature is specced. The way that the spec calls for things to happen in the way that browsers have implemented it, I just don't like, I think that's part of it. I think there's the feeling of it's difficult to grasp, it's difficult to learn. Part of that could be there's too much, but it could also be, this thing I'm trying to learn, we'll go back to wide-gamut colors for a second, I'm trying to learn how to do wide-gamut colors and none of this makes sense.
Brian Kardell: Yeah.
Eric Meyer: It's just a bunch of numbers that have no relationship to anything that I can see. I mean, it did surprise me that the absolute number one top pain point as an area was grid and that that had gone up quite a bit. It was 31% for grid as a topic area, which is plus 9%, which I think means it was 22% last year and 31% this year. I don't think it went up by 9%.
Brian Kardell: I don't have it in front of me right now, but if my memory is correct, I think that it has to do with subgrid and grid lanes.
Eric Meyer: Yep, that's correct.
Brian Kardell: So it's not like... That's one of the things that's difficult about when we evolve features on the web, and it's like, the pain points for grid went up. And it's like, well, no, the features of grid went up, and the pain points around the new features went up.
Eric Meyer: Yeah.
Brian Kardell: Yeah.
Eric Meyer: No, absolutely. Yeah. I mean, the fact that grid is at the top of the list is because it was like 7% of people listed grid lanes as a pain point and 5% listed subgrid as a pain point, and you would have to dive in. Grid lanes could be, well, it's not universally supported yet could be all the pain points, or it could be, I liked the name masonry better than I liked the name grid lanes, so I'm going to do it for that.
Brian Kardell: Yeah. Right. Exactly.
Eric Meyer: Or it could be, well-
Brian Kardell: You changed it multiple times.
Eric Meyer: ... I used it and it's what I want, but it just doesn't act the way that I thought that it would.
Brian Kardell: Yeah.
Eric Meyer: And grid track sizing is on there as well. It's literally 1%, but that still contributes to the topic area. And I've got to say, I get that. I mean, grid track sizing, I think, is surprisingly understandable, given the complexity of the problem. Because how tables lay themselves out is already amazingly complex-
Brian Kardell: Oh yeah.
Eric Meyer: ... actual tables.
Brian Kardell: Yeah.
Eric Meyer: And grids are so much more complex and so much more powerful. And so being caught up by, well, I thought that this is what this track was going to be sized as, but it's actually a different size, and that annoys me-
Brian Kardell: Right. Yeah.
Eric Meyer: ... that's going to happen. I really need to look at the details on Flexbox, because Flexbox was like number three and it had risen quite substantially. But when you open up the topic area, the only single thing that's listed is flex-wrap balance. Interesting. But yeah, like a hundred people commented, so I've not read all 100 people's comments on why they ranked Flexbox as a pain point.
Brian Kardell: Yeah.
Eric Meyer: Just like I have not read every single one of the 193 people who commented about grid. So yeah, the cognitive overload, I mean, I get it. CSS is very large because it has had 30 years, just about, to evolve and to grow, and it's doing its darnedest to allow people to describe, in a human understandable way, basically the sum totality of visual presentation.
Brian Kardell: Very hard. Yeah.
Eric Meyer: You're never going to have a compact syntax that does that, right?
Brian Kardell: Yeah.
Eric Meyer: And I think this is where I've been seeing just in the general discourse, 'CSS is so bloated.' It's not bloated. It just has an incredibly huge problem space it's trying to cover, or an incredibly huge feature space really that it's trying to cover. I think the only way that you could claim that a presentation language is not, quote, unquote, 'bloated' is if you literally had several presentation languages, each one in its own little domain that they could talk to each other. But, I mean, we have that, it's called CSS, because... Well, I really care about layout. Why do I have to learn all this other stuff about typography, or vice versa?
Brian Kardell: Yeah.
Eric Meyer: There's just so many things. And I think the only way that we're going to make this not a pain point is for people to let go of the idea that they need to be able to hold the entire thing in their head.
Brian Kardell: Totally, yeah, totally. And I don't think that most people do, and I think that that's why it's problematic. I think that what a lot of people want to do is... I don't know if you have this kind of saying where you're at. But if you're like, 'Well, how do you get to X, Y, Z?' And we say, 'Well, I wouldn't start from here.'
Eric Meyer: Okay.
Brian Kardell: So a lot of people don't start from a HML page and a blank CSS sheet. When you look at the usage in this, so many people use Tailwind, and I'm amazed at how many people still use Bootstrap and things like that. But, I mean, it really does make sense to me, in the sense that if you're the average Schmo, just want to make a website, you know what I mean, or you're making a website and it just needs to look good, it doesn't need to look like anything special, it just needs to look acceptable to start, you don't want to start from the default style sheet. So yeah, I am surprised, but I'm also a little bit disappointed that we're not doing more agreeing in communities about how we construct things, that we're doing it just completely differently. Because Bootstrap has some nice patterns. We could have a CSS Zen Garden for Bootstrap. You know what I mean? Where it's like... I don't know. I don't see anybody cataloging and being like, here are the top three ways to start, and here are their design philosophies behind them, and let's try to build momentum around them and just see which one or ones take off and build a higher level language, sort of, almost. I think web components are a great example of what we could be doing here.
Eric Meyer: Okay.
Brian Kardell: But again, we're not doing any study. We're not really doing any promotion to help adopt. Everybody's got their own use fast, use Salesforce... I can't remember what they're called. Use material elements.
Eric Meyer: Yeah.
Brian Kardell: Use my one-off, use whatever. And, I mean, it's all great. I love that we can do that. I just wish that we were helping developers build a more complex language on their own, like their own slang. That's the whole idea of it. We should be able to build a slang that we can all share and work off of.
Eric Meyer: Yeah.
Brian Kardell: I don't know if that makes sense. But I would love to... Well, you made one of the... Did you make the first or one of the first resets?
Eric Meyer: One of the first. It wasn't the first.
Brian Kardell: Yeah. But same kind of principle there, is you don't want to start from the UA default, right?
Eric Meyer: At the time, it was because UA defaults were actually visibly different.
Brian Kardell: Yeah. Right, right. But it's the same idea, right? The same idea-
Eric Meyer: yeah.
Brian Kardell: ... it's like, what if we just had a few, call them, better UA defaults that included maybe even some really common patterns or custom elements that people could apply?
Eric Meyer: Yeah. Brad Frost was trying to do this, right? With the global design system that he was...
Brian Kardell: Yeah. Yeah. He was very... Much more than I'm talking about, but yeah.
Eric Meyer: Sure.
Brian Kardell: Yeah, yeah. Yep, definitely.
Eric Meyer: Yeah. One of the things that I would like us to be able to agree on more, that the results show that we didn't, is testing for other media. So I think you pointed out like 34% test with a keyboard.
Brian Kardell: Yeah.
Eric Meyer: Why is it that low?
Brian Kardell: It's very easy to test with a keyboard, right?
Eric Meyer: Well, it seems like... I will say, as someone who does try to test with a keyboard, most of the time, you find yourself tabbing through all of the... Or at least I find myself tabbing through all of the tabs in my browser Chrome and all of the things in my browser Chrome, and then I finally get to the page. I just want to skip to the page, and I'm sure there's a way to do it. But yeah, I was testing with voiceover recently, and because I'm not used to it, I was having the wide-gamut colors experience, where it's like, no, go here. I'm in a web browser. Read the webpage. Why are you reading the web Chrome, the browser Chrome?
Brian Kardell: Yeah.
Eric Meyer: Anyway. I think there's probably a fair amount of that. I mean, what else surprised you in that area?
Brian Kardell: 13% tested printing, which I'm surprised it's that high.
Eric Meyer: Yeah.
Brian Kardell: Yeah. There are other things listed in there, like TV consoles, smartwatches, console video games, and stuff like that. If you added all of those together and then multiplied by a few, printing is there. It's still more than all those. So yeah, I don't know. I'm somehow surprised that more people care about printing than other stuff. I'm a big proponent of printing, and I can be totally honest with you and tell you that I have not tested printing on a lot of websites I've developed.
Eric Meyer: Yeah, yeah. No, understandable. But yeah, a third of people or a third of respondents saying that they test with a keyboard, I mean, that's definitely one of those, well, I'm glad it's that high, and I'm also disheartened that it's that low. I was afraid it would be much lower, and at the same time, I wish it were higher. I wish it were much closer to 100%, because, yeah, there are quite a few people who are navigating by keyboard or a keyboard-like interface.
Brian Kardell: I guess one of the problems with surveys is that you could interpret questions differently, right?
Eric Meyer: Sure.
Brian Kardell: So you were saying that you find yourself tabbing and you just want to get into the page. I mean, I assume that that means that you do some keyboard testing, but it's probably not very thorough?
Eric Meyer: Right.
Brian Kardell: I think it's painful and annoying. But if I were you, I would still answer, 'Yeah, I do.'
Eric Meyer: True. Yeah.
Brian Kardell: But I can imagine somebody who does that saying, 'No, I mean, not really.'
Eric Meyer: There's no option for, 'I tried.'
Brian Kardell: Exactly, exactly. So yeah, that's one of the challenges with surveys. And there are a lot of challenges with surveys. The people who are answering, are they the same people every year?
Eric Meyer: Right.
Brian Kardell: No. Are they the same amount of people? No.
Eric Meyer: No. Are they representative of the world at large?
Brian Kardell: No.
Eric Meyer: No.
Brian Kardell: Yeah.
Eric Meyer: Right. Because, yeah, I mean, this is a thing that you do always need to keep in mind-
Brian Kardell: Yeah.
Eric Meyer: ... is that the results of a survey tell you what the people who took the survey think right?
Brian Kardell: Yeah.
Eric Meyer: So Dewey Defeats Truman is the-
Brian Kardell: Yeah. Right.
Eric Meyer: ... classic US history example, where the newspaper, a big newspaper in Chicago, I believe it was, had done a telephone poll, and based on the results of their telephone poll, they were like, 'Oh, Harry Truman is losing this election. It's not even close.' So huge headline, 'Dewey Defeats Truman,' that went out. Well, Truman won.
Brian Kardell: Yeah. They went ahead and printed the newspapers.
Eric Meyer: Yeah.
Brian Kardell: Yeah.
Eric Meyer: And there's a picture of Harry Truman holding it up and laughing, because Dewey did not defeat Truman. And it turned out it was because, well, at the time, people who could afford to have a phone line and telephones in their house were much more likely to vote for Dewey than they were for Truman.
Brian Kardell: Yeah.
Eric Meyer: So the result of the survey was really Dewey defeats Truman among people who have a telephone in their house, right?
Brian Kardell: Yeah.
Eric Meyer: This was the 1950s, so we hadn't nearly gotten to the point of, well, I don't answer it if I don't know who it is. You never knew who it was. If someone called you on your phone that you had spent all the money to get and could afford, of course you were answering the phone. Anyway. So yeah, when we look at the results of this, this is the results, these are the pain points of people who answered this survey. It is not necessarily the pain points of the entire industry writ large. If you could somehow get every single person to answer just that question and you had hundreds of thousands or millions or however many people, we don't even know how many people are really in this field, then maybe the pain points would be shuffled a bit or completely different. You just don't know. And we can see that there's a trend here that I have seen with other surveys that I've been involved with, where if you go back a few years, nearly 10,000 people were filling out the survey. This year and the last year were half of that.
Brian Kardell: Yeah.
Eric Meyer: And so that's a big change. We saw that with the A List Apart survey for people who make websites. that's one of the things I did at A List Apart was helped run that and process the results and everything. The first year, it was five digits. It was a five-figure number of respondents, and it just went down year-over-year, until by the last time it was done, it was a few thousand people.
Brian Kardell: Yeah. I mean, I wonder actually, because you have a way that you boost the survey.
Eric Meyer: Yeah.
Brian Kardell: It probably maxes out its reach at some point, right?
Eric Meyer: Yeah.
Brian Kardell: Who's going to see it?
Eric Meyer: Yeah, yeah.
Brian Kardell: And then, within the who's going to see it, not within who's going to see it, who it potentially reaches. So that might mean through newsletters, through podcasts, through whatever social media channels.
Eric Meyer: Right.
Brian Kardell: And of those, how many will actually even see it? And then, of those, how many people are going to take it? And I wonder if it is the same people year-after-year, do they just get tired, or do those same people move on in their career often? They aren't maybe in a position where they see it anymore or where they have the time that it takes to take it. And yeah, I mean, I wonder if it's inevitable with a thing that we do like this, that it will decline at some point from some peak.
Eric Meyer: Yeah.
Brian Kardell: I don't think though that 10,000 is a hard peak. I mean, there's so many developers in the world.
Eric Meyer: Yeah.
Brian Kardell: But I do think that is inherently somehow skewed toward people who are secure enough in their career and their life that they can take the time-
Eric Meyer: Yeah.
Brian Kardell: ... to fill out a fairly long... It takes a bit. You have to get away from distractions and go do it.
Eric Meyer: Yeah. It's a commitment.
Brian Kardell: Yeah. Speaking of which, I want to just randomly change the subject completely-
Eric Meyer: Okay.
Brian Kardell: ... to something that I think is interestingly related. Kevin Powell-
Eric Meyer: Yeah.
Brian Kardell: ... I think it's Kevin Powell anyway, is doing this kind of like Family Feud game. If you're not familiar with Family Feud, it's, 'We asked a hundred people this question,' and then you guess what the answer is. I haven't seen him do it. I don't know how it's going to work or whatever. But he is doing this thing where he has a poll website and he posts it, and then he takes the first hundred answers, whatever. And what I like about that is one question a day. We have this conversation about how do you follow news, and how do you... You have to make it really, really accessible so that people can participate for just a minute. You know what I mean?
Eric Meyer: Right.
Brian Kardell: I don't want to ask too much of your time. I really like about that that it is steadily engaging and no question is really too hard. You can ask one every day. I'm happy to give him one minute of my time every day, you know?
Eric Meyer: Yeah.
Brian Kardell: Yeah. So I don't know, maybe there's a way that we can think about other ways to do this that are like less... That's the relationship I'm trying to make here. As opposed to a great big survey, what if we somehow collected less information over a longer period of time?
Eric Meyer: Okay. Yeah. So instead of devoting an hour every year, once a year-
Brian Kardell: Yeah.
Eric Meyer: ... you devote a minute every other day.
Brian Kardell: Yeah.
Eric Meyer: And you could potentially collect more.
Brian Kardell: Or even to collect the same. We could send one question a week. You know what I mean? Yeah.
Eric Meyer: Yeah. I mean, it does very much depend on what you're trying to do.
Brian Kardell: Sure.
Eric Meyer: Of course, the advantage of big monolithic surveys like we did at A List Apart and the state-of surveys do is that then you can start doing things like, okay, well, what are the patterns we can see with people who answered this question this way? We're just going to take that section-
Brian Kardell: Sure.
Eric Meyer: ... of the respondents and say, the people who said that grid is a pain point, what else did they say? What are the patterns that fall out of just that cohort?
Brian Kardell: You could still do that at the end of the year.
Eric Meyer: Except you can never... Unless you're associating every vote with a person.
Brian Kardell: Yeah. You would have to. You would have to.
Eric Meyer: Okay. Yeah. Right. And then, it's not anonymous anymore and there are some real questions about that, and so on and so forth. But okay. So yes, you could potentially design it in such a way that you still had that ability.
Brian Kardell: It could still be anonymous. We could make it a PWA that just collects all of your information locally over the course of a year and then uploads it all in bulk, or-
Eric Meyer: So it fingerprints you?
Brian Kardell: How would it fingerprint you?
Eric Meyer: Well, because it collected all this information about you.
Brian Kardell: No, but if it's a PWA, it can store your answers in local storage until you have a bulk, and then you just upload it as if it were one giant form post.
Eric Meyer: I see. Okay. Well, maybe.
Brian Kardell: I mean, you risk all kinds of things there. Like, what if you lose...
Eric Meyer: Sure, your laptop or something.
Brian Kardell: ... you switch phones or... Yeah. There's all kind of ways you could just lose the data. But I don't know. I mean, I feel like we could figure it out.
Eric Meyer: Yeah. Okay. Now that you put it that way, that is very interesting. Maybe we just get Kevin to do it. Hey, Kevin.
Brian Kardell: Yeah, exactly. I like that..
Eric Meyer: Upgrade it to be like, 'Do this,' and then...
Brian Kardell: Yeah.
Eric Meyer: Yeah. And he's got... Is he up to 1.1 million on YouTube?
Brian Kardell: I don't know.
Eric Meyer: He's over a million, I know that. That happened a little while ago. But yeah, he's got a whole lot of followers on YouTube. So if he promoted it beyond the Family Feud thing that he's doing-
Brian Kardell: Yeah.
Eric Meyer: ... he could probably get quite a few people to engage with that.
Brian Kardell: Cool. Is there anything else that you thought was interesting or compelling or that you wanted to talk about with the...
Eric Meyer: I mean, there's a lot of things, but I think we're running out of time.
Brian Kardell: I want to go back to the resources, where I mentioned early on that we were on, and you just mentioned Kevin Powell. I'm trying to scroll to see if I can find it somewhere. Oh yeah, here, web platform resources. The question is, 'Which of these resources do you consult to stay informed about web platform features?' I guess this was multiple choice-
Eric Meyer: Okay.
Brian Kardell: ... maybe. No, it can't be multiple choice. I don't know.
Eric Meyer: Okay.
Brian Kardell: Or there's some write-ins or something. But MDN is far and away number one, so shout out to Open Web Docs for continuing to help maintain MDN.
Eric Meyer: Yeah.
Brian Kardell: And they could use your donations. Igalia has been a founding sponsor of that. Yeah.
Eric Meyer: Yeah.
Brian Kardell: But CSS-Tricks made a big jump, again, now that it's active, 55% higher than it was last year-
Eric Meyer: Right.
Brian Kardell: ... to pass W3C. So what surprised me is twofold. That first, W3C is number four on this list, and it's only slightly higher than web.dev, which is the kind of Chrome-led thing that Rachel Andrews was leading, which is a good resource. But I don't see WHATWG on here anywhere-
Eric Meyer: Yeah.
Brian Kardell: ... and that's interesting to me. So I'm wondering what are people... Because I would think W3C, they must mean for specifications, right? It must mean that.
Eric Meyer: Yeah, that seems likely.
Brian Kardell: So if you're reading specifications, don't you use WHATWG? I find myself on the WHATWG spec a lot. They have like 21 specs now, I think.
Eric Meyer: Yeah. But as an example, I don't think very many developers really consult the HTML specification, or if they do, they do it once a year.
Brian Kardell: Interesting.
Eric Meyer: And so they're not really going to think about... When they're doing the survey, they're not going to remember that one time they looked up what all the attributes were for the <dfn> element.
Brian Kardell: Why do you think they do for W3C specs then?
Eric Meyer: Well, because that's where all the CSS specs are.
Brian Kardell: Yeah. But, I mean, I assume that you're not saying that people don't have to look up things in HTML. I'm sure they do all the time. They just do it on MDN.
Eric Meyer: Yeah. But MDN doesn't cover everything. It tries to, but it doesn't. And MDN also will point at the specification, so probably a lot of people who end up on WHATWG probably got there from MDN. They're reading about the element, and they get to the bottom and it's like, 'Okay, well, here's a link to the spec.' It's like, okay, click. But that's as far as it goes. Whereas they're much more likely to do that maybe with CSS, particularly things like anchor positioning, new stuff. I don't know.
Brian Kardell: But, I mean, there are maybe 20 entries here. And when I say WHATWG isn't, I don't mean that they're not high on the list, I mean they don't appear on the list.
Eric Meyer: Yeah. Literally not there.
Brian Kardell: Yeah.
Eric Meyer: Might be individual other answers.
Brian Kardell: Andy Bell is on the list, right?
Eric Meyer: Yeah. Andy Bell as a person, yes.
Brian Kardell: Yeah.
Eric Meyer: From one of the freeform text fields. But yeah, I mean, other answers is number 16. It's 4% of the respondents. 146 people gave another answer, a different answer. But they don't make it easy, there's not a click and see what the complete list is. You can export the data and see it that way, which I haven't done yet. So maybe WHATWG shows up in there once or twice, maybe. But yeah. And actually, looking back at the list, you said web.dev is number five. And then, Chrome for Developers, YouTube page, I believe, is number six. Well, it's also a website. So anyway, if you add Chrome for Developers and web.dev together, you get 55%, which just barely loses out to CSS direct at number three. And it actually interested me, number two is Can I Use.
Brian Kardell: Yeah.
Eric Meyer: So MDN has a higher consultation rate than Can I Use.
Brian Kardell: Yeah.
Eric Meyer: Which doesn't entirely surprise me, because a lot of the reason that people would go to Can I Use is also available on MDN.
Brian Kardell: Right.
Eric Meyer: You've got the baseline thing across the top in a lot of cases, and then you have the support chart at the bottom, which is what Can I Use is based on, is the same data that drives the browser compatibility charts on MDN. But yeah, it was 91% and 80% for those two, for MDN and then Can I Use. I mean, yeah, I use them both, even though MDN hypothetically gives you everything Can I Use could give you. I think the difference with Can I Use is that not only does it show you that support chart, but it also says, 'Okay, here's the exact percentage according to browser stat or global counter,' I don't know, whatever they're using, to say, 'okay, well, supporting browsers are 85.3% of the global browser population, according to whatever our data are, they're 97.1% or they're 52%.' If you don't have a specific profile in mind, sometimes that can be useful to just glance and be like, okay, it's too soon for this.
Brian Kardell: Yeah.
Eric Meyer: Or why am I not using this already? MDN doesn't do that, I think rightly so, because the thing with Can I Use is, again, that's a survey. And what you're getting when it says, 'Here's the global percentage of this version of this browser,' what you're really getting is the percentage of this version of this browser among the sources that are used to collect that information-
Brian Kardell: Yeah, yeah.
Eric Meyer: ... which is not necessarily the same as the world.
Brian Kardell: Yeah.
Eric Meyer: But those have always been, ever since browser adoption stat trackers existed, that has been a caveat and an objection to those.
Brian Kardell: Yeah.
Eric Meyer: So anyway. And that brings us right back to your survey tells you what people who answered your survey or what... Basically, it gives you great profile of your data source-
Brian Kardell: Yeah.
Eric Meyer: ... and not necessarily of the sum totality of reality. Anyway.
Brian Kardell: So I think we're long, so we should probably wrap it up.
Eric Meyer: Yeah.
Brian Kardell: I would like to say thanks to all the people who do this work to run the survey and publish it and analyze it and-
Eric Meyer: And fill it out.
Brian Kardell: I was just going to say, and filled it out, yeah. And next year, if you have the ability, do it. It is helpful to all of us. Yeah. Great.
Eric Meyer: And thanks for those of you who filled in Igalia Chats.
Brian Kardell: Oh yeah, thanks.
Eric Meyer: On the podcast list.
Brian Kardell: Yeah.
Eric Meyer: Appreciate that.
Brian Kardell: Tell your friends. Don't forget to smash that like and subscribe.
Brian Kardell
Eric Meyer