Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another CSS-powered episode of the ShopTalk Show. I'm Dave--in the shed--Rupert. With me is Chris--in the booth--Coyier. Hey, Chris. How are you doing today?

Chris Coyier: I'm doing absolutely fantastic. Thanks, Dave. Thanks for having me on your show on this 580th edition of ShopTalk Show. My pleasure.

Dave: Look at this. This is great.

Chris: Dave and I hung out earlier.

Dave: We did hang out. We hung out and we shared sneak peeks of the apps we're working on. Yeah.

Chris: Yeah, you've got to do that. Some of the people you think you know the best, it's like, do you actually know what they're working on? You should take the time to find out because that's always a nice thing to do.

But this is a guest episode. And like Dave alluded to, of course, it's going to be very heavily about CSS because we have a CSS survey that's just about to drop a bunch of 2023 data on us that's going to be great. We have one of the people who was behind and helped with the survey this year, Hui Jing Chen. Hi, Hui Jing. How are you?

Hui Jing: Hello, hello. Doing well. It's good to see you.

Chris: Oh, yes. Great to see you, too. Can't wait. You're in Singapore at the moment, as we speak?

Hui Jing Chen: Oh, yes. Yes, I am.

Chris: Ah, wonderful. I can see a fan blowing on you. Probably highly necessary there.

Hui Jing: One hundred percent.

Chris: [Laughter]

Hui Jing: It's actually necessary 365 days of the year. Can't live without it.

Chris: [Laughter] Yeah. Yes. Yes. Not known for its cool fall weather.

Hui Jing: Oh, no. Not at all.

Chris: No, but you are known for being a long-time CSS advocate and stuff. We were just saying before the show -- we were hanging out -- that you're approaching your ten years (surely longer than that) of being involved with the Web and IT work and Web work and all that. But ten years of real true, gainful employment, I believe you put it. A decade anniversary.

Hui Jing: Yep, coming up soon.

Chris: That's great. You don't get a pin or anything, but you do get spicier opinions.

Hui Jing: Oh, for sure.

Chris: Yeah. [Laughter]

00:02:13

Hui Jing: I want to say I get spicier opinions, and then yet I also mellow out. So, it's like an internal monologue that, like, "I'm mad at this," and then you're like, "Oh, but I'm tired." So... [Laughter]

Dave: [Laughter]

Chris: Yeah. You're wrong, but I'm not even going to tell you.

Dave: Yeah. My energy to correct the situation is just not there, so you know.

Chris: No. No.

Dave: Hey, I'm going to let that one go.

Hui Jing: Yeah. A lot more shruggies at this age, it seems.

Chris: [Laughter]

Dave: Yeah. Yeah. When you've been through a few, you can just say, "You know... I don't care."

There's a current trend... sorry, about Web components and they're downsizing... a few blog posts, and I'm in some chats about Web components. I'm just like, "Let it roll. If people have problems, let's write them down. Let's collect some feedback." But I think, for some people, they're just like, "Oh, I'm so mad. There's one thing wrong with that post." I'm like, "I don't care, to be honest."

[Laughter]

Hui Jing: It's a lot of energy to be so mad about something. Sometimes I think about it. I'm like, "Wow. You must really feel very strongly about this thing to expend energy on it, but good for you." That's what I think now.

Dave: Good job being mad.

Chris: I think I saw Nolan Lawson's follow-up post for yours, Dave, and it was very nice. It was just like, "Web components are fine. You know what? They don't even need you. Enterprise has decided they're fine. So, if you're not cool and want to whine about it, that's okay. Enterprise will be over here using them, so bye-bye."

All right, so the relevant URL is stateofcss.com. Pretty nice. Pretty nice URL there. And Hui Jing, you were involved a little bit this year. Can you tell us how? What was it like putting the survey together, and what were you thinking about? What was your role?

00:04:02

Hui Jing: Yeah, so this State of CSS survey has run for, like, this is the fifth year, and it's the brainchild of Sacha Greif, right?

Chris: Mm-hmm.

Hui Jing: He has reached out to folks to help in recent years. Last year was Lea Verou. This year he reached out to me, and I thought it would be cool to help out.

Basically, I helped out with sort of going through, what are these features that we want to feature this year? It's not like I'm some professional survey UX developer person, so it was a lot... I used to take the survey. I took the survey every year. I didn't really think too much about it other than, like, "Hmm... Wow. I wonder if other people know about this feature?"

But when you're putting it together, you're like, "Huh... Should we--?" There are literally 500 CSS features, right? Of course, State of CSS is like, "Do you want to include only the new ones?" But there are some... new, right? New in CSS land is not a definitive word because--

Chris: No... Yeah.

Hui Jing: Is new something that the browser just put in? Is new something that the spec just got written? Is new something that was around for five years but somehow just caught on?

New is not an easy metric to fill, so it was basically going through the list of what we had from last year. Do we keep this? Do we drop this? Then are there any new ones that we want to add?

We had some... They're not hard and fast rules. We had some broad criteria. It's like if the... There should be an implementation, so it's not pie in the sky kind of situation.

Chris: Yeah, okay.

Hui Jing: But then you also don't want... If there was something that was consistently, like, more than 90% for a couple of years, we're like, "Yeah, I guess we can kind of drop that to save some space now." So, that was an--

Chris: Like Flexbox or something? You're like, "Yeah. Yeah. We all know what that is."

00:06:04

Hui Jing: Yeah. We did drop that one because we were like, "Yeah, I think people have learned about Flexbox by now." Then we kind of dropped that one.

I found it a really good exercise to go through the whole list with Sacha. Then the one that I spent more time on was the missing features and pain points part because, okay, that part kind of veers into survey design land, which is not either of our expertise. But what we found last year is that we gave people free-form fields, and it was not easy trying to go through the data because you had to normalize the data. Then you're going to have funky answers, somehow, like Safari became a thing, like an actual category. That's not a CSS... Okay, guys.

Chris: [Laughter]

Hui Jing: I can tell you're angry. It's fine. So, this year, we tried a different route. We tried some prefill, so options. I think we did about ten, and then a free-form field.

I know because I read two articles on the thing. I read about how people tend to go for defaults. At the back of my mind, I'm like, are we influencing people that, "Oh, these are the top ten things that you should be thinking about?"

But on the other hand, I used to draw stuff, like customized shoes and stuff. My personal experience is that when people give me a theme, it's much easier for me to be creative and think about more new ideas versus, "Oh, no. Just do whatever you want." That is so hard.

I feel like this style of asking people... Because it's not like a feature. A feature is pretty black and white. "What pain points in CSS are you experiencing?" Or "Do you think there are any missing features?"

I feel like providing... We did research. Full disclosure. Chris, you wrote a CSS wish list kind of thing, and I used that as a reference. I'm like, let's see what all these top CSS folks wish they had and compile it down to ten features and interview people on it.

I wasn't expecting the result I was expecting based on that ten that I put up. I'm like, "Yeah, yeah, we can talk about this." Can I reveal what it is now? I'll reveal what it is now.

The top missing feature was actually animating to auto.

00:08:51

Chris: Yes!

Hui Jing: And I didn't think about that.

Chris: Ah, yeah! Totally. Let's take that as number one. I love it. Yeah.

Hui Jing: Yeah, and I'm like, "Oh, wow. Wait. Actually, that makes sense because I myself have done it." I'm like, "Oh, man. There are so many ways and all of them suck. It's terrible."

Chris: They do. They do. They all suck.

Dave: That's a good one just because if you've hit it, you've been bitten by it, and you've done terrible things to try to solve it. Ugh. It would be so great to just have, right?

Chris: Right. Right.

Dave: Just give it to me.

Chris: You know what's almost... I almost am nervous about us not getting it now because view transitions kind of does it. If you just remove something from the DOM, view transitions can do the thing where it squishes it down to zero, essentially, the missing gap. You're like, "That's kind of what I was trying to do anyway," so maybe the incentive is a little less to do it. But I still want it! Don't forget about it because animating in is still hard.

Hui Jing: And the fact that you talked about view transitions, it's a new feature. If you think about it, it's also very interesting how the mindset ought to change now ten years in. I say ten years because that's my anniversary.

It's that browsers are really capable now and there were some big projects that happened. We probably didn't expect them to happen, like the huge Chromium view. It was such a big project that I think, at some point, nobody thought anybody would rewrite anything at this point.

Chris: Hmm...

Hui Jing: Chromium did their huge rewrite. Back then, Firefox was like, "Oh, let's do this whole new server and a whole new engine called Servo." Now they're porting Servo.

I feel like we didn't expect that browsers would get so good. And so, the things that we use, like even the spec authors and some of the browser engineers are probably going, "Ah, we can't really do that. The browser can't do that." Now we're like, "Oh, actually..." [Laughter] Well, actually.

00:10:51

Chris: There's a little follow-up from last week's show. Our friend of the show Brian Cardell chatted in with us in the D-d-d-d-discord because we were whining about regions. Speaking of CSS wish list. I was, anyway.

Like, oh, that could be a cool thing that CSS does. I don't know if it made your list this year, but I'm kind of a fan of the idea of being able to flow content between arbitrary cells or grid regions or something.

Brian said, you know, because of the... I think this is what he was saying. Sorry if I got it wrong, Brian. You said all these browser rewrites, when that was happening and being talked about, that was pre- some of these rewrites. And because of how CSS has evolved, it might actually be easier now. It was kind of a hard no before, but it's a maybe now. [Laughter]

Hui Jing: Yes.

Chris: It's like, yeah, cool.

Hui Jing: Yes, and Lea highlighted this last year, too. Even last year, it's starting. People are starting to, like, "Oh, wait. We need to revisit some of these hard no's because the browsers are different now." And so, like :has(), :has() was just the hot property. Let's say, 2023, it's the hot property, the :has() selector.

It was something that was almost deemed a hard no, and browsers were like, "Well, actually. Hey, guess what..."

Chris: Yeah. Wow.

Hui Jing: I won't say anything is possible. But I want to say that some of these hard no's -- like you said, Chris -- are now maybes. I think that's a good enough evolution for me.

Chris: Let's keep going on that thread. Yeah, go ahead, Dave.

00:12:32

Dave: I was going to say, I really like that idea. Like you said, Firefox redid its whole engine. Chrome was like, "We can't do Subgrid." They still don't have Subgrid (as of the day we're recording it) because they were like, "Oh, we have to redo the whole layout engine." Some massive things have happened under the hood, and it's just incredible that everything... I don't know. Yeah. It's been this sudden... I think we didn't all realize, "Oh, yeah, all the browsers had to stop for a while, working on CSS." [Laughter] Now they can start doing stuff again, so it's very cool. Color was a big one for everybody, too, to kind of stop and work on.

Chris: Yeah. As we speak, Subgrid is just starting to land across all of them now, right? That's a big one.

Hui Jing: Yeah. Yeah, Chrome has... I'm not... Okay. Confession. I don't actually use the stable versions of browsers on my computer. I have Canary.

Dave: Ooh... Risky business. Oh, wow!

Hui Jing: And so, sometimes I forget, and then I use this feature, and then my lovely colleagues who are not developers are like, "Um... This thing looks funny." And they're so cute about it because they think they did something wrong. I'm like, "Oh, no. That's all on me. I'm sorry."

So, I did run into that for a personal favorite of mine. This year's personal favorite. It's text wrap balance. It's so benign. It's like such a tiny little thing, but I love it because I don't know your Web developer experience. But through my career, the number of times I've had people -- designers, content writers -- come and, like, "Hey, Hui Jing, um... you know it would be nice if we could make that heading not have an orphan." In my mind, I'm like, "Yeah, at one breakpoint. There's going to be another breakpoint where it's an orphan. What do you want me to do?"

But I'm like, "Um... Okay. Let's do that," in my professional face. I'm like, "Okay," and then do I don't know how many lines of break pointing. Or there's a max. Let's do a max width and all kinds of hacky shit.

Chris: Oh, yeah. Yeah, sure.

Hui Jing: Now they come up with text wrap balance. I'm like, "Bam!" I love seeing now that the browsers are capable. It's like, "Browser, you do it."

Like, Chris, you were saying. Get other people to do the work. I'm like, "Get the browser to do the work for you."

Chris: Yeah. Yeah.

Hui Jing: I feel like this is a pattern that started since Grid because one of the stories around Grid was, like, "You tell the browser how many columns you want, and then the browser will figure out how many columns it will give you," because the browser knows best. The browser knows how much content there is, and it knows how much space it has. And so, let the browser do it. Stop telling... Stop micromanaging your browser.

Chris: Ah, yeah. That's like the Andy Bell thing, right? Be the browsers mentor or something.

Hui Jing: I like that concept, and I feel like gradually, as, well, kudos to the browser engineers who really sat down and did all of this major rewriting work that now, moving forward, we potentially can have more, tell the browser to do stuff, situations.

I'm very excited. Even though I don't sound excited, I am so excited inside.

Chris: Have you seen--? I feel like it's going to short out to be text wrap balance on headers and text wrap pretty on paragraphs - or something. I just learned that the other day that the pretty value for it is actually just for the orphans - or the widows or whatever.

Hui Jing: Yeah. Yeah.

Chris: It's impossible to know.

00:16:19

Hui Jing: It's actually quite complicated, and I feel like I'm pretty lucky because I'm not a browser engineer, but I am part of this W3C working group for Chinese language requirements because I do speak Chinese.

Chris: Mm-hmm.

Hui Jing: I always like having discussions with them because it's not Web specific. It's just like Chinese layout for digital and stuff. But then it kind of reminds me again that, oh, different languages do have different requirements for these typography-specific CSS.

The reason why the line breaking, word breaks, even this text wrap is kind of a line break property is because the algorithm behind, it used to be that browsers chose... The reason why lines break the way they are today is because the browsers weren't good enough to do the smart algorithm like some software does. The design software does it nicely, but the browsers don't. And designers are like, "Ugh. Why can't the browser do that? My design software does it."

It was a performance thing. But again, back to the rewrites thing. They're revisiting this because, "Ah, we think we can do the good algorithm this time."

Then there are other things, like some of my colleagues who are involved because I help out with translations and stuff for this Chinese language thing. They're legit in the publishing industry and everything. They're like, "Uh, actually, the algorithm looks weird on Chinese text. It makes it uglier. We need to talk about that."

Dave: Oh, wow.

Hui Jing: And so, they're involved in the discussion as well. So, I'm just very fascinated by all of those discussions.

Chris: It makes it uglier. Oh, no!

Hui Jing: For certain languages. Right now, It's a bit like Latin-heavy, and that's just how the Internet works. Right?

Chris: Right. My first learning of that was that I was a young man then. I had this post on CSS-Tricks called "Nth Everything," and it was one of my first calls for something I wanted in CSS because you know we have Nth... What do we have? Nth child, certainly. But there's some Nth--

Hui Jing: Nth... Yeah. Nth child.

Chris: Yeah, Nth of type, but there are some text-based Nth, too, isn't there? There's like first letter anyway.

Hui Jing: Yes.

Chris: You can do first letter in CSS, right?

Hui Jing: Yeah, yeah.

Chris: But you can't do Nth letter two. You can't grab the second letter, right? You can't do Nth word. You can't do Nth line. There are all these things that you can't do Nth of, even though we have Nth stuff. I was like, "I want this!" In my ignorance, kind of. And some of the pushback was, like, "But what does that mean across languages? What does Nth letter in Chinese?" It has a little bit of different implications there if it's a language where a letter or a character is kind of like a whole word. Is that still what you want? No, maybe? Anyway, I don't know where I was going with that, but it's complicated, especially across languages.

00:19:22

Hui Jing: Exactly. I feel like I'm very lucky that I grew up knowing multiple languages, but multiple languages that have completely different scripts. Honestly, it's almost the equivalent of someone who speaks English and Arabic. The structure of the script itself is so completely different that you're kind of like... Oh, you do think about it more than someone who only speaks Chinese, only speaks English, only speaks Spanish, for example, because then it's not as top of mind. That's why I think it's pretty cool that the working groups and W3C.CSS working group, they do actively think about this, and they are... I mean they're not the most high-profile people, right? I bet some people still think the CSS working group are a group of gremlins hiding in an underground cave....

Chris: Yeah. They're definitely hooded. Whatever it is, they were hoods.

Dave: A few of them are. Miriam.

[Laughter]

Dave: But yes.

Hui Jing: Yeah, but it's really ordinary people and across different countries just trying to figure out how to move the Web forward. I feel it's especially important for the non-English ones simply because the Web is so English-heavy today to a point where there are some interesting questions. Even we, that group, we have no, zero answers to because there's no precedent, which is like the question of just UX.

For example, Arabic is right to left. Then there are some like CJK (Chinese, Japanese, Korean) layouts that are vertical. Not that common, but still exist. What do you do for UX controls in those situations?

Chris: Like a date picker, you mean, or something like that?

Hui Jing: Yeah.

Dave: Buttons, inputs, yeah.

Hui Jing: Or a media player. These are things that did not exist in the physical realm, but when the digital realm started, everything was left to right (by default).

Dave: Mm-hmm.

Hui Jing: The other writing scripts caught up later, after a generation of folks learned how to use these UX controls that are arguably there are no words on there. Right? They're symbols. But there used to, like, you start on left and you end on the right.

Chris: Yeah, the little thumb in the YouTube player goes from the left to the right. That's just how YouTube works.

Hui Jing: Right. Then what happens? Now the browser can do stuff.

Chris: Yeah. Do you stick with that or do we flip it around because it's a little more--? Yeah.

Hui Jing: If you ask the average person on the street, you're not going to get a uniform answer. And so, we can do it now. Do we want to do it? Do we?

Chris: I see. I see. Yeah.

Hui Jing: It's like, "Oh, wow."

00:22:31

Chris: Do you think it's coming to a head with the logical properties thing? Just as a quick story, I translated a website into Arabic and showed it to a friend who speaks Arabic. They're like, "Yeah, it's fine." Then I'm like, "Is it fine, though? There's all this stuff that's still on the left." They're like, "Oh, I just meant the words were fine."

Then I was like, "Oh, I'll take it a bit further and use logical properties and have the stuff line up on the right like it should and put the logo over there and stuff like that." They're like, "Yeah, that's obviously way better."

But they just didn't expect it because translated websites always suck. They're like, "Yeah, it's about as good as it gets." Their initial response was, "Yeah, it's fine."

Hui Jing: Yes, and that's one thing that I do think about from time to time. Are non-majority uses just used to settling? You know what I mean?

Chris: Right.

Dave: Yeah.

Hui Jing: That's a little dark, but, well, it is what it is. Right?

Chris: It is a little bit.

00:23:30

Hui Jing: Now that you mention, I have a bit of a segue.

Chris: Okay. Do it.

Hui Jing: I don't know that that's how you use the word, but I'm left-handed. I'm left-handed, and I use my phone on my left hand. When I message people -- and I don't have the largest hands, right? My thumb struggles to reach all the way across the phone to smash the send key or the enter key. Then I was like, "Wow, I wish there was some way for me to just flip the interaction stuff over to the left.

I went down a bit of the rabbit hole to see are there any left-handed concessions. I use an Android phone. The closest I got was, on one-hand mode, you can make the keyboard smaller and then nudge it to the left or the right.

I want the enter key next to my thumb. Then I realized that if you hack into the developer options, you can force right to left. Then it's fun.

Chris: Ooh...

Hui Jing: Then it's fun to see which apps respect it and which apps don't.

Chris: Oh...

Dave: Hmm...

Chris: Juicy.

Hui Jing: I want to see, for example, if I use Telegram or if I use what is formerly known as bird app.

Dave: [Laughter]

Hui Jing: Telegram, I think, if I remember correctly, Telegram didn't move the key over. But some of the other apps did. So, I'm like, "Oh, this must be on the application level, you've got to do something," because I'm sure, on the Web, you can CSS it such that it respects the RTL. But then I'm like, "This is a very specific mobile issue," which means it's kind of a native app issue maybe.

Chris: Yeah.

Hui Jing: But all in all, it was really clunky, even if you forced right to left. For some apps, the icons, so like the home icon, went to the right when it's normally on the left, and so on and so forth. Some of the interface stuff also flipped, and some didn't. Some just flipped the text.

Chris: Oh, wow.

Hui Jing: I'm like, 'Wow, this must be--" I wondered. I wonder if they just accept that this....

Chris: So, native apps, some have some aspect of flow like the Web does.

Hui Jing: Yeah.

Chris: Oh, I did not know that.

Hui Jing: But it's a half and half experience, and I'm like, "Oh, I wonder if the native Arabic speakers," I don't know. Is that the type of experience that they get? It's like, "Some stuff is there, some stuff as not. As long as I can read the text, it's fine," kind of situation.

It was interesting to try. I tried it for a day and then I said it's too messy. I switched back.

Chris: Oh... Ah... That's frustrating.

00:26:12

[Banjo music starts]

Today, I'm excited to share that they just launched Notion Projects, which includes new, powerful ways to manage projects and leverage the power of their built-in AI features, too. Notion Projects combines project management with your docs, knowledge base, and AI, so you can stop jumping between tools and stop paying too much for them, too.

You know over at CodePen, we use Notion for a lot of project management stuff. It's really cool. For example, there's lots of stuff we use it for, but for project management specifically, there's one big database, and there are individual projects in that database just as a way to break things up into logical chunks, like, this is a big project we're working on.

Within those projects, there are tasks, and tasks are great. That's the meat and potatoes, I feel like. You can have people assigned to them. You can have estimates of how long they're going to take. You can even have another field that's like, how long did it actually take when you close it? And all kinds of metadata that you might need. That's kind of cool because then built into Notion is progress bars and stuff to show how far along a project can go.

Then, this is new as part of Projects is this timeline view. We got this all set up and going at CodePen. Now it's great. We can see who is on what tasks and what's coming up and what's blocked by other stuff. There are all these arrows and stuff.

Notion has really made project management stuff really good, so I appreciate that. It's really kind of the perfect tool for it, in my opinion.

Do your most efficient work with Notion Projects. You can try it for free today at notion.com/shoptalk. That's all lowercase letters, notion.com/shoptalk. When you use our link, you're supporting our show. Go right now to notion.com/shoptalk.

[Banjo music stops]

00:28:14

Chris: Uh... Maybe we can... Do you want to do some of these, the survey? The data is in here, and that's why you listen to this show, people. We get the data first. Just saying. You know that's why you tune into ShopTalk Show.

I'm looking at the responses from the survey, and lots of fascinating stuff here. Of course, it starts with a bunch of demographic stuff. It's important to look at because you want to make sure that - whatever. I don't think we'll spend time on that. We're trying to geek out on CSS features specifically.

One of the most interesting things you get to quickly--and a lot of the survey seems based around this--is kind of like, have you heard of it? Have you used it? And the difference between those because there's a big section.

For example, you just haven't even heard of it. Some of the things in here that people haven't heard of at all, like for example, trigonometry in CSS. That one had a big gap of people that are just like, "What are you even talking about?" Which I found kind of interesting.

Then there are ones that lots of people have heard of it and used it. This looks like the big winner and the survey was something like Gap and Flexbox and Grid. Loads of people know about it and have used it, so that's a big CSS success, I guess. And rightfully so, too. Gap is pretty huge.

Dave: Were there any surprises for you, like features that people are using or not using?

Hui Jing: I didn't think anything was particularly outlier, but as we were chatting earlier, I feel like I'm quite comforted by the fact that, for the really newer ones, there's a larger chunk of people, some of them where you can see year to year. It seems like there are more people. There's an increase. There's an increase to know about it and have used it, which especially the have used it part, I'm like, "Oh, does this mean that people are more willing to give the new features a try because they're expecting that 'Oh, yeah, the browsers will catch up real soon,' as opposed to there's this sentiment years back where, like, 'Oh, no, I can't use it. I can't use something new. I can't use Flexbox. The browsers don't support it properly.'"

Even after 97% of browsers supported it, some people still threw that line out because it's not easy to change your mindset. I thought that was good.

The other thing about CSS -- and I had this discussion with some other folks before -- is that there are some CSS that are more universal than others. For example, there's some CSS where if you don't have a use case, you're not going to use it. Personally, I'm like usage -- depending on CSS -- usage isn't the only thing. I think knowing about it is actually pretty--

Chris: Is more useful? Yeah.

Hui Jing: Is pretty good. Like they should be in combination because my take on CSS, even, is like there are 500. You don't have to stress yourself. There's so much to learn about Web development. Don't stress yourself over 500 CSS properties.

Knowing that something exists is honestly good enough. Even when you run into a project that you need this specific thing, you're like, "Oh, I heard of this thing. I wonder if it does it." But then you go learn about it and use it. But having up to "know about it" knowledge, to me, I personally think that's good enough.

Chris: Yeah, that's huge.

Hui Jing: I don't know what other people think, but I think that's....

Chris: It's almost like there's one in between that you could never ask on a survey like this, but I want to know, which is, "Do you have mental muscle memory for it yet?" It's one thing to know it and it's another thing to automatically reach for it. Even if you don't use it maybe at work or whatever, that you're ready to do it.

Even things like container queries. I think that has a lot of pretty good awareness. That's an interesting one. It's been jumped up. As far as usage, it looks like it went from about 5% in 2021 to doubled to 12% in 2022 and then more than doubled again this year to 26%. But 26% for usage is not that high. But it's a trend of doubling, so I think we could expect 50% next year, which is incredible. All these charts, notably, all of usage and awareness, they go up and to the right.

Hui Jing: Yeah.

Chris: There's nothing that drops...

Hui Jing: There is one.

Chris: There is one drop in awareness.

Hui Jing: There is one.

Chris: Yeah, there's one.

Hui Jing: There is one.

Chris: Poor CSS comparison functions took a drop in one year.

00:32:53

Hui Jing: There's another one that actually dropped. It's content visibility. But I don't think that's too large of an issue because even... There have been some web.dev. There was a web.dev article that says if you don't know how to use it properly, please don't.

Chris: Yeah. Yeah.

Hui Jing: Because that one has to do with performance, and it's almost a little bit of a micromanage property, if I can use that phrase correctly, because browser defaults are fine. But if you want something super-specific because of your super-specific use case, you can't use this one.

It's kind of like, "Oh, yo. If you don't know what you're doing, please, please don't."

Chris: Pretty niche.

Hui Jing: It's like operating a crane. Please be skilled enough to do this. Otherwise, you might kill someone - kind of a situation.

Chris: Hmm...

Hui Jing: I'm totally fine with that one trending down. I think that's what the browser vendors are hoping because I think they see it like, "Oh, no, no. You're not supposed to do it like that."

Chris: Yeah. Interesting.

Dave: Back to your earlier point, it is interesting to see these newer properties that start in 2021 or 2022 have steeper curves. It's almost like the other ones are kind of - whatever - 30% curve, and these are more like 45% going up. It's pretty cool.

Chris: Yeah. CSS nesting just skyrocketed from being introduced in 2022 with 62% awareness to all of a sudden, what, 80-something this year. Just whoosh, really high up.

Yeah, you've got to wish that hopefully, people understand they're talking about native CSS nesting and not Sass or something, but who knows.

Hui Jing: We tried to be explicit about it, but if people don't read it, we're like, "Oh, well." But then again, I wonder, for the newer properties, people are more willing to accept that, like, "Oh, the browsers will all implement it at the same time," versus some of the older ones where people have a bit of a traumatic experience, like, "Ugh."

Chris: Yeah, it's a tough one.

Hui Jing: Or "Is this just going to be broken forever?" I think that's understandable, personally, as a user of CSS myself. I'm like, "Yeah, that one is understandable," because some browsers just didn't get around to it, to a point where I'm like, "Ah... I guess that's the norm now."

Then it does take... Like what you mentioned, Chris. Mental capacity, I think that's such a perfect thing to describe how Web developers operate. It's like, there's just so much, and we don't have infinite mental capacity.

In fact, sometimes I think asking developers to constantly check what is supported and what is not, I wonder if that's a bit of asking for mental capacity situation sometimes. Of course, in a world where unicorns shit rainbows, I would love that everyone just actively does it like brushing their teeth. But you know.

00:36:02

Dave: Do you think the interop project has impacted this too? Maybe we're all... That browsers are kind of like, "Hey, we're working on this sort of stuff, these few properties," that lets us or encourages us to actually use them?

Hui Jing: I do feel that interop is a fantastic project because it's kind of... When people from the browser side come out and say things, people do stop and listen because, "Oh, this feels official." When you say all the browsers come together and say something, they're like, "Oh, wow. This feels big."

I sometimes wonder if it is a bit of like developer advocacy from the browser side of things, which I really like. There's this whole push, like Adam and Lea from the Google side. They have their podcast. Then web.dev where there are so many articles.

When it's published on web.dev, it's kind of... I don't know if endorsed is the right word. But it's a bit of like browser vendors talk about stuff on this platform.

Chris: Yeah.

Hui Jing: I wonder if that's one of the reasons why :has() picked up so quickly because there was a series of coverage on web.dev, and then so many other folks who write about CSS, talk about Web development, also were like, "Oh, let's talk about that." The official interop people were talking about, "Let's talk about it, too." Then it just gained momentum and went.

I like this way of developing. It's like the browsers and the CSS working group used to operate so subtly to a point where nobody knew what was happening. But now I feel like they're starting to talk about it in a more public way. I like it. I love it. I think it's a big plus.

Chris: Mm-hmm.

Hui Jing: CSS needs more advocates.

Chris: Developer evangelism works. You heard it here first. Yeah.

Hui Jing: For sure. And so, I think I'm all for interop, and I love how transparent they are. They have come out and said, "Well, you know, we're not... When you think Google, you think 20,000 employees, but do you know how many people work on browsers? I don't. This is not common knowledge, and I always tell people that I meet and we're not familiar, I'm like, "Look. If you put all the browser--" People who build browsers probably all know each other. They'd probably all fit in a really large elevator. Don't do that because if that elevator crashes, that's it. It's a risk management problem. That's how small the group is. They should never ever take the same plane. No, they should not be... No, protect them because there's not a lot of them.

00:38:47

Chris: There is. I always found it weird how there's the people who actually write browsers are different people than the spec people and developers like us and stuff.

Hui Jing: Correct.

Chris: But the people who write in C++ or whatever it is that actually make that--

Hui Jing: Yeah.

Chris: I've never met one. Never once. I don't know what to think about that. I just think that's interesting that they're a little separated from the rest of us somehow.

Hui Jing: I know that the folks, that whole group that's involved from that C++ engineer to the person who is actually writing the spec (which boils down to a handful of people as well), they are aware of this. That's why there's this... Recently, there's this layer of evangelism from people who are trying to connect these two groups, like the people who use the CSS.

Chris: It seems like a good idea. Yeah.

Hui Jing: The people who write the browser are so specialized and they're so good at what they do, but they're not going to be writing CSS. You know what I mean?

Chris: Right.

Hui Jing: Then those of us who write CSS are not going to be writing browsers. And so, you do kind of need a little bit of a bridge.

Chris: Yeah. I'll say.

Hui Jing: To get.... And that's how we're moving. That's the direction we're going in. And a big plus, like, all for it.

00:40:08

Chris: There's a pretty weak usage of wide gamut colors. People, I'd say please get on that one. That's a little missed opportunity for y'all out there, I'd say. Very few. A little, tiny dot on that one.

Hui Jing: The other thing I would love now that colors, I feel like, is very design; it's the design side of the spectrum CSS. What I would love is for the developers and the design community to have much better communication.

I talked about this a bit in the past. It's like when I used to work at an ad agency many years ago, my designers would come and give me fantastical designs, and I would very sadly have to tell them, "Sorry. I can't do it."

But after Grid came out, like CSS shape, that's a bit of a sad one for me. I wish there was more support. But these are properties that I wish that developers would actively talk to their designers, like, "Hey, remember that thing that I told you I couldn't do? We can do it now."

Similar to how browsers are saying we can't do this and now we can, I feel like this conversation also needs to happen between developers and designers because if designers know that these things are possible, they're going to design these things, like the color thing, the wide gamut colors. You can use these colors now. Put them in the Web design so that I, the developer, can go implement them.

Chris: Yeah. Please don't eyedrop that on your crappy computer and ruin my--

Hui Jing: Right.

Chris: Use the token, please. [Laughter]

Hui Jing: We do have an awareness problem, awareness and communication problem between different groups because it's not like it used to be in the past where, when you were a webmaster, you did the design. You did the development. You did the dev ops. You FTP'd into your server. Then, wow, you are a webmaster.

It's so specialized now. But we're not communicating enough. We're not taking full advantage of the capabilities. I feel like we need to do better in that regard.

00:42:08

Chris: Yeah. It's happening. More evangelism. More evangelism.

If we move on a little bit, it's interesting. There's this reading list, part of the feature of people that added the thing to their reading list. Topping the chart is anchor positioning. I'm glad that made the chart this year. It does have one very early implementation, I think. Right? I guess that was probably the criteria of making it on these lists, in general.

I like seeing that because it's so obviously useful. It's one of those things, like, put this thing by this other thing. Yeah, people need to do that when they're making websites. Pretty common thing, so a massive amount of interest in that and now provably so via the survey.

Hui Jing: Yeah. I feel like surveys like this one -- and I'm sure there are some other means of gathering developer feedback -- I know that the people who do browsers do keep an eye on these things. They're like, "Oh, people want that, huh?"

Because everyone wants everything, they need to prioritize. Like I mentioned, the browser teams are really small. Okay? It's a risk management problem. But they do have to prioritize.

It's a feedback loop, right? If people want this but they don't talk about it, or if the browsers put out a feature but nobody uses it because it's so new, then browsers kind of think, "Oh, maybe nobody wants it. Well, then, fine. We'll go work on something else."

It's kind of like we need to be more active with the feedback as users because I feel like, overall, yeah, there are a couple of people who are pretty active. But the general developer is pretty passive. We consume. It's my day job. I do it. Then I call it a day.

But I feel like if there is some feature that really bugs you and, "I wish this was here. It's messing... It's impacting my work," you don't even have to write a long-ass blog post about it, but just mention it.

Chris: Just a medium ass blog post.

Hui Jing: Yeah. Yeah.

Chris: I see the content visibility chart you're mentioning. It's really, every year, less people have heard about content visibility. Every year, much fewer people have heard of it. Oh, that's an amazing one. Sorry. That's all I've got. Go ahead, Dave.

00:44:31

Dave: Well, so, one thing I wanted to... It's cool to see CSS usage except for that one property is up. [Laughter] But what's interesting, and not to dunk on anyone or anything, any project, but CSS framework usage, interest is trending downward over time. The same with CSS in JS. The interest is kind of trending downward. Did you see that same thing I'm seeing?

Hui Jing: I did. I did notice that. But I feel... I personally was happy about it. Then I think about it. I feel like you still... There is a place for frameworks. They need to exist because they do help. But what felt good about when I saw the framework usage or even the CSS in JS is the one that held very strongly is CSS Modules, and that's the one where you write actual CSS.

I don't know. I'm very heartened by that. Even if people have to write CSS in JS, they're doing it with just CSS syntax. I think that's great.

Dave: Yeah. Good point. No, it's really... Yeah. I don't know. I should say usage for Tailwind is hitting 50% usage. Bootstrap is going down from 87%, 86.9% to 80%, so going down a bit. But that interest metric is interesting, just that people are... I wonder if that's again speaking to the capabilities of CSS. Grid plus a handful of properties gets you so dang far these days. Maybe you don't need a whole style system.

Hui Jing: Yeah. In an ideal situation, I would like for these style systems to be for that specific use case, like my use case, like I really need this to help me do it. There'll always be a usage number there. But it's not... It's not like the default. The default goes back to let's just do CSS. Then, "Ah! I ran into, oh, this is this project. I need this framework." Then only we add it in.

I feel like there was, at some point -- and this is a CSS-heavy discussion -- for some JavaScript projects, it's almost instinctive for some people to be like, "I'll start off my project with a framework." Of course, again, it depends on the nature of the thing you're building, but if you're just building a website, don't try the framework first. You can always--

If you start out, like, "I'm going to build an e-commerce app," like, yeah, yeah. Go, go, go. Go use a framework. Nobody is asking you to do that vanilla. Again, depending on the project, I feel like you can consider rather than, by default, not thinking too much, like, "I'll just create X app."

Chris: Yeah. I'm in such a weird spot in my career where it sounds harder to me to learn a framework. I'm like, "That sounds hard. I'm just going to write the properties." It just has a background and some border-radius. Gees. I can't learn your new abstraction. It's too weird for me.

00:47:54

Hui Jing: Yeah> it is a level of extraction, so I feel like... I hope that developers--

All developers have this growth cycle where they start off, and then they discover frameworks and they start using it because it makes their life easier. Then they get to a point where, like, "I can write this better than a framework," and then it goes back down again. Yeah, I feel like it's a nice evolution. [Laughter]

Chris: There are a lot of properties on here that have 30%, 40%, 50% of people that have never heard of it year after year. Generally, they shrink (that we've been talking about). The longer a property has been around or at least has been on this survey that it goes down. But these are still big chunks of people who have chosen to take a survey about CSS. Thus, have probably some vested interest in CSS. At least this crossed their desk somehow.

It's just good to remember how many people are just like, "What?!" on these things. I don't know. I don't know if I have a larger point to make there, but if you've heard of all this stuff, you are a rare beast because most people haven't.

Hui Jing: Again, I feel like it's not... Nobody needs to feel bad that they didn't hear about everything on the list because some of these are so new. Some of these are really new. I wouldn't have expected anyone, some of them to have even any usage numbers, but there you go. There are definitely some people who are really interested in the new stuff. Then most people are just normal.

If you don't know this newest thing, you're totally normal. I feel like don't even stress about it.

Chris: Yeah. Good point.

Hui Jing: We would love for everything to be blue. But I don't stress about it.

Chris: Mm-hmm.

Hui Jing: It's cool that you took this survey and now you know that this thing exists. So, by nature of taking the survey, everyone who is in the gray can potentially now be in the blue, the light blue. So, I think that's cool. I think that's good.

Chris: I love that. Tech news, generally, outside of just CSS, that's why I read RSS and newsletters and all these things that I do. Almost a little obsessively because I like a little coffee in RSS, you know? No surprise there.

But what I'm doing is I'm filling up my light blue bucket. I'm filling up my "have heard of it" bucket and try to put it into the, like, "If I need this later, maybe it'll be there when I need to reach for it." My light blue bucket, that's what I'm calling it from now on.

Hui Jing: Yeah.

00:50:25

Dave: I think I found a huge mistake. I'm looking at the resources tab here. It says what sites do you read, blogs. CSS-Tricks is up there. Yeah, I got it. Yeah. Okay.

But I go down to the podcast section, and I'm seeing one, two, three, four. ShopTalk is fifth? What?!

Chris: Wow.

Dave: Shop-o-maniacs, what's going on?

Chris: Wow, people. Weak.

Dave: We're getting roasted. Come on.

[Laughter]

Dave: It's clearly some kind of flaw in the test.

Hui Jing: [Laughter]

Dave: Then I'm looking at the people, and I don't know. Maybe you misspelled my name as None, but I don't see myself. Kevin Powell, of course, at the top, Chris.

Chris: [Laughter] Wow.

Dave: Oh, man.

Chris: You know what just crushes in the podcast is people that didn't answer or don't listen to podcasts.

Hui Jing: Mm-hmm.

Chris: That is a pretty dominant answer.

Dave: That just hurts. Yeah.

Chris: It does.

Hui Jing: Yeah. Actually, that was one of the surprising things, but then after I see this, I'm like, "Ah, no, no, no, no, no. I'm not..." Not everybody is like me because I have a lot of podcasts. Then I meet people who are like, "What's a podcast?" I'm like--

Dave: [Laughter]

Hui Jing: You can hear that little gasp. I'm like [gasp].

Chris: Yeah.

Hui Jing: Then I went, "Oh, am I the weirdo?" [Laughter]

Dave: My favorite is when somebody is like, "Oh, I used to listen to that, but I stopped." Then they're like, "Oh, sorry."

Chris: Yeah. [Laughter]

Dave: I'm like, "No, don't."

Hui Jing: [Laughter]

Chris: That's cool.

Dave: As somebody who listens to podcasts, I fully understand. You go in seasons of listening and not listening.

Hui Jing: Yeah. Yeah. Yeah, yeah, yeah.

Dave: Don't worry about it.

Chris: I got that all the time on CSS-Tricks, too. They were like, "Ah, I used to read that website back when I sucked." You know?

[Laughter]

Chris: Yeah. Cool.

Hui Jing: Hey, if you think about it, that's actually a bit of a compliment because they're like, "I read it and then I got better." [Laughter]

Chris: I don't need you.

Dave: I'll take that.

Well, hey, I know we have a hard stop, but is there anything... What's your biggest takeaway here? Is there one more big takeaway you have from the State of CSS?

00:52:31

Chris: You wrote the conclusion, right?

Hui Jing: Mm-hmm. Well, I'm glad that I managed to cover my major observation and hope is that newer, native CSS features are slowly trending upward. CSS framework is slowly trending downward. And I think that's a very positive development.

I feel like there will always be... Framework usage will always be there. My hope is that people be more deliberate about it. I know that I need this framework for this project. But in general, I'm happy with the native support. I hope that's the... Where unicorns shit rainbows land that we can get to.

Dave: [Laughter] The land we all want to exist in.

Hui Jing: Oh, yeah.

Chris: [Laughter]

Dave: Wonderful. Well, on that note, we'll wrap it up. Thank you so much for coming on the show and dealing with time zones with us. We appreciate that. For people who aren't following you and giving you money, how can they do that?

Hui Jing: Oh, I'm on Mastodon. I guess that y'all can put the links in the podcast thing in post. Yeah, and I'm gainfully employed. I'm working for the Interledger Foundation.

Probably a lot of people haven't heard about it but think of it as Dave uses Gmail and I use Yahoo and Chris has his own server. We can all send emails to each other no problem. What we're trying to do, we're trying to do something. We're trying to build, at the protocol level, for payments that we're able to send across whatever wallet, whatever account, whatever bank you use. Make it like standardized protocols.

Chris: Hmm...

Hui Jing: It's a huge undertaking but I think it's really interesting to be working on the side of standards and protocol, which is one level below apps. That's the day job. They are giving me money, so we're happy with that. [Laughter]

Dave: Well, and if Interledger takes off, it'll be a lot easier to give you money, so that should....

Hui Jing: Fingers crossed.

Chris: There you go.

Hui Jing: Fingers crossed, yeah.

Dave: Well, thank you so much again for coming on the show. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on whatever website we do now. [Laughter] And join us in the D-d-d-d-discord, patreon.com/shoptalkshow.

Chris: We'll all Threads now. Huge on Threads.

Dave: Huge on Threads. Only Threads. Yep. It's great. Us and Taco Bell just hanging out on Threads. [Laughter]

Chris, do you got anything else you'd like to say?

Chris: [Laughter] Ah... ShopTalkShow.com.