541: Una Kravets on What’s New With CSS
Una Kravets stops by to talk about making CSS your job, @ Property, Cascade layers, color spaces updates, shared element transitions, animation on the web, nesting, focus visible, and what people should learn about CSS.
Time Jump Links
- 00:40 Guest intro
- 02:09 Making CSS your job
- 03:32 @ Property
- 07:51 Casscade layers
- 11:56 Color spaces updates
- 15:56 Devtools and Cascade layers
- 21:21 Sponsor: SiteSearch 360
- 22:20 Shared element transitions
- 26:41 The point of animation on the web
- 30:16 Nesting
- 37:59 Sponsor: Split Software
- 39:02 Learning CSS
- 48:21 Focus visible
- 51:18 What should people learn about CSS?
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, hard-stop edition. I'm Dave--in the shed--Rupert. With me is Chris--in the office, glass office--Coyier. Hey, Chris. How are you?
Chris Coyier: [Laughter] That's right. I'm doing pretty good. The back is feeling a little better, but I thought I'd do one more show while sitting.
Dave: In the Herman.
Chris: The booth is standing.
You know who we got? This is a big one. Una from Google. What's up, Una?
Una Kravets: Hey! So excited to be on the show. Thanks for having me. I think we have the same chair, Chris. My back hurts too. Maybe it's the chair. [Laughter]
Chris: Silver Aeron club. I posted a picture of it the other day and somebody hashtagged it silver Aeron club, and I'm like, "What? What?"
Una: Wow, another club.
Chris: I guess I'm in it, thought.
Una: Love it.
Chris: Yeah. I don't mind it. You know my little thing, though? This thing, which nobody on the podcast can see. Do you have that piece?
Dave: The lumbar?
Chris: It pops off all the time for me.
Una: No.
Chris: Yeah.
Una: I have a different one. I don't know if it pops off. Yeah, mine is not bumpy like that.
Chris: I need to get some glue or something. I require lumbar support!
Una: I know. It's supposed to be a nice chair, but we sit all day.
Dave: I love my Aeron, but I think I figured out how to sit bad in it, so I had to give it up because it was like--
Una: I do that.
Dave: I figured out how to - whatever--
Chris: This one.
Dave: --put a foot under... my left foot under my right butt cheek - or whatever - and then just mess up my back and then stare at the screen sideways.
Una: I'm literally sitting like that right now.
Dave: See. Yeah.
Chris: [Laughter]
Dave: I figured out how to sit bad in it, and I think I wrecked myself, so careful there. I don't know.
Una: I thought that getting this chair would help me sit better, but it did not. It did not work.
Dave: Yeah because it's a hammock. It's a fancy hammock.
[Laughter]
Chris: It will last for the rest of your life, though.
Dave: It will. It'll last forever.
Chris: Well, we've known each other for quite a while and have similar love of the Web. Una knows all kinds of stuff about CSS and now has kind of a cool... You've made CSS your job, in a way.
Una: Yeah.
Chris: Which is cool. Yeah. [Laughter]
Una: It's pretty cool. Yeah.
Chris: Let's talk about CSS. Why not? The temptation is to talk about new stuff, but we don't have to. We could talk about new and old. But it's almost more fun - I don't know - because it's a podcast [to talk about] new, sparkly, shiny, so we might as well cover some of that stuff.
We got a chance to talk about some of it with Jen Simmons recently, but there's been new stuff since then. CSS moves so quickly.
Una: Yeah, it's a very exciting time to be a Web developer because there's so much going on in CSS and UI land. It's not just CSS. It's also in components and attributes.
Yeah, there's a lot that has actually changed in how the platform works. There've been new entry points in CSS like cascade layers. There's been new ways to select things.
Some of these core capabilities are really changing. But then there's also just additional capabilities and features that are pretty cool that have landed recently and a lot of things that are in the works and kind of getting finalized in spec land and prototype land.
Chris: Right.
Una: Happy to talk about it all.
Chris: Well, you said cascade layers first, so let's do that one first. There's a thing in CSS. You'll know it when you see it because it's a new @ thing, like the at symbol. We're used to writing @media. That's one of them. What's another popular one? @carset, I guess. Not very popular, but that's another one.
Dave: [Laughter]
Chris: It's an at word.
Una: I would love for @property to be supported in more places. That's a great one.
Chris: Oh...
Dave: Ooh... That's another one good one.
Chris: That is a great one. It's actually kind of required. It's a way to bring typing to CSS, right?
Una: Yes.
Chris: So, you can set a variable and say, "This thing is a length," or whatever it is.
Una: Yes, and there's so much you could do with it.
Dave: What's the support of that?
Chris: Yeah, what is the support for @property lately?
Una: I think it's just Chromium, still.
Dave: Okay.
Chris: Yeah. Could be.
Una: But it's such a good feature. I think I saw it pop up in Interop as an idea.
Dave: Well, what I find funny is that CSS got types before JavaScript did. [Laughter] I feel like CSS deserves some credit on that just for typed properties, the CSS OM, and all that.
Una: Yeah. And there's so much you can do with it, like fallback values, not just syntax. Also, inheritance with property values. Error checking just by using @property. It's so cool. I used to talk about @property all the time, but now I'm just waiting for more browser support.
Chris: Yeah. Yeah. It looks like you're right on the support. It's Chromium, which means Edge and Opera and stuff too.
It's funny that Opera is still on all these charts. Didn't they just absolutely 100% jump the shark? Aren't they just a crypto browser now or something? I can't remember what happened.
Sorry. Sorry if I'm upsetting Opera people. I don't mean to. You can like whatever you want.
Okay, so @property, pretty cool. You can type a thing. Otherwise, CSS won't know what type something is. I think it just thinks of everything as a string, essentially - or whatever.
Una: Yeah.
Chris: I'm sure you have more interesting talks on this than I can do really quickly, but to me it's 100% tied to animation. It's like if you know it's a color, then you can animate the color. But it doesn't know it's a color unless you tell it it's a color.
Una: well, the main thing there is like with gradients. The browser renders them as images. How does it know what the thing, the gradient is comprised of if there are no types within it? And so, that's why the example for the color @property syntax is, "Oh, look. You can animate gradients now," which you couldn't do before.
Yeah. Other than that, it thinks everything is a string. Even with things like custom properties now, you can write one, and it's dynamic in the sense that it can be updated. But it's still only read as a string value. There's no semantic meaning in it.
I think that this is actually really similar to this whole concept of more semantic CSS. The attribute property that we have now, you can use. You can write data attributes in your HTML that can be read in CSS, but only as strings.
Chris: Only as strings.
Una: Realistically, you can only use it as content, like in a pseudo-element. That's another one I really, really want on the browser, and I'm hearing more and more in the community that people want is just more semantic attribute, like the ability to send data color or a data value or, say, like a grid name so you can place items on the grid.
Chris: So, there's no way right now, just in HTML and CSS. If I said div data-color=, and then I put some RGB value or a hex code or something like that in there, I could pull that out as a string, but there's absolutely no way I could actually make the text whatever color that is - or something? There's just 100% no way to do that, right?
Una: Right.
Chris: Yeah. So then, is the vibe that I'd use ATTR paren. That's the... Then I could pull it but then comma, pull it as a type? Is that how it's going to roll out, if it does?
Una: There are a couple of different proposals.
Chris: Oh...
Una: I saw one that was for value where you could wrap it in a value function.
Chris: Wrap it in val? Okay.
Una: I don't know where this will land because I think it's something that the conversations are just restarting around because we've landed some big things in the past. So, it's kind of like, well, what's next? That's very useful.
Chris: Yeah. What's next?
Okay. Let's be done with that property.
Una: We're totally off-topic [laughter] from cascade layers.
Chris: We love it. Yay! Yeah, it's great.
Chris: I know, but cascade layers is interesting, too, because it's unlike what we just talked about with @property. Cascade layers somehow magically slipped out between all of our coffee breaks - or something. That's in all of the browsers.
Una: Mm-hmm.
Chris: Whoa!
Una: It landed earlier this year in all modern browser engines.
Chris: That's just crazy to me because it seems like something that's so - I don't know - low level and, like, [growls] girthy.
Una: Mm-hmm.
Chris: Yeah, sure, we can get new, little baby CSS things, but shifting the foundations of what CSS is, is like, [laughter] a little harder to do, which maybe it's not. But that's what layers feels like to me is that I can have this whole chunk of CSS that has vastly different meaning and power than another one does.
Una: Yeah. I think that you sort of hit the nail on the head. There are different levels of impact in some of these features. Some of them really change the entire infrastructure of how we can write CSS and layers is one of them where we've never had the ability to actually maintain cascade entry points before.
The only way that you could fix specificity complex was through specificity features. But layers are sort of -- I don't want to say a layer on top of that -- a level on top of that where it's precedence over the previous layer.
[Laughter]
Chris: Right.
Una: It just enables so much control.
Chris: Specificity be damned, right?
Una: Right.
Chris: That's what's so wild to me is that you could have just an element selector, like P color red, and have that (because it's on a layer above another layer) just bulldoze whatever came before it.
Una: Yeah.
Chris: It's so baller. Yeah.
Una: I feel like this is one of those features where it's super useful but you can really get it wrong if you don't know why certain things are happening. You might just have this unexpected selector.
If you think of it in the same way as specificity where it's just like one file that's injected after the other (kind of like we do today), it doesn't work like that.
Chris: Yeah.
Una: And now it adds confusion. But if you think of it truly as layers of precedence, it really makes it a lot more clear what you want to always take control and always get that style to win. It's like a great power and great responsibility.
Chris: Yeah. That winning thing is so wild to me. I never sat down with a classroom full of students and had to teach CSS, so I'm lacking that. But I feel like I do have a bit of a teacher's mindset - blogging about CSS for so long, and so you have you. How many years and effort was put behind teaching what wins in CSS?
Una: Yeah.
Chris: That's half of learning CSS is playing the "what wins" battle. [Laughter] And now layers complicates that.
Una: That and the architecture.
Chris: Yeah. Right. How do you structure things?
Una: I remember when I was in school and taking a Web design class where we learned HTML and CSS. One thing that the students really struggled with was how to figure out where you import things, how to structure your files. Where you would add a new file. Where you'd just have the same file.
Chris: Hmm...
Una: I think that that's a big point of confusion as well, on top of the specificity clashing.
Chris: Yeah.
Una: Hopefully, this allows a little bit more structured architecture. But definitely, a new thing to learn, as you learn foundational CSS.
Chris: It's always been one of the great ironies of the Web is there's this, like, "Don't tread on me," or kind of like "don't tell me what to do" attitude. But then any kind of technology that came along that absolutely told you what to do, people were like, "Ooh, yeah. I like that." You know?
I don't know. I think of something these days that's so popular like Vercel just had the Next Conf thing that we've talked about. Next is pretty opinionated.
Una: Yeah.
Chris: You install that sucker; it tells you exactly where it wants your CSS to be. People tend to gravitate towards that whether they know it or not.
Okay. Cascade layers. You're also on the dev tools team, right, or dev rel for dev tools? Dev tools is part of your life somehow, isn't it?
Una: Mm-hmm. Yeah, so [laughter] we sort of focus around making sure that people have the APIs they need to build great websites and also the tooling. A lot of that is if there is a new feature landing, like container queries, do we have the tools to support it?
Right now, one big thing we're thinking about is color spaces. How do we expand the color picker to support new color spaces?
Now we have all these new things like out of gamut. What does that mean? How do we help people learn?
There's a lot of alignment in the UI general space and dev tools, but then also working on WebDriver BiDi, end-to-end testing. Folks on my team are looking into things that are not just UI related but also across dev tools.
Chris: Hmm... Yeah.
Dave: I saw Safari does P3 color spaces.
Una: Mm-hmm.
Dave: I was playing with it the other day. It's really interesting because you enter this realm, which not every browser, not every monitor, not every anything can see. You know?
But they do this little line, like, "Hey, you're entering P3 world here now, and that's cool," but I don't know. I was very, like... It's a hard problem just because now does that even work not on my Mac laptop? I don't even know. [Laughter]
Una: Right. It is really tricky.
Dave: Does my external monitor even show that stuff? I don't know.
Chris: But it kind of pulls it back if it doesn't, which is one of the niceties of it, isn't it? These things are like, "It's okay if the color you're describing is outside of the--"
Dave: The bounds?
Chris: I hate to say gamut because I don't even know what gamut means exactly. The bounds, yeah. [Laughter]
Una: The bounds. Yeah, that's a good word for it.
Chris: It comes back in.
Una: Yeah. No, I think that you really touch on a good point. It's hard to figure out how to make these available to people. You do need hardware that supports these color spaces to be able to really build with it and test it. It's easier to downgrade than to upgrade, so it's a challenge.
Chris: The only thing that bums me out about P3 is that you have to use the color function to use it whereas all the other ones seem so much easier to use.
I'm a pretty big fan of the OKLCH. LCH has, I think, the cleanest mental model because if you got used to L... What's the other one?
Una: Lightness? Chroma?
Chris: Q?
Una: Q?
Chris: Yeah, the one that's not the new one that we've had forever. Not RGB but--
Una: HSL.
Chris: Yes.
Una: HSL.
Chris: Thank you. My God.
Una: [Laughter]
Chris: I was trying to think of it. It starts with L. No, it doesn't.
HSL had the best mental model of all time, right? Everybody likes HSL. We didn't all use it, but I think if you were approaching it scientifically, you'd be like, "Yes, clearly that has the most clear human being understanding of it."
Then along comes LCH, which maintains that same mental model but also has the better gradients and way wider color gamut. To me, it's obviously LCH wins except for, like, "Oh, look in this one weird situation."
Una: Better gradients. Better features.
Chris: Absolutely. Oh, that's good.
Una: [Laughter]
Chris: Chrome should hire you. But then the OKLCH is just a secretly better version of LCH because it fixes some weird things that only color nerds can explain properly but basically gradients are even better.
Una: It fixes the blues.
Chris: The blues, yeah. Okay.
Una: That's the main thing.
Chris: Nice. Better blues, OKLCH. It seems to me it's going to be the winner just because of the better mental model, but we shall see. The reason P3 got popular was just because it was better supported earlier on.
Una: Yeah.
Chris: But OKLCH can do anything that Display P3 can do - as far as I know. The super-hot pinks and all that.
Una: Yeah. Adam Argyle is doing a ton of color work and creating a bunch of demos, along with Lea Verou and Krista Lee, so if you're interested in color spaces, check them out.
Chris: Yeah. Nice.
Chris: Well, I brought up dev tools for another reason, too, is to tie it back to cascade layers if dev tools nails cascade layers, which I assume they have already because it would be weird to ship without. If you want to see, "Oh, what CSS is winning?" playing that what wins game that's so vital to teaching and learning CSS, the number one tool for that is dev tools. You just right-click and inspect element and see what's affecting it. If dev tools says, "Oh, that's pink because there's something on this layer is telling it that it's pink, it's kind of like problem solved, right?
I didn't mean to paint this as this dire, like, "Oh, no. How are people going to learn CSS anymore?" They're just going to use dev tools (like they always have), right?
Una: Yeah and that's a feature that exists in dev tools that landed pretty close to the feature itself landing in the browser (if not at the same time), which is the goal. We want to make sure people have tools so they can actually adopt these things.
Now if you open up dev tools on a page that users layers, you'll see the layers and you can see layer order.
Chris: Crucial. Love it. Good job. [Laughter] I hope all the browsers that support it have that.
Somebody asked me the other day, like, "Oh, have you used it yet?" I was like, I've used it to make a demo, but I certainly haven't refactored a major app to use it yet. Not that I'm afraid to because the support is pretty good. But it feels a little - I don't know if daunting is the right word because it's probably not that. But I'm not sure I have a mental model of how to use it perfectly and what I would get for it.
If I do this work, the value seems to me not immediately clear. I feel like greenfield I would use it. It would help. But anyway, that's just how I'm feeling about it. I don't mean to say it's good or bad or anything.
Una: No. No, I think that it's a good point because this feature... So, the decision was made to have unlayered styles in terms of precedence from layered styles. If you put things in a layer, they have less precedence. That means that if you are doing something like a refactor of your CSS or you want to save your state with your old styles then start fresh, make sure the new styles win.
It's a nice way to progressively enhance. So, one good thing you can do is to put it in reset or base and have your other styles start growing on top of that. For refactors, it's a great tool. But I hear you about the new mental model.
Chris: Refactors?
Una: Yes.
Chris: Interesting. It's almost like because you're pulling specificity down by chucking stuff in layers. And I know it's not specificity, but it's like strength or something. You'll pulling it down.
Una: Precedence is the word, but yeah. I struggled to stay precedence over specificity too.
[Laughter]
Chris: Yeah. Priscilla perceives five precedence... The precedence is lower. It's almost like as you refactor, you're almost sure that it's going to be okay because if you yank a whole thing down in precedence and everything still works, you're good. You didn't screw it up.
Una: Yeah. But also, I don't think you have to adopt every new feature.
Chris: Yeah. Yeah. Yeah.
Una: Use what works for you.
Chris: Yeah. I can't wait to read some retrospectives of, like, "We use layers and this is what we got out of it," kind of stuff. I like it when that real-world hits - in a way.
Una: I love it for CodePen demos.
Chris: Yeah. Right. I know what you mean. It's almost like a way to visually say, "This stuff doesn't matter to the demo. This stuff does matter to the demo."
Una: Yeah.
Chris: Without having to use comments or something.
Dave: You can hoist the cool stuff up top, which is just totally dumb, but you can just be like, @layer base cool stuff, and then say @layer cool stuff first before the base stuff. Anyway. It's dumb, but you know.
Chris: I think the big worry about this is that because unlayered styles are powerful, it means that any third-party anything that happens to jack a little CSS under your page and doesn't use a layer is even more powerful than it already was.
Una: Well, that's where you can put any third-party CSS into a layer, and you could import it directly into a layer. When you're setting up your layers, you could add import - I don't know - your third-party CSS as a layer.
Chris: You could if you're importing third-party CSS that way. But third-party CSS, I generally mean a style tag that gets jacked in from a script or something, which you actually wouldn't.
Una: Oh, like an unpackaged script?
Chris: I don't know that you would be able to control that. I don't know. I don't want to be too theoretical about a problem that doesn't exist yet.
Dave: What if we make a rule where all third-party scripts have to put their stuff in a layer or else they go to jail?
Chris: Yes.
Dave: Then we have a company -- I don't know. I'm just going to pick one that we work for -- Google. Okay. Then enforces that.
[Laughter]
Dave: And starts putting companies in jail. You know? For doing it wrong.
Chris: Or it could be a CSP directive.
Dave: Yeah.
Chris: All injected scripts go into....
Una: You know I think that I saw some conversation about this being added as an attribute or some way to do it in HTML like that. I don't remember where that conversation went, but this has been brought up before. So, good on you.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Site Search 360, which is easy-to-use onsite search software. As a Web developer or designer, you're building websites, which respond to both shoppers' and shop owners' needs.
What do shoppers want? Good search. [Laughter] What do shop owners want? They want good search, too. They want it for themselves but also on behalf of the shoppers on those websites.
Have you ever felt frustrated at not finding what you want online? Worse, have you had to design an online store or site but can't find a smart, easy-to-use search solution to power it up?
We've got what you're looking for! Site Search 360 does. It's an affordable site search software with intelligent features like autocomplete, spelling correction, product filters, sorting, and more.
It easily integrates with platforms such as WordPress, Lightspeed, or Shopify. You've got to have good search on a website, and being able to drop in good software to do it is clutch.
Check out Site Search 360.
[Banjo music stops]
Chris: All right. We did cascade layers. Very cool. I would say that if I was building almost anything, like if I still ran CSS-Tricks and did my yearly redesign, I would layer it this year - probably.
Dave: Mm-hmm.
Chris: Maybe I'll do it on my personal site or something. Great, but I do think the value is probably the bigger the site the better, almost. Like if you're the type of website that has a reset, but you also use Bulma, and you also write your own styles.
Una: Right.
Chris: And there are Web components involved, too. I think you're going to benefit more from layers. That's just my guess. The more complex your site it, the more benefit you get.
Una: I'd agree.
Chris: Okay. Can I ask you about this one because I'm so excited about it? Shared element transitions, have you played? Do you know? Let's talk about it. What is it?
Una: I've explored it a little bit. I'm not an expert on it. I've definitely seen it evolve over the past year. The specs changed a lot. Jake Archibald is really working on it.
But yes, this is an area that I'm super stoked about because it allows for you to transition between pages and within pages, like having certain things pop open in different states.
Chris: Mm-hmm.
Una: It's been renamed to viewport transitions recently.
Chris: It has.
Una: In the working group, yes.
Chris: No way. Viewport transitions.
Una: Yeah.
Chris: Ooh... I don't even know.
Una: I think that there was a recent resolution to rename it.
Chris: Okay. Interesting.
Una: But yeah, it's one that I feel like we've been missing this kind of feature and I've used third-party tools to get this functionality of that smooth page transition.
Chris: Sure.
Una: I'm excited about it.
Chris: One of Jake's blog posts on it was this kind of like, "Oh, I'm going to make a video."
Dave: YouTube.
Chris: A YouTube-like thing.
Una: Yes.
Chris: Lots of thumbnails of videos. You click the thumbnail of a video, and you can imagine how you would, for example, write this in Next.js or whatever. You've got single-page app-like transitions on, and the thumbnail goes whoop, and it turns into the video. That's why I thought shared element made sense.
Una: Yep.
Chris: I'd have to read the GitHub thread to see why it changed. But I'm like, "Okay, that changed an IMG tag to a video tag. They're literally different elements and the transition still worked." I think that's kind of impressive to me that that kind of thing can happen.
Una: Yeah.
Chris: It worked by giving it a CSS property, which I was like, "Whoa! That's clever." Just because that's a CSS property, which is something like page transition tag or something, just by virtue of it having the same tag, it knew to do that. I was like, "This is the coolest API I've ever seen. Wow!"
Una: I know. I love the declarative nature of it.
Chris: [Laughter]
Dave: ...attribute of....
Una: I feel like this is something that designers always want, too, is like, "Oh, can we do a smooth transition from this little card expanding and take up the rest of your page?"
Chris: Yeah.
Una: Or even between pages, like this layer, this element stays and the rest of the page will re-download. But it feels like it's a lot more smooth.
Chris: Mm-hmm.
Dave: I saw an ING - they do Web component stuff - ING blog post recently. I can put it here in our little show note chats and stuff like that.
Chris: I don't even know what you're talking about.
Dave: One thing they called out, too, was it's helping with CLS, like cumulative layout shift. I can't say that word, but cumulative layout shift where you kind of moving from one view to the next. You're less popping and herk-jerk loading. It just kind of like animates to whatever - phase 2 of your wizard or modal or whatever.
There are some good videos in here that kind of show how it was working before and after and kind of different attempts. But they did it, and I think they were like, "You know this is pretty good for nine lines of JavaScript, nine lines of CSS, and four lines of HTML, and we're able to kind of, like--"
Una: Mm-hmm.
Chris: Yeah. Right. No library.
Dave: No library. Just whooping between views, so pretty cool.
Chris: I remember Val had talks and stuff. Probably Una, too. When animation is talked about, one of the things that is said is the point of this animation isn't to win an award. It's so people understand where something moved to and where it went.
Una: Yes!
Chris: So, there's some science behind why that matters. Yeah, totally. That's exciting.
Una: The way that I think that Val would talk about it is geometric space. In the real world, we physically open doors. We walk through space. We understand our surroundings by moving from one place to another, getting closer, seeing where things are shifting.
On a website, when something just completely reloads, you lose your place. It's that confusion that gets added by not having things continuous. Continuity between interactions between pages, that makes you feel like you're going through an experience and not just popping from one place to another. There's a lot of real meaning and reason to do this.
Dave: I feel like slamming into the glass sliding door is the perfect analogy. [Laughter] Unless you know it moved, then you know you can go through. Yeah.
Chris: So, those type of animations I think of as another long-time Chromer. I think it was Paul Lewis, right? He called them FLIP animations. It's when you have the end state and you have the beginning state.
I think, at the time, it was designed to be an efficient way to move the thing from one to the other, but it's almost become to mean just 'tween, like, I know the states just morph one to the other and that's what a lot of libraries have come in to do.
To me, it's not about efficiency anymore. It's about that's a nice style of animation that does the classic. It accomplishes that classic thing of now I understand. This thing moved over here because I saw it move over there. It didn't just disappear and reappear in a new location.
I love that this API then embraces that, and it doesn't ask you to do, like, "Okay. Animate the X-Y coordinates from 17-34 to 182-91." You don't have to care about that. You just move it in CSS, let it fall where it may, and the browser will be like, "Oh, I see where I was, and I see where I'm going, and I will move it between those two things." Tweening, as it were. That's just the best, so satisfying. I fricken' love it.
You know what does that all the time? Mobile everything. Every mobile app ever is just fricken' chock full of this stuff.
Una: Yeah. I feel like it's really a missing feature of the Web.
Chris: Let's hope it rocks. I mean it's going to, but you know, because you can play with it now. It was hard to have conversations like this. Even like five years ago, I'd be like, "Oh, really, this new theoretical thing?"
Now, by the time we even hear about them, there's a fricken' browser implementation. It's amazing.
Una: Well, I think a big reason to do that is so we actually can make better decisions around the API, if you can play with it and get feedback on it. There's a lot of discussion in the working group about view transitions, so it's good to have something to kind of base that conversation around.
Chris: the things are safer, right? It used to be like, "Oh, well, in order to do that, it has to be a vendor prefix," or something. That was such a horrible mistake for so long.
Una: Yeah.
Chris: Now everything is flagged, and this is just an obviously better approach.
Una: Yeah. They have to put their name on it.
[Laughter]
Chris: Can we do nesting? Nesting was an interesting one to me because I think it was on web.dev or something. It was one of those, like, vote on which nesting you liked. Any everybody was voting and talking about it. It was really fun and interesting to think about because everybody was like, "Well, just do it like Sass," and there were some reasons why you can't do it like Sass, so there was some kind of consolations had to be made about what the syntax for nesting would be.
Una: Yeah.
Chris: I don't know what the results were, but all of them definitely had their fans. But then more recently, there's been a new conversation that was actually about this other different way.
Una: Yeah. It's been a journey. [Laughter] Nesting has been an API that's been a top developer request for a long time because it's so popular from Sass.
Chris: Right.
Una: The reason why we can't do one-to-one in CSS is because as the CSS parcer is reading the code and it's looking at, you know, you have an element and then, within that, you might have your curly brace, and then you want to nest.
Chris: Yeah.
Una: The browser needs to differentiate between if this is something like a class or some additional element or if it's a property, like a property value pair for its parent.
Chris: Yeah.
Una: That's why there was this challenge where the main thing is you can't have an element without any kind of syntax. When I say syntax, I mean a dot to signify a class or a colon to signify a state or a greater than sign to signify first element within.
That is not just a letter. That's when the parcers know, is this nested or is this a property value pair that I'm about to start reading? That's where all the syntax proposals have started to come from. There's the ampersand. There was the @nest syntax.
Yeah, it came down to a resolution where--
Chris: The double.
Una: [Laughter]
Chris: That was funny, the double one. Did you see the double curlies? That was cool.
Una: Now there's one that's like a trailing new set of curlies that - I don't know. There's been so many thoughts. Naming things is hard. The syntax is the hardest thing.
Chris: Right.
Una: Yeah. There was a resolution.
Chris: It seems close, though. I mean there's a lot of--
Oh, there was a resolution.
Una: Yeah, there was that survey. There was a resolution, and then we started prototyping based on the resolution. Then after that it was like, "Oh, wait. We actually don't know if that's the right way to go. Let's think about this a little bit more."
Now it's sort of been brought back up for conversation in the working group. But I think we are very close to resolving and then landing this feature.
Chris: Nice.
Dave: Ooh...
Chris: Yeah. Not that anybody asked me, but my least favorite one is the one where, like, "As long as the first one is like this, the rest of them can be like Sass," or whatever. I was like, "Ooh... I don't know if I like the one like that," but that's just me. There are pluses and minuses to all of them.
Una: I think I know what tweet you're talking about.
Chris: Yeah.
Una: And the idea there is you can use the ampersand always if you want to, which was the initial current syntax. But with that one, you can optionally remove it if you have a class or if you have something that has any kind of syntax, so like hover state. But if you have just an element, you have to have the ampersand in front of it.
Chris: Hmm.
Una: There's a little bit of confusion with the trailing ampersand, so you have to have is or some other rapper, like is or where.
Chris: Oh...
Una: To let the trailing ampersand work. That was kind of like the edge case. I feel like it's a bit of an edge case to have a trailing ampersand these days.
Chris: I feel like I just did it this week.
Una: Oh, yeah?
Chris: I'm biased by its thing. Well, it's because the number one time I use it is, like, all right. You have .thing with the curlies.
Una: Mm-hmm.
Chris: Then inside it I'm like, what about conditionals? I might have a data attribute on a parent of it, which I guess now I'm talking myself out of this because has exists now. I should have just used has.
Una: Has is so good.
Chris: [Laughter] But I'd be inside of my .thing. I'd be like, data has or is cool, or something, and then put an ampersand at the end of it, meaning that conditionally I'm styling thing when a parent has a thing, and I'd use the trailing ampersand to do it. It didn't feel particularly - I don't know - weird or rare to me. I was like, "Yeah, trailing ampersand. Classic usage," but I'm in Sass.
Una: I get it. I used to use it in Sass too.
Chris: Yeah.
Una: I do think that has replaces most, if not all, of those situations.
Chris: You're right. I think has replaces it. Yeah. Damn it. I should have thought of that.
What's the support on has? No Firefox though, right?
Una: It's behind a flag in Firefox, and it's in Chromium and Safari. Hopefully, we get it soon because that's--
Chris: Well, if it's flagged in Firefox, where did it go?
Una: It's a really powerful feature.
Chris: It's beefy. Yeah. It's flagged in Firefox. Oh, my God. We're so close!
Una: So close!
Chris: Firefox! Firefox! You can do it!
Una: Yeah.
[Laughter]
Una: Go! Go! Go!
Dave: I was going to use it the other day but Trent uses Firefox, and I was just like, "Dang it! He'll complain, so I can't do it." But I was so close. I'm so close!
Chris: So close.
Una: Yeah. I'm hoping that we'll be able to use this feature soon. It really does change the way that you can select things. There's a really good article from Jay about this, and it talks about how to use it not just as a parent selector, but you can select anything on the page, basically, by using has.
Chris: Yeah. Was it y'all that were calling it the family selector or something like that?
Una: Yeah, "The Family Selector." That's the name of the article. Uh, it's just such a good API. You can do a lot of things like focus within things. You could do--
I liked his example of checking for ARIA state, and then you could shift a page and using translate to shift a whole page. Uh, it's such a good API. I would highly recommend y'all check it out.
I use it all the time now in prototypes where I can.
Chris: It absolutely blows my mind that that's available to us. What the hell.
Una: You can do quantity queries with it. You could do so much with it.
I remember writing an article for CSS-Tricks a while ago where I was like, "Oh, here's how to do quantity queries and different ways to use it in a UI." Now all that has been replaced by a line of code with has.
Chris: Dave's got an article about quantity queries. He just did it. "The Dangler Syndrome," he called it, right?
Dave: Yeah. Where, like, if you're doing a grid and you have three items and it goes to a medium mobile view and you have just one little orphan dangling, it looks bad. You know?
Una: Yeah.
Dave: What's cooler is if you make the first one big. But to do that for every--
Chris: I like how you made the first one big because my instinct would be like, oh, take the dangler and fix the dangler.
Una: Yeah, that's what I would do.
Chris: But Dave was like, "No, I'm going to fix the first one, which pushes the dangler."
Dave: No. If you put the first one in the list, it's the most important, right? So, make that the biggest one.
Chris: Yeah. It just was a nice touch. Good job.
Dave: But the CSS to write that for every odd variation, every - you know? It wasn't fun. It wasn't cool. It wasn't interesting.
I know on client projects you have the three features in the middle of the page, like, "Oh, what we're awesome at: one, two, and three." And they have icons and stuff.
I know what's cool there, but I just never did it because I was just like, "I'm not going to do that." Then you mix in container queries to where you just don't even--
Chris: Uh-oh. Dave said it.
Dave: You tell the component how to resize itself.
Chris: [Indiscernible]
Dave: Yeah. Sorry.
Chris: Dave said container queries. I almost put it at the bottom of the list on purpose because I was like, "Oh, everybody is talking about container queries," but that's because they're amazing.
[Banjo music starts]
Dave: This podcast is brought to you by Split, the feature management and experimentation platform. What if a release was exactly how it sounds, a moment of relief, an escape from slow, painful deployments that hold back product engineers?
Free your teams and your features with Split. By attaching insightful data to feature flags, Split helps you quickly deploy, measure, and learning the impact of every feature you release, which means you can turn up what works and turn off what doesn't and give software innovation the room to run wild.
Now you can safely deliver features up to 50 times faster and exhale. Split feature management and experimentation, what a release.
Reimagine software delivery. Start your free trial and create your first feature flag at split.io/shoptalk.
[Banjo music stops]
Dave: You mix these things together now and CSS is totally different.
Una: Yeah.
Dave: Back to that education thing, I don't know how you even teach CSS now. It is so different, and I have all this old brain cruft. Where do you start? [Laughter] What is good CSS or what's the minimum viable CSS that you need to know right now?
Chris: I don't know. The box model is still there.
Una: Yeah. [Laughter]
Chris: I don't know.
Una: I still think there's a core set of features there, but what I've also been thinking about is how do we help people who know CSS learn the new things? What is the step between things that are experimental and things that are like CSS 3? And how do we help people learn what's new and the capabilities that are new?
The way that I've been sort of framing it is this new entry point to responsive design is sort of like the new responsive where there was a whole round of responsive design that emerged from new devices, so mobile and desktop. And, oh, now we have to design for different screen sizes.
I feel like now we're entering this new modality where we have user inputs to think about. Theming: you can let the user be a part of your design process, like prefers contrast, all of those things.
It's sort of like being responsive to the user and their needs. Being responsive to the actual page itself with container queries and logical components that leverage has and statefulness and container querying.
There are all of these things that kind of fall into those buckets of thinking about responsive design in a new way and in a more constructive, specific way. Then being responsive to different device types. We're now seeing even more device types that I think we're just starting to see, so I think that's less clearly defined.
Chris: Yeah.
Una: But yeah, I feel like we're at this precipice of a new generation of responsive design almost.
Chris: Yeah. Yeah, the foldables. I had the most vivid dream of my life where I had a foldable phone, and I was just so sure it was going to be the future. I still think about that sometimes.
Una: Yeah.
Chris: They exist, though. Isn't that what the Microsoft phone is, or whatever? I was thinking about it the other day because I'm like, does it run Android, or does Microsoft still run--?
Dave: It's Android.
Chris: It is? Oh, nice. So, they did give up on having a mobile operating system, yes?
Dave: They were going to have a tablet that did it, too, but it never came out, so I don't know what the story on that was.
Chris: Surface Duo.
Dave: Mm-hmm, and the big one was the Surface Neo.
Una: There's this Galaxy Fold.
Chris: Oh, there's a Galaxy. Is that Samsung's thing?
Dave: So, Galaxy Fold, yeah, it's like a Motorola Razer. It folds up big, like from a little square into a long, tall phone.
Chris: Hmm... God, I'd hate to admit it. I kind of love that.
Una: Yeah, there are two. There's the Galaxy Flip that does that, the square to the tall.
Dave: Oh, that's the Flip. Yeah.
Una: And the Fold goes from like what you kind of think as a normal--
Chris: Like a book.
Una: --mobile. Yeah, like a book.
Dave: But that doesn't have the seam in the middle, so the seam is kind of the other weird thing.
Chris: But that's what Microsoft did right. I remember when they were talking about this at first. They were like, "Oh, let's get the CSS in place first. Then we'll release the phone," almost. Didn't it use @page or something? There was some way to know where the fold was.
Una: Yeah, there's environment variables.
Chris: Yeah. Fancy.
Dave: Speaking of environment variables, wasn't it Microsoft or somebody? You know how like when you install PWA, there's now CSS properties that you can kind of like tuck your search bar or whatever up into the menu bar.
Una: Mm-hmm.
Dave: You can take over the little, I guess, toolbar area of your application. That's kind of back to--
Chris: Oh, this stuff is so complicated.
Dave: --the whole thing about the stuff you can do now. You can just contextualize or respond to that situation a lot easier - a lot easier.
Una: And the other thing about this new responsive entry point is it works a lot more closely with the way that we build architecture today, like component-based websites where you have individual components that can now own their own responsive logic and be resilient and be adaptable to whatever situation you put them in if they're in a sidebar or they're in a main area or if they have some kind of class or custom property value attached to them, or even if they have stateful children. It just goes so deep.
Uh, I get so excited about it every time I talk about how logical we can now write styles. I don't know. I'm just... [Laughter]
Chris: Are you waiting for, like, who is going to be the first semi- to very popular component library that's just 100% container queries? I haven't seen it yet. Container queries exist, but--
Una: I don't know. I think right now we're missing some browser support.
Chris: Yeah.
Una: I think that's the main blocker.
Chris: We're two months away, though, I hear.
[Laughter]
Una: Two months.
Chris: We'll see. We'll see. Two months.
Una: Is that what you hear?
Chris: [Laughter] We'll see. But that would be rad because, again, it's just Firefox, but if anybody on Earth knows what people are asking for, it's them and they know. They know. They know.
Una: Yeah.
Chris: I don't know who knows, but they know. So, that's pretty rad. We skipped over it a little bit, but I feel like people are pretty well aware of what container queries are. You kind of explained it. It's styles that you can apply based on how large the container is. Eh? [Laughter]
There were some good last-minute changes I thought that made them so nice. I like that the CSS property is container, so we call them container queries. And then the fact that the CSS property is container to kick it off is so satisfying. And that the units are CQ, you know, the marketing.
Una: Yeah. I like that change.
Chris: We all call them container queries. Yeah. CQ, baby.
Una: But if you do use container, it's a shorthand that requires you to name the container. So, if you don't give it a name, you've got to use container type.
Chris: Oh, container type. If you want it unnamed, which--
Una: Right. Right. But it's a good practice to name them just for consistency.
Chris: It feels like it. Yeah, I haven't used it enough to know. Yeah, let's name them because if you name them, you don't have to call it by name if you don't want to, right? You could call it by name.
Una: Yeah. Yeah, it's optional. But it is useful.
Chris: Yeah.
Una: One example is I had this demo where I had a responsive button that was container query, and it went from just an icon to an icon with more detail to an icon with a plus to an icon with some text, like "Add to cart."
Chris: Cool. Yeah.
Una: Then I put that inside of another container that was a product card. Sometimes I want it to respond to itself, to its own container size, so how wide the space was available for the card.
Chris: Uh-huh.
Una: But other times, I wanted it to respond to the parent's container size to position the layout, whether it was centered or left aligned. And so, having a container name is important.
Chris: Wow. It allowed you to skip a container on the way up.
Una: Yeah, it allowed me to specify which container I'm actually looking at to apply the styles.
Chris: Oh, that's so cool. Wow!
Una: Right?!
Chris: Yeah. You can only do that if you name your containers, kids.
Una: Yeah. Fun times. Fun times in CSS land.
[Laughter]
Chris: Creepy.
Dave: "Hey, CSS. You're pretty cool now, dude."
Una: Come to the CSS side, everyone.
Dave: Yeah, you're not going to get bullied by JavaScript people anymore. CSS is cool now, guys. [Laughter]
Una: I feel like JavaScript people are some of the most excited for these things because they can write less scripts.
Dave: Oh...
Una: Or they should be, at least.
Dave: It's amazing. You know somebody had pointed out, and I realize we've got a hard stop here, but somebody had pointed out some of these tools, too. I think it's Mariam, maybe, but some of these tools, like CSS and JS has had a tough time recently. We won't go over that, but they are not really equipped to support some of these new syntaxes, right? You've got to wait for them to figure out how to do deal with it. Is that something y'all consider or think about? Do you think somebody will just figure out how to do it?
Like nesting for example. I'm sure styled-components is just going to eat it when it tries to get into nesting, so how does that work? I don't know. Is that something y'all think about?
Una: Well, we sort of -- with the nesting spec, there are tools that use the current nesting spec as like a plugin already.
Dave: Oh, okay.
Una: I forget which ones they are, but yeah.
Dave: Like auto-prefixer or something?
Una: Yeah, so I think that there is a path for upgrading. But what I would like to do (more of, at least) is work with these tools, like abstractions that developers use to build websites, and kind of help them get up to speed with some of the modern CSS so that other people can leverage that because it's how they're building.
I think that there's work to be done. Kind of in the same vein of wanting to reach more developers who focus on JavaScript and don't necessarily keep up to date with the latest changes in CSS, those are the people that probably benefit the most from learning about these things and utilizing these things in their day job. How do we reach them if they're not already looking for that kind of information?
Dave: Yeah.
Chris: Hmm...
Dave: Yeah, I mean it's been a hot year for CSS, but even if the last time you paid attention to CSS was a decade ago when responsive came out, it's been huge, massive changes.
Una: Sorry, Chris. You had a curveball.
Chris: I know, but it's too late. You're going to have to come back because it's not going to fit into our hard-stop edition.
Una: No, it's okay. We'll make it work. I'll talk fast.
Chris: We'll make it work?
Una: [Laughter]
Chris: It's just a really quick one because I was thinking about focus styles again and how there's this thing called focus visible. This isn't quite as new as some of the other stuff, but it's still pretty new, I think. To me, it's like the big thing that solves this idea that you really need to have focus styles, but we all got sick of the idea that everything you fricken' click on your website got the focus style. By click I mean literally click with your mouse on a desktop. Thus it would birth this long generation of clicking on stuff or having people remove focus styles because they just didn't like the look of the desktop approach.
Una: Yes.
Chris: Which was so horrible, and so focus visible comes along and, I think, rather solves that nicely. Are we at the point where we can just only use focus visible only and not focus, or is that dangerous? I was trying to wrap my mind around it. I'm not sure I quite got there. That was the curveball.
Una: Browser support-wise, it's available and it's been available in browsers for several versions. You don't have to worry about its support.
Accessibility-wise, I'm not sure because I'm not an expert in the accessibility space, and I feel like there are so many nuances for different modalities and ways to use the Web platform that I cannot answer that, if it is safe or not.
Chris: No, that's fine. Yeah, I was just thinking about it and writing some stuff up and kind of ended up with, like, "You know what? I don't trust myself either." I definitely wouldn't feel comfortable being the guy that tweets, "Don't use focus anymore! Only use focus visible." That doesn't have the right research and expertise behind it to know that.
Una: But I hope that somebody does that research that is an expert in the space. Yeah.
Chris: Because we're close. But it turned out that while I was looking at that, I think an easier way to do it is you can use at supports and then the selector function and then :focus-visible, and the support for that is really, really good. It's better than focus visible is.
You can then, within that, put regular focus styles and be safe. What it means, though, is you have to repeat the CSS that you used for focus visible in another spot, which meant--
While I was thinking about it, I'm like, [gasp] "Native browser mix-ins." That's what y'all should do next year, mix-ins, mix-ins. You know? Like this is a chunk of CSS that--
Una: It's definitely on the list of things that people have asked for. That's for sure.
Chris: It's a pretty good use case I just ran across. Focus visible, it's pretty cool. Check it out.
All right. [Laughter] What else do you got? Anything you want to sneak in?
Dave: Yeah. Are there any special sneak peeks, browser feature drops in 2022 or 2023? [Laughter]
Una: There's been a lot of stuff. I feel like if I was to tell someone to learn about stuff that landed this year, container queries is a big one because that's really game-changing. Not fully supported in browsers yet, but it's going to change the way that you write responsive code.
Has is another one. Definitely check out the article by Jay.
Other stuff that we didn't even talk about was open UI work, like popup, anchor positioning. That stuff is really game-changing as well.
Chris: Oh, my gosh.
Una: I feel like I could do a whole episode on those two with Dave's select menu.
Dave: Yeah. I could cry a bit on some of this stuff. But is select menu close? I saw Jay posted an article, and so it made me think, like, "Whoa. Is this closer than I think?"
Chris: That's the one that's identical to select. It's just that you can actually style it.
Una: Yeah, arbitrary content is a big one there. I think popup and anchor are sort of required for select menu. Jay calls it like the trifecta where you need to be able to set a popup.
A lot of these select menu experiences can be built with a popup, and you might need to even do that to make things more semantic if you had something like a double select menu. Say you have a select menu with a drop-down and arrow that has another menu sort of situation. That would be better as a popup right now because we don't have the ability to do that with the way that select menu is defined and is just option-based.
Dave: Or even just a hamburger menu would be better as a popup. I think that was an example.
Una: Yeah. Yeah.
Dave: Yeah.
Una: I think what's closer is finalizing popup, making sure that that is accessible and everything is built in correctly to the AT, it has the right controls, then anchoring, which is pretty critical for these APIs, and select menu - if I was to guess.
Dave: Yeah. Well, that's cool. Yeah. No, it's exciting. The progress that I know people over on Chrome and some Edge folks as well have been really putting into popup has been amazing.
Una: It would be so good to have.
Dave: Oh, it would solve -- it's another problem solver.
Chris: Those two are clutch. How many times were you writing a component, and you're like, "Well, I guess I better make five props"? One is like a line left and a line top - every situation where you might want to put something.
Una: And all the JavaScript logic.
Chris: Then you hard code it.
Una: Yeah.
Chris: Yeah. Right, whereas... Yeah. We don't have time to get into the API.
Una: The future of the Web is bright.
Chris: Yeah, anyway.
Una: TLDR. [Laughter]
Dave: That's good.
Chris: Very bright.
Dave: That's good.
Chris: Something is happening.
Dave: Way to end it, Una. For those who aren't following you and giving you money, how can they do that?
Una: Well, they don't have to give me money, but if they want to follow along with all the stuff, you could follow me on Twitter, @una. My website is una.im, in case the Twitterverse shuts down and I don't know how to contact anyone.
Dave: Totally possible. [Laughter]
Una: Follow Chromium Dev on Twitter. You could follow our YouTube, too, Chrome Developers, and web.dev and developer.chrome.com are where we write stuff, so you can learn all about stuff coming down the pipeline and stuff that's recently landed and browser support and best practices and patterns and all that good stuff for the new world of CSS land.
Dave: Awesome.
[Laughter]
Dave: Wonderful. I love it.
[Laughter]
Dave: Thank you very much for coming on the show.
Chris: Best episode ever.
Una: Thanks for having me. This is great.
Dave: Yeah, thank you. 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 Twitter or wherever exists, whatever happen--
Una: Whatever exists tomorrow.
Dave: Whatever exists, and join us on the D-d-d-d-discord - that's still going - patreon.com/shoptalkshow.
Chris: Heck yeah.
Dave: Chris, do you got anything else you'd like to say?
Chris: Just ShopTalkShow.com.