460: What’s New in CSS in 2021 with Adam Argyle
Adam Argyle chats with us about CSS features from risky and never in any browser to stable and available in many browsers that are available in 2021.
Guests
Time Jump Links
- 01:39 Guest introduction
- 04:19 The most productive time for CSS?
- 09:12 Logical Properties
- 13:12 Is and Where
- 17:26 Sponsor: Netlify
- 20:13 What's new about nesting?
- 29:31 Container and container queries
- 32:41 Spelling and grammar
- 36:39 Sponsor: Around
- 38:24 Aspect ratio
- 41:16 Leading trim and gap
- 48:35 Color
- 59:45 Properities we're not likely to see
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: [Speaking very slowly] Hey there, Shop-o-maniacs. You're listening to another... [speaking at a normal speed] episode of the ShopTalk Show. I'm Dave Rupert. I was just really trying to play a trick on all the 2x people. But anyway... [laughter] with me is Chris Coyier. Hey, Chris. How are you?
Chris Coyier: Hey. My guess was that there was some CSS speak speed property that we were going to end up talking about.
Dave: Yeah, playback rate of 0.5. I was just really trying to -- my wife came up with that goof--
Chris: Yeah.
Dave: --and I love my wife, and so I said, "I'll do that goof." It was a good goof.
Chris: [Laughter] It was a good goof. You've got me on watching stuff at faster speeds, too.
Dave: Oh.
Chris: We just got done with An Event Apart, which I think we'll play that next week, our thing there. They were prerecorded, including yours.
Dave: Yeah.
Chris: If you're just super busy or whatever (for any reason) need to get through a talk a little faster, kicking that up -- they were on Vimeo, and the Vimeo player had a 1.25, 1.5, 2, and you can kick through a talk a little faster that way.
Dave: Oh, yeah.
Chris: I don't think you miss all that much.
Dave: I did a speed run of An Event Apart. I won't lie. I just cracked open Web Inspector and playback rate 2 to all the videos, so anyway, it was fine.
Chris: All right. Well, we were talking about a special CSS property that may or may not exist, and we're going to keep doing that this entire episode because we have a wonderful guest, Adam Argyle from Google, on. How are you doing, Adam?
Adam Argyle: Hello. I'm so happy. Y'all are so cool. Thank you.
Chris: Yeah. [Laughter] Yeah, Adam is a friend of the show. Been on before. I've called your job "weird" before. Sorry, Adam. I don't mean to disparage--
Adam: Oh, it's weird.
Chris: Yeah, you're like CSS Captain at Google. I've called Tab's job weird before, too, because you work at Google, but you don't really do googly things. It's very abstract. It's like if you do your job really well, theoretically, the Web gets better and, theoretically, that's good for Google. But you'd think that'd be the hardest thing to prove ever.
Adam: Oh, yeah. Perf reviews are very awkward.
[Laughter]
Chris: For sure.
Dave: What was it? Paul Baucus is now content advocate or something. He's like content--
Chris: At least content has page views or something.
Adam: Yeah.
Chris: At least there's some kind of metric.
Dave: No, he's like content creator. He's like a creator advocate or something. In addition to a developer advocate, there's now a creator. Anyway--
Chris: Yeah.
Adam: Well, our acronym changed too. We are now DREs. We're almost doctor DREs. We're developer relations engineers.
Chris: Oh...
Dave: Oh...
Adam: Yeah, we have--
Chris: So, you get to put the E in there, which you didn't have before, which is--
Adam: That is essentially what people fought for, for years, yeah, is, "Hey, these folks are still engineers. Can we put them in that bucket somehow?"
Chris: Right.
Adam: Yeah.
Chris: I don't know. This is the first time I'm hearing it, but my gut is that I like it because it means that you write code, which you do a bunch, and it says that in the title. I don't know. That seems worthy.
Adam: Yeah.
Chris: Anyway... Okay, so because of your weird job, which is just like CSS guy or something. I don’t know what your exact title is, but you evangelize it, talk about it, kind of push specs along, think about it, and talk to people about it. I don't even know what it all entails, but I end up talking to you a lot about CSS. Probably not as much as I should because you're always busting through the seams with interesting CSS conversations.
Adam: [Laughter]
Chris: I'm always mid-meeting and, like, "Sorry, Adam." But anyway, you have (on your own volition here) made a list and then categorized that list of, I'd say, very new CSS things. You'd think that list is like, how often does CSS change? I definitely lived through an era where it was like never. So, to see a list like this, which I know for radio you can't see it, but it's many dozens.
Dave: It's like 30 items.
Chris: Yeah.
Dave: Yeah, 30-something items.
Chris: Wow! And so, even in our chat, I was like, is this the most productive period of CSS ever? Maybe even since the beginning, because wow, it's cruising. What do you think?
Adam: It is. I can't keep -- it's pretty much my full-time job to know about all these things, and I can't.
Chris: Yeah. [Laughter]
Adam: There are so many. This list is incomplete. You're like, "Well, what's missing?" We're like, "Well, there are a lot of working group members and they are active, and the development in Firefox and Chromium is out of control - and Safari - is out of control right now."
Chris: Yeah.
Adam: There is just so much fun stuff to choose from and it looks like there's general excitement from engineers, so like, "That sounds kind of cool to build. I'll do the CSS work."
Chris: Yeah.
Adam: Yeah, it's coming together. It's really fun.
Chris: really good. How you've chosen to organize this is also kind of clever. You put them in three categories: high risk, moderate risk, and low risk. You have a talk and slides and stuff that we can end up putting in the show notes for this. That's probably more -- I don't know. It's useful if you're at your desktop computer at home because you'll be able to see samples and stuff.
Throughout this podcast, we're going to have to resort to our mouths, you know.
Adam: Yeah.
Chris: So, there might be moments where that gets a little weird.
Adam: [Laughter]
Chris: But don't worry. There are slides and stuff. We're going to do our best to mouth blog this thing to the best of our ability.
I thought the three categories were interesting because low risk means like we kind of basically already have this or are real close. You put stuff on the list like logical properties. Well, if you're writing for modern browsers, you can pretty much just use that stuff. I ship half the stuff on this list, maybe. You know?
Adam: Yeah, it's safe.
Chris: So, low, real low, safe.
Adam: Yeah. It's like a way to upgrade. They all have this path of upgrade that's harmless to existing browsers. Yeah.
Chris: Good. Good. I think we'll spend the most time on that list just because I think people listening to this show, you should know about these things because you can really use them. That's always part of the conversation, isn't it? "Yah, cool, but when can I use it?" Well--
Adam: Yeah.
Chris: Now, so there you go.
Dave: There was a whole talk about that at the An Event Apart.
Chris: Yeah.
Dave: It was like, "That's cool, but I can't do that," or whatever.
Chris: Yeah.
Adam: Yeah.
Chris: That conversation is tiring.
Adam: I'm still hearing Eeyore in that voice, but it's cool. I like it.
[Laughter]
Adam: Too much Winnie the Pooh with my kids, I guess.
Dave: Eeyore would make a great [Eeyore's voice] "Yeah, but I have to support IE11."
[Laughter]
Dave: He's the antithesis bummer.
Chris: Yeah.
Dave: Strong sad, was it, in the strong bad universe.
Chris: Can't argue...
Dave: Strong sad.
Adam: Strong sad. Nice. I remember that. Nice member berry drop there.
Chris: [Laughter]
Dave: Yeah.
Chris: Then there's a moderate risk category, which is stuff that -- I don't know -- has a bunch of momentum, has more fleshed out specs, seems like we're maybe probably going to get, but is more maybe. As much hotness as -- I mean container queries is in this list, so as much enthusiasm as there is for that, I'm quite sure we're going to get something.
Every word I read about it is always caveated with, you know, "This is subject to change. This is not final. This is behind a flag," which is rightfully so. There's that list.
Then the high-risk category is the spiciest stuff, as you put it.
Adam: [Laughter] Yup. These are my created little -- right? We don't have stages in CSS. That's so convenient in JavaScript like stage 4, stage 3, stage 3. You get excited about these stages.
Jonathan Neal has attempted to do this in Preset Env with PostCSS. He has pseudo stages and explanations of why they're at that stage. I kind of piggybacked on that with this where I'm like, moderate risk means there is one browser you can go prototype with it in, so theoretically you could upgrade one browser's experience, but that's pretty risky, right? It's moderate risk. Yeah, things like container queries squeak into this category whereas other things are sort of on the verge of going from moderate to low, kind of like color level five or at layer. I think we're going to start to see just show up on the scene really fast, or Houdini Paint, which has pretty good support right now.
Yeah, and so that's how I thought about these things. It's like a mixture of how many browsers have it, can I easily upgrade into it, and how much is it going to change? Is it volatile? Yeah, I hope it works.
These are my opinions, everyone, so this is not the CSS working group saying how risky these are. This is me and my gut. [Laughter]
Chris: Yeah, sure. Sure, and we could argue about which category they go in, but why? Who cares? It's just Adam's little list of fun here.
Let's do some ones that I associate with you. I feel like I associate logical properties with you. You're probably an advocate of everything on this list. I don't know why I associate that one with you, but are you just using them, margin block start? First of all, what are they? Logical properties.
Adam: Yeah, logical properties. It's like an agnostic way to describe a side of a box, an agnostic to the writing mode and direction of a document. All of our documents are paragraphs, are stacked on top of each other, and we read our words left to right. Well, not everybody reads words that way. Not everyone stacks their blocks that way.
By using logical properties, instead of saying padding-left on my paragraph here, you can say, well, this is the start of where I read. This is the inline start. Logical properties allow you to write once and pacify and have spacing appropriate for all writing modes and document directions.
I put this here in the low risk because it still has some scratchy edges. There are some rough corners where maybe even Safari is missing the shorthand or something like that, or Chrome. It took us a long time to get one of the shorthand.
Chris: I think of one, like how there's margin -- so margin block start. That one is pretty obvious.
Adam: Yeah.
Chris: Well, none of these are obvious to go, but I think that one, okay. If you're learning this for the first time and you didn't even know about margin-top or margin-bottom, and somebody taught you, "Oh, block start is the top of a block-level element and end is the bottom," or whatever. Now I'm using the words bottom to describe it, but I think you would just get it.
You'd be like, "Oh, that's the name for that? Got it." I don't think it would be difficult to learn. It might be a little bit difficult for us with muscle memory to get there, but hey, so be it.
But in the days of old, we had just margin, and margin had a four. You know a different number of values in there meant different things. One value meant all four sides. Three values was really weird. It meant the top part, the left and right, and the bottom. Fine.
One of them that there just wasn't was a CSS thing that just meant just top and bottom. That's not a thing.
Dave: Yeah. Padding top, padding-bottom.
Chris: There's no thing for that. There's just nothing before logical properties. But now you'd think margin block would mean that.
Adam: Yeah, and it does. Yeah.
Chris: It does now, but that was one of the stragglers, right?
Adam: It was one of the stragglers. Yeah, these sort of like shorthand for, yeah, the inline and block sides, which could represent top and bottom, left and right.
Chris: Right.
Adam: Another straggler that you're sort of reminding me of here is just the single value of specifying all four in margin because let's say you wanted to use the margin shorthand to specify all four sides at once, but you wanted to specify their logical sides and not their physical sides. Right now, we go around the horn physically, right?
Chris: Yeah.
Adam: How do we specify we want to go around the horn logically? That's up for debate.
Chris: Mm-hmm.
Adam: It's one of the remaining spicy topics. Some people are like, "I want a global way to say all of my margin shorthand will always be logical," and other people are like, "Well, I want to do it in the moment."
Chris: Yeah.
Adam: Anyway, yeah, it's a tough one. It's still hanging.
Dave: Okay, I've got it. I'm riffing. Margin north. Margin east.
Chris: [Laughter]
Dave: Margin south.
Chris: Oh, Dave.
Dave: Then every language has a gravity object, which changes...
[Laughter]
Dave: The--
Chris: Yeah.
Dave: Yeah, the geological compass.
Chris: I'd say just show up in the threads, Dave, and just--
Dave: Yeah, just...
Chris: But be really bold about it.
Dave: Do these big, long reads. Those dudes are just like--
Chris: Yeah.
Dave: --really assertive.
Chris: Yeah.
Dave: Overly assertive.
Chris: Nineteen paragraphs and you're just not even open to debating any other possibility.
Dave: Yeah. Yeah.
Chris: That would be good. Okay, so that's logical properties. Super, super cool. Rough edges but still pretty darn usable.
Adam: Yeah.
Chris: You pick one on this list and we'll riff. Go.
Adam: Well, the next one there is "is" and "where," which have support everywhere, so they're low risk. They're almost no risk. I think they're low risk because they're tricky. I don't know. They're two new pseudo selectors and they're functional pseudo-selectors and they take a wide range of stuff in between those parentheses.
Chris: Yeah.
Adam: They're almost like risky in terms of complexity for you, but they can solve a bunch of complexity. That's what they're there for. There is sugar, except "where." Where does bring a brand new superpower, which is crazy rad. If people are like, "The cascade, I hate you," you could just wrap everything in "where" and then specificity is pretty much toast.
Chris: Mm-hmm. So, they're parens. They're pseudo-selectors, so they have colon is and colon where, and then parentheses because it's a function, I guess. [Laughter]
Adam: Yeah, it is. Yeah.
Chris: Then what's inside is just a comma-separated list of selectors, just any selectors you want, and they both have different behavior there. Is, I believe, takes the most specific one from the list and then the whole thing becomes that specific.
Adam: Yeah.
Chris: Where just wipes it all the way out to zero, right?
Adam: That is correct.
Chris: That's not really why you'd use it. To me, those seem like -- maybe it is. Okay. You can't forget about that, but I would say that on the box, the description, the marketing for these is that it makes you be able to write a selector more tersely.
Adam: Yeah.
Chris: Than a really big, gnarly -- you know if you want to select the H3s, H4s, H5s, and H6s within a section and an article, that's going to be a sucky selector to write. Whereas, with is and where, it just gets a little easier. That's a tough one to mouth blog. Sorry, team.
Adam: It is. Yeah. I think you did good there.
Dave: You know where this is going to be cool for me? I still write Sass, right? I am nesting stuff. When you do article H1, OH2, H3, H4, H5.
Chris: Yeah. Yeah.
Dave: Okay. P UL OL, I'm doing all these repetitive just base styles for this article component or whatever.
Chris: Yep.
Dave: That in Sass will spit out 400 comma-selected things.
Chris: Yeah. This is a little bit like nesting. You're right.
Dave: This has some nesting power, so I can just kind of now switch those big 12-element blocks [laughter] when they're nested. Now, it will only be one rule.
Chris: Right.
Dave: That's pretty damn cool from a CSS.
Chris: Yep, it is cool.
Dave: I literally just eliminated -- I don't know -- I mean 12 selectors from my little form bootstrap, you know.
Chris: I'd say easier to reason about, too, especially if they are all the same specificity in there anyway. Like they're a bunch of tags.
Adam: Yeah. Yep.
Chris: It is going to get weird when they're not.
Adam: It's funny you all mention it feels like nesting because "is" unlocked nesting from a technical point of view.
Chris: Did it? Which you've put in the moderate risk category, but let's do it.
Adam: Which I put in the moderate risk and I am so proud to say that it's going to get attention this year in Chromium, so we'll be able to have native nesting soon. There's a lot to talk about in just nesting so hopefully, we get to that one at some point because it's not exactly like Sass.
Chris: Well, let's just do it.
Adam: Yeah.
Chris: No, I'm sure it isn't. I am excited about that because certainly, nesting feels -- I think a lot of people have muscle memory for nesting.
Adam: Oh, yeah.
Chris: When they don't get it, it bugs me. It certainly happened to me just in the last couple of weeks where I was working on somebody else's WordPress site and they just went raw CSS. I was like, "That's fine. I should have no trouble with this," but I have to admit, since all of my projects use different, exotic tooling, that just writing CSS--while I was not afraid to do it--was a bit weird and I did miss the nesting immediately.
Adam: Yep. Same. I kind of loathe the moments that I have to unnest. I'm like, "Oh, I guess I'll go flatten this for CSS. Okay."
Chris: Mm-hmm.
Adam: [Laughter] Yeah, it's like, all this repetition. I'm like, eh, it just makes me shiver.
Dave: You know what I do? I copy the CSS. I go to CodePen. I paste it in and say, "View compiled CSS," and then I paste it back.
Chris: Yeah, copy it out. Yeah.
Dave: That's the best way to do that.
Adam: I need to start doing that. I don't know why I do it by hand. That's ridiculous. [Laughter]
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you by Netlify. High five, Netlify.
You know they've got a new thing that they're talking about called Distributed Persistent Rendering? Very interesting approach. Let me do it real quick here, although it does take a minute to wrap your head around. So, if I don't get it perfectly, we will be talking about this more. It's very interesting.
Imagine a site that has 100,000 pages on it because it's a newspaper site that has a decade of content on it, or it's an e-commerce site that sells just endless products, so they just need pages and pages and pages. But you like JAMstack as a developer because you know it's fast. It's secure. You can use cool DX tools to build sites. JAMstack is a great way to build almost any website.
Those really big sites with lots and lots and lots, hundreds of thousands, millions of pages, the JAMstack solution hasn't been awesome for. It's been almost like maybe we should just not do it. But there are some solutions. One of them is, okay, well, we'll just serve a shell page for something like a product. Then in client-side JavaScript (the J in JAMstack), we'll hit some data store and build the page from that. That's still JAMstacky. That's cool, but it's just not prerendered, pre-server-side rendered that's also kind of spiritually JAMstack. Maybe you'll do it that way.
But this new distributed persistent rendering is kind of like there's probably a tool that could pre-generate that page, like 11ty, Gatsby, or whatever - a static site generator. But we're going to defer it. We're going to have that run in a cloud function, and we're only going to build it once it's been requested once. That's true on production, staging, a pull request, or whatever. You have maybe five of them get requested on staging just because people are checking stuff out. It doesn't mean that there are 100,000 pre-generated pages.
It's like when they were requested, they were built then stored on the CDN, as they should be, just those five. But then you go out to production and all of them are getting hit, so they're being built and put into cache as they're being requested but not before. That makes your build time super-fast and supports this large-scale architecture better.
I think I understand it to some degree. It kind of reminds me of WordPress cache, how it used to work, how the first request maybe for an un-cached site would run PHP and hit MySQL for the data and stuff. Then it would be built into an HTML file and stored on disk so that the next time the page was requested, the caching plugin could just pull the file from disk. It's kind of like, it feels like, but with modern architecture in mind.
Very cool. High five, Netlify. Thanks for the support.
[Banjo music stops]
Chris: I know Adam's style, though, you mentioned preset N that I'm kind of coming around on that idea, but that one, PostCSS, has a nesting plugin and I've seen plenty of your code that just uses the theoretical new version of nesting.
How is it different? Why is it different? What's going on?
Adam: Yeah, so the nesting PostCSS plugin was built a while ago when the draft first came out, and the draft has changed in the past year. Tab and I have been editing it. I'm just super-stoked on it. I'm like, "What can I do to help you, Tab? Your spec is cool. People want it." And so, I'm in there helping him out.
It turns out that we changed a few things, and so the PostCSS plugin does its best to emulate where that spec was. But since it's not real, it can't do everything. For example, something that the PostCSS spec and nesting and Sass nesting can do is kind of create new strings. You sort of nest with the mentality of appending, or you nest with the idea of concatenation and forming strings.
Chris: That's right.
Adam: That is a cool trick. A side note: Sass wishes that they didn't allow this as much. Apparently, it's caused a whole bunch of issues, like the whole bend building selector thing is just hard to search in your codebase, et cetera. So anyway--
Dave: And dash, dash my thing, or whatever.
Chris: Oh.
Adam: Yeah.
Chris: The ampersand is what they don't like?
Adam: It's more like they wish they hadn't enabled so much concatenation because it makes it hard to find the source item, the endpoint...
Chris: Yeah, fair enough. It is.
Adam: Anyway, that was a side note. But what's happening in the proper or at least not the proper -- the official CSS -- well, it's not even official. I guess the draft CSS working group's spec is these aren't a string that you're messing with. These are tokens. These are going to be more alive.
Chris: Oh.
Adam: What's interesting about that is you can't concatenate things, so that will almost immediately some of folks' use cases for nesting. But I think what they'll find is that the spec nesting is a lot simpler, so there is less to learn and less tricks, and it's way more blunt.
Chris: Hmm.
Adam: But it's blunt in a good way, and it's a way that it's really minimal and it reaches really far. I have very little complaints about it other than I tried to twist it and do this funk and it doesn't like it.
Chris: Yeah. Well, let me throw a couple at you.
Adam: Sure.
Chris: One of them is, I think we don't need to cover what basic nesting is. It's like there is a UL and then you want to style the LI because you want the selector to be UL LI. Fine.
Adam: Yep.
Chris: Of course it can do that, or better be able to.
Adam: Yep. [Laughter]
Chris: In Sass, here's a weird one where you have dot module. Then within it you say body dot about space ampersand. You say, I want to select the module, but in the context of body dot about. Is it going to handle that one?
Adam: It can handle that, yeah, and so that's where you use -- there are two ways to use nesting in the draft. There is the and symbol at the start of the nesting selector. In Sass, you can just start a new selector.
Chris: Yeah. You don't have to use the ampersand.
Adam: You don't have to.
Chris: Right.
Adam: In this draft spec, you do. You have to clearly indicate that this is a continuation at the beginning of the new selector.
Chris: Okay.
Adam: Or if you want to nest that "and" somewhere inside of that selector, exactly what you're describing here, inside of the body, you want to sort of reference a parent.
Chris: You can?
Adam: You can.
Chris: I thought I read you can't.
Adam: Yeah, you use at nest.
Chris: Oh, that's great.
Adam: You can, yeah, so you start the nested selector with at nest. What that signals to the parser is that an "and" symbol will show up in here, at which point the token and the previous selector will go in that spot. It's almost like string replacement but it's not. You've got to think about these things as live tokens because that way you won't find yourself trying to concatenate. K
You can build a selector. You can build a compound selector or a complex sector, but you cannot string concatenate in the new spec. Anyway, I think I confused it. Yes, you can use--
Chris: No, but that does matter, though, because what about Dave's issue there with ampersand dash dash? The reason you would start an ampersand and no space after the ampersand dash dash is because you're not really selecting a child. You're just altering the first selector, like BEM style.
Dave: Yeah.
Chris: Does it support BEM-ish approach or no?
Dave: I'm abusing Sass.
Adam: No BEM-ish approaches.
Chris: No BEM.
Adam: Yeah.
Dave: Question: Okay, so I'm looking. I've got dot foo, right?
Adam: Yep.
Dave: I'm looking at the spec right now.
Adam: Word.
Dave: Big boy stuff.
[Laughter]
Dave: I have brackets, color red, at nest, and dot bar and space dot bar.
Dave: Ooh!
Dave: Color blue, so all my bars turn blue. [Laughter]
Chris: You put the ampersand right in the middle of a nest here.
Dave: Yeah, so you use the at nest, but I'm wondering. Can I trick this? Can I do at nest dot parent has and? Can I do that?
Chris: Well, there is no....
Adam: Is there a space after your at nest?
Dave: At nest space dot parent colon has parentheses and. Can I use it that way?
Adam: Yeah. You're passing your token.
Dave: And now I have a parent selector. Now I have a parent selector.
Adam: You--
Dave: I tricked the browser, and now I have a parent selector.
Adam: Yes, because you know the parent.
Dave: Ah-ha-ha, idiots.
Adam: Although, let's--
Dave: [Laughter]
Adam: Yes, okay. Yeah.
[Laughter]
Adam: I've done the same thing and it is, it's really nice because I think what you're doing is you're putting the context of the augmentation with the original component as opposed to what we'd have to do before, which was stick it in because you had to know the parent ahead of time.
Dave: Yeah. Yeah.
Adam: But the condition is that we're still not selecting a parent. We're still selecting the children in context of a parent. Yeah, I think the parent selector that everyone wants is they don't want to end up with children at the end. They want to end up with a parent eventually.
Chris: Hmm.
Dave: Yeah, yeah.
Adam: Which CSS always -- you know selectors always go down. Anyway--
Chris: This is sweet.
Adam: Yes, you could do that. You could do it. Yeah.
Dave: Ha-ha-ha-ha-ha.
Chris: We kept saying at nest. You don't always have to write at nest. You only have to write at nest if you're going to do something weird.
Adam: Yes.
Chris: Like put the ampersand later.
Adam: Yep.
Chris: But if you're starting with the ampersand, it's fine. You can just start it with the ampersand.
Adam: Yep, and some -- linters might be like, "Let's get rid of the ambiguity and always start with at nest." You could just always clearly indicate, "I am nesting," and whether or not it's the first token that you're going to pass into the selector or not, you're just sort of like being really explicit. Yeah, you could do that too.
Chris: Looks good. You could write your Sass that way if you wanted to. You could always use the ampersand.
Adam: Yeah.
Chris: I never see anybody do that ever, but you could.
Dave: I like this. The spec is actually one of the more readable specs I've ever come across--
Chris: [Gasps]
Adam: Thank you.
Dave: --because everything is like -- there's like an equivalent to, and they're all like is selector.
Adam: Yes.
Dave: So, you're right. That is has really just opened the door, huh?
Adam: Yep, and that's also the only gotcha, I think. Okay, there are two gotchas with it. The first one I shared, which is, it's not a string-building mechanism. The second gotcha is that it is "is" under the hood, which can--if you're building something really tricky and let's say you throw an ID selector in there and then it gets turned into an "is" selector--your nesting specificity just acquired the highest specificity that it was nested with next to.
Chris: Oh! So, you can't say, "Please use where under the hood." That's not an option.
Adam: You cannot say, "Please use where under the hood." I have had this conversation with Tab. Essentially, the resolution is, well, you can just make two selectors.
Chris: Two selectors. Yeah, there you go.
Adam: And then get yourself out of that issue.
Dave: I'm going to fix it. Here's how we fix this. Instead of--
Adam: [Laughter]
Chris: Gravity.
[Laughter]
Dave: We use that weird German character that looks like a B and kind of looks like an ampersand instead.
Chris: Oh--
Dave: That's your where selector.
Chris: Oh, that's not bad. I like that.
Dave: See--
Chris: Yeah. What is that thing?
Dave: Scharfes? I don't know.
Chris: Yeah, it's a good one.
Dave: [Laughter]
Chris: I like this idea of things that unlock doors, though.
Adam: Yeah.
Chris: It is unlocked nesting. That's cool, and we know (to some degree) that containment unlocked container queries.
Adam: Absolutely. Yep.
Chris: Let's play that little game for a moment. I'm not sure I even super understand containment. It's the contain property in CSS. It has a bunch of values like layout, size, and paint. To me, it feels -- I hate to say this -- a little bit like will change or a little bit like responsive images.
Adam: Yep. It's just like that. Yep.
Chris: Where you don't need this but, if you do it, you're teaching the browser how to be more efficient.
Adam: Yep. I like the word hint. Will change is a hint to the browser. It's almost like you're whispering like, "Hey, I'm going to be changing this property."
Chris: Yeah. Yeah.
Adam: And so, containment is like, "Hey, this thing is probably going to change, but don't worry about the rest of the page. Don't cause the whole page to reflow when this thing changes."
Chris: Yeah.
Adam: "It's got it under control. Trust me here. I'm going to prevent a whole bunch of bubbling work," I think is the main hint that you're trying to do.
Chris: Sure, which to me is like, fine, but not my favorite thing in the world that I have to think about that.
Adam: Yeah.
Chris: But okay. Since we have it, that somehow unlocks some doors for container queries to work such that you don't just get to use container queries just out of the gate. It's a prerequisite to contain them. Yeah.
Adam: Yeah. The container is sort of declaring and blocking its effects that could have become recursive. It's almost like the recursive stopper, and that's why it's enabling so many things that otherwise had previously caused recursive changes. That's a whole fun topic to think about the loops that happen. Yeah, that's the intent here.
Chris: Sure. We should not. We'll probably end up talking about container queries for a year because they're such a big deal.
Adam: Yep.
Chris: But in the vein of things that unlock other things, this is one that I don't think has unlocked yet but maybe will soon is that I think of focus within, which is on your low-risk category and, as far as I know, has been around for a couple of years. I've used it.
Adam: Yeah.
Chris: Really cool. It unlocks some interesting even accessibility things that it does. But that to me is a little bit like a parent selector because you're saying form-focused within P or whatever. You're only selecting that P if the parent is in a particular state, so you're kind of--
Wait. Yeah. You know what I mean.
Adam: Yeah.
Chris: You can select the form if a child is in a particular state, so how interesting. Isn't that kind of a parent selector - a little bit?
Adam: It is, yeah. It's funny how that focus within gave way to target within.
Chris: Oh, I don't even know this. I know what target is. That's the thing where you're like, when the URL has an octo thorp in it that matches the ID of something on the page that target would match. So, does target within mean I'm selecting a parent that something within it is within target?
Adam: Yeah, like the header in my card, so you can raise a card's shadow if the child header inside of there is matching the URL as the target.
Chris: Yeah. That's tremendous. I really like that.
Adam: Yeah.
Chris: I do that with like a comment thread. You link to a comment. It'd be nice to grab the LI wrapper of the whole comment, not just some arbitrary thing.
Dave: You could highlight the comment.
Adam: Yeah. Put a nice pink border around it. Yep.
Chris: But I guess the ID of the LI could have just been the thing that has the target, but now we're just not limited to that.
Adam: Yep. [Laughter]
Dave: Well, does that work with Chrome? I say Chrome because that's usually what I see it in. That weird text selector, the colon squiggly?
Adam: I don't know how that affects--
Dave: Does that do target?
Chris: I don't think so.
Dave: Okay.
Adam: I think that's something new. I think it's maybe piggybacking on the concept of target. But yeah, it's a little new because that has a range instead of a single target.
Dave: Yeah. Yeah.
Adam: Yep. [Laughter]
Dave: I mean I thought it just worked for text.
Chris: It won't be long until we're talking about a CSS property to change what that looks like because right now it's bold ass yellow. I'm sure at some point people are going to be like, "Can I change that, please?"
Adam: Yep.
Chris: Isn't there something on this list that's in that vein, something about spelling or something?
Adam: Spelling and grammar, yeah, I was like, nice segue. Yeah, actually, there is, and it was moved through the CSS working group a couple of months ago, a way to style that highlight so that you can keep it on brand.
Chris: Yeah. I like that. Of course, I just like to have control over things, but there's always a contingent, and people are like, "Don't mess with browser UI." Literally, every time I've ever changed a scrollbar, even though that's a spec thing you can do--
Adam: Yeah.
Chris: --there is a contingent of people that are like, "That's native Chrome UI," just like a radio button is or something. There's a kind of spirit of, like, "Don't mess with that stuff because people know how the native version looks and works."
Dave: Who hath moved my cheese?
Adam: [Laughter] I see both sides. Sometimes, to bring an element of whimsical and uniqueness and attention to detail, a little change to a scrollbar goes a really long way there. But if your goal is -- I don't know -- yeah, it's just kind of hard.
Chris: Yeah.
Adam: It's hard to decipher what's right.
Chris: Whatever. It's like now that the dam has broken and there are so many things that you can control, why would you allow half of them to be controlled and the other half not to be? It's like the dam is broke. Let's just make them all styleable.
Adam: Yep. Well, and that's what we have with spelling and grammar here. The idea is if there is a spelling error and you're a writing app or a tool that has an opinion here, you can style those differently.
One of my examples in the talk I give is neon. I just love neon stuff, especially with HD colors. HD neon, you know, grammar issue underlines, and it's like, boing, and it's just really cool, so stuff like that.
Chris: [Laughter]
Dave: Right now, it's like you only get FOO and OFO, right?
Adam: Yeah.
Dave: If I even just wanted to, like, let's use my brand red or my success color or my error color, you couldn't do it, right?
Adam: You can't do it today, I don't think, unless you're grabbing the reins and doing everything yourself. Yeah.
Dave: Can we talk about grammar check, in general? There is spellcheck attributes and stuff like that, right?
Adam: Yeah.
Dave: I assume grammar check just hides in spellcheck. I don't know.
Adam: I don't know. Yeah.
Dave: There is a grammar check, but is this something that's going to roll out to every browser? I feel like it's a sometimes feature, right?
Adam: There are a lot of CSS specs that kind of -- I'm totally with you right here. There is another one for queue and is just sort of like the closed captions styles of your tracks over a video. There's a spec to be able to style that so that it could be, instead of -- you know, let the user have options.
Chris: Yeah.
Adam: You could give them three choices and style it, or it could be on brand and be hot pink.
Chris: Mm-hmm.
Adam: Make sure it's accessible, but yeah, these kind of fall into that vein of, I would love that but no browser is choosing to do that work right now. Yeah, I don't know when we'll get it. Things like spelling and grammar, I think they're in the high risk here. Oh, they're in moderate risk. I guess they should probably be closer into the high risk because there is no implementation of it.
Chris: Yeah.
Dave: Yeah. I feel like -- I don't know. It's maybe implemented for certain sites like Word online or whatever, but maybe they're doing their whole custom thing or something.
Adam: Oh, the origin trials kind of issue?
Dave: Sort of, yeah.
Adam: Yeah.
Dave: Sort of like a for this website only. But I love how you're -- I don't know.
Chris: Well, things are powered by incentives, right? We've seen that time and time again. If Apple were to make pages in the browser, they'd probably just implement this right away, and so they would have it. They made a fricken' glossy shadow CSS thing for like one keynote, so there's that.
Dave: If Apple made messages in the browser, we'd have a BG fireworks....
Chris: [Laughter]
Dave: You know?
Chris: Yeah.
Dave: It'd be great.
Chris: We have new CSS for the notch, so there's also that.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Around. That's around.co or follow the link in the show notes.
It's a new video calling app that's very different from the other video calling apps out there, I'd say. They say this, and I think it's really true. It's designed for collaboration more so than for meetings. It's not this big rectangle and you're just looking at everybody in the rectangle.
Each person that you're talking to is kind of like a floating head. You see their face cropped into a circle and then part of the UI and UX of it, there's a lot of fun built into it. You can apply filters to it and stuff. It just feels a little bit less fatiguing to know that you're just a talking head on somebody's screen and they're not looking at every pixel that your camera is picking up.
It's really clever and it feels really nice. Yeah, they say it's more for collaboration. I think that's true.
It's very easy to fire one up. You fire it up in the app. Get a link. Share it with somebody. You're in the meeting. All kinds of security built into that. You can make sure that you have to approve them before popping in. Nobody is going to bomb your meetings anyway, but lots of protection there.
You're in Slack, you just type /around. It pops open a meeting. Everybody clicks into it. We'll probably use that a billion times. That is how things work. There's that pseudo-real-time thing of Slack. "Hey, can we chat this out?" Boom. /around, you're in there. It's great.
There are lots of fun UI and UX touches as a part of it that's great. The screen sharing is really nice. It's everything you expect in there. You share the whole window or select a particular window to share.
It has the control aspect built-in, too. If somebody is like, "Hey, let me take control for a minute. I'm going to type here." I do a lot of pair programming that way. It's got all those features built in.
Out of the gate, it's just a great video call app, and it just seems like it has a super bright future because they just really got the details right. Thanks, Around.
[Banjo music stops]
Chris: Let's see. Aspect ratio is on here. That's another one that you can and maybe should use today because it's fricken' awesome.
Adam: Yeah.
Chris: There are always two sides to a coin, right? There's so much talk about core Web vitals, layout shift, and stuff like that. If you correctly use aspect ratio, even in a fluid place, you might just be buying yourself a lower SLS score, which is a good thing.
Adam: Yeah, that is true. I find I can use aspect ratio as an upgrade path pretty easily. I have to do the old annoying thing by default and then do the new fun thing as an upgrade, especially because you can transition it now, and so I have a site where if you're in Canary and you resized, it'll go from 16x9 to a square really smooth.
Chris: Hmm.
Adam: I'm just like, that's cool. You know?
Chris: That is cool. Oh, you can animate aspect ratio?
Adam: You can animate the aspect ratio.
Chris: What?!
Adam: You can transition between them. How cool is that?
Dave: And with object-fit, this is so much gold.
Adam: Yeah.
Dave: It's so good.
Chris: I'll raise my hand to say my minor gripe about it is that it's often paired right next to we used to have to use padding-top and now we can use aspect ratio. They're not one-to-one. When you use padding-top, you had to then absolutely position a container inside of it or something to get the content. Padding top will push the content that was inside of that box now below the box. Aspect ratio doesn't do that. They're not one-to-one. You had to do more trickery with the padding-top thing. It's not just like replace one property with another. Anyway--
Adam: Yep. I reach for this one right away these days as like a prototyping tool. It's just so nice. I'm like a box aspect ratio one. I'm like width can be whatever.
Chris: Yeah.
Adam: As a box forever.
Chris: Mm-hmm.
Adam: Ooh, that rhymed. Anyway.
Chris: I've been using it too. I love it.
Dave: No. Yeah, for roughing out, that's great.
Chris: Yeah. It's one of those bummer ones, though, when you pop open Safari to look or whatever and you're like, "Nope."
Adam: [Laughter]
Chris: Just like Flexbox.
Adam: Yeah. Yeah.
Chris: Has that one shipped yet?
Dave: Flexbox gap, no, I got busted on that in a PR recently.
Chris: Did you?
Dave: Yeah. Yeah, and I was like, "You know my care-ometer is about right here."
Chris: Yeah.
[Laughter]
Dave: Because what? If those two elements smooch--whatever--that's not a big deal.
Chris: Just wait a week. It'll ship.
Adam: I have sights with that. They're currently smooshed and I'm just like, "Well, eventually they're un-smoosh and it'll be great."
Chris: Yeah.
Dave: They'll get an upgrade.
Chris: The gap in Flexbox is huge.
Adam: It is huge. The gap is so huge. Actually, can we move into a leading trim next?
Chris: Oh, sure. Let's do that.
Dave: Okay. Yeah.
Chris: But I know you're a super gap advocate, so if you could roll it into gap, that would be cool.
Adam: Yeah, the idea here with leading trim is, okay, you've got your letter box. Here's a fun problem. You create a button, and you put the word "rad" inside of it. You give the padding in the top and bottom the same so that you....
Chris: 0.25 rem, yeah.
Adam: Right? Okay, 0.25. Okay, and then you look at your button. Then your designer goes, "It's not in the center."
Chris: No.
Adam: You go, "How could it not be in the center? The padding on the top and the bottom are the same." Then you go, "Ah!" [gasp], and you look at your line-height. You're like, "Oh, my line-height -- my letter box is all big and weird and offset," right?
Chris: 0.7, yeah.
Adam: So, you go try to shrink it, and you do all this nasty stuff or whatever. You try to guess it anyway, so what leading trim lets you do is say, "Okay, all that fluff and cruft above your cap height, let's go ahead and trim that off."
Chris: Yeah.
Dave: Ah.
Adam: That fluff and cruft underneath your cap letter, including descenders, let's just go ahead and trim that off. Now what you have is a letter box that is -- I like this word -- shrink-wrapped. It's shrink-wrapped to the word.
Chris: Yeah.
Adam: Which is the way you want to think about it, which is the way you think about your components.
Chris: But it does cut off your descenders and stuff.
Adam: It does.
Chris: Yeah.
Adam: Yeah, you've got to bring in your own gap and that's kind of what's next. You get a concept of letting. You get a concept of gap once you've trimmed these properly or once you've trimmed them.
Now you have, yeah, the same mentality where we like to shrink-wrap our components and not use margin as much anymore and lean into gap, we're kind of seeing that happen in the typography world where we could trim off the margins off of these letters, kind of in an unsafe way, right? There is an unsafe aspect to having no margin on your components. Then opting into doing it yourself. Then you have this rhythm. You could use custom properties, create a rhythm, and really go nuts. It's kind of cool.
Dave: But then it's like -- is there an apparatus to add back in my own top and bottom letting, or does line-height just mean something now? [Laughter] Just use line-height?
Adam: That is a good question. I think line-height just means something more now because, yeah, what line-height means today is more like the box size for a letter.
Dave: Mm-hmm.
Adam: It's like a safety measure because the Web always wants to have letters be legible, so they just sort of like lean on the font to put the box properly inside of that. That's why sometimes the font is off is the person who owns the font says, "Okay, well, visually, center is this," and then they deploy it to the Web and the Web has a different concept. Anyway, they get mixed up.
I think, yes, this would. Yeah, that would allow you to do that, though, Dave.
Dave: Is anyone--?
Adam: Microsoft apparently was hacking on it last year. They wrote an article about it. I have been chasing it for the past month or two. I want to know what the current status is. I'm like, "Can I play? Is it in Edge anywhere?"
Chris: Yeah. Yeah.
Adam: What's the status?
Dave: Hmm.
Chris: It looks good. It almost looks like one of those maybe a contender for the old reset style sheet, you know, maybe the old star selector for that one. You know?
Adam: Oh, like it could be a new edition?
Chris: Yeah. Well, yeah, just make all my type like that, please, because I like that.
Adam: Yeah.
Chris: Unless it's not performant or something, but that tends to not be the case in CSS. You can do whatever you want in there. Wonderful. Thanks.
Adam: Yeah.
Chris: Think of your style sheet everywhere you use margin. God. People must use margin relentlessly in their style sheets. It's probably one of the most commonly used CSS properties. Adam is saying it's on the way out. I don't want to put words in your mouth, but it was kind of an Adam guess at one point.
Adam: Yeah. I do star margin zero on my style sheets to start now.
Chris: Hmm.
Adam: I'm just like, "Go away. I'll bring in spaces."
Chris: But then any time you would use it, maybe you're in a situation where it's either columns or Flexbox or grid, and that thing that you would have been using margin on becomes a gap.
Adam: Yes.
Chris: That's kind of the overall thought?
Adam: Yep, is that the ownership of spacing is off the component. It becomes on a parent container that is aware of the layout and the context sort of thing.
Chris: Yeah.
Adam: Yeah.
Chris: Conceptually, that's big. It's not that you're just replacing margin with gap. You're moving who is responsible for the spacing.
Adam: Centralizing it.
Chris: Yeah.
Adam: Yep. Instead of children having to willy-nilly spacing that they acquired from willy-nilly origins, yeah.
Chris: That's big, you know. That's big.
Adam: Yeah, I agree.
Chris: It's one of those things that makes you think about your whole style sheet, like container queries. I've been meaning to do this because I think a lot of people have said this over and over, including me, was, like, if we had container queries, all of our media queries would be container queries. I have yet to see an analysis. I'm going to put my money where my mouth is and actually look through a codebase and see which ones that actually is a true statement for now that it's kind of a real thing.
I wonder if we could do that with margin, too. Like you said, it's a little different because now their responsibility level has changed. But I think if I was approaching a new design system, I would do it in that way. I'd say, "Children, you are not responsible for your own margin. We're going to move that one up."
I don't know if it'll hold up forever. I don't know if it'd hold up for a button. But it would certainly hold up for, like, the medium-sized boxes on a page.
Adam: Yeah, I think the spot where gap fails for me is when I need something more dynamic than a consistent space. If I need to go big gap on top, medium gap in the middle, smaller gap underneath, gap doesn’t do that.
Chris: Oh.
Adam: Gap is like, "Here's the space between all of them in the row of spacing."
Chris: I see.
Adam: I'm like, "Ah, yeah, but I want to give you three. Can you loop over three dynamic?" It's like, "Nah, I can't do that."
Chris: Okay. Okay. There's that. That seems big. Then the one that annoys me a little bit is just like, I just have a column of block-level elements. That's just what block elements do.
Adam: Yeah.
Chris: I don't necessarily want to have to force it to be Flexbox and flex-direction column just so I can use gap because now I'm adding extra properties just for that one. It's like I'm not buying all that much, but -- I don't know -- tricky, tricky.
Adam: Yeah. You saw an article I wrote where I have that. There's like four layouts that do this thing, and I call it just for gap. I'm like, display grid.
Chris: I did see that, yeah.
Adam: I'm only doing this to this container because I want gap. It's like, yeah, there is something a little odd feeling about that, but--
Chris: Sometimes I like it. Sometimes I don't. I don’t know.
Adam: Yeah.
Chris: It reminds me of, like, there was a little round of articles at one point where you want to center a column. But instead of having a div wrapper and saying margin zero auto -- or whatever -- to push it to the center, make a three-column grid, star select every child, and put it in the middle column. Then you've centered it because now you have a left column that just happens to be empty and a right column that just happens to be empty.
Adam: Yeah.
Chris: There is something about it that just bugs me that I can't put my finger on. Part of it is that now you have to use something like gap in between them or something. I don't know. It's just a muscle memory thing. It's not that it's bad. It's just that it breaks my brain a little bit.
Adam: Totally.
Chris: Hmm. What's something high risk? Let's do a gnarly one.
Adam: I think we should talk about color.
Chris: Oh, yeah!
Adam: Color all.
Chris: I definitely associate this one with you.
Adam: [Laughter]
Chris: Because you've been pushing -- reminding people you don't need commas in your RGBs.
Adam: Oh, man. That's a spicy one, even at Google. There are so many googlers that are like, "No, commas are better!"
Chris: [Laughter]
Adam: I'm just like, "It's not up to us." I don't know. [Laughter]
Chris: Yeah. Dave, are you abandoning commas yet?
Dave: Oh, no. I use commas. I'm a sensible human being.
[Laughter]
Dave: That would be like getting rid of semicolons in JavaScript.
Chris: [Laughter] Fair enough. I lint those suckers back in there. To be fair, the new spec doesn't care. Well, maybe it does. You can't do RGB with commas and use a slash, right? That would syntax break it.
Adam: I think that syntax breaks it, yeah.
Chris: Yeah, but you can just use the old syntax - probably forever.
Adam: Definitely, RGBA your heart away. Yeah.
Chris: Yeah, but you can even RGB with a fourth parameter. That will even work. That's really--
Adam: It's nice.
Chris: Can you, or am I wrong?
Adam: I don't know. I think that's what the slash was for. I seem to remember that that syntax works, though.
Chris: Yeah.
Adam: Yes. Oh, maybe it took a decimal, and now if you use the slash, it can accept a percentage or a decimal.
Chris: Oh, my gosh. That's weird. Is this what you wanted to talk about, or do you have something more interesting to talk about?
Adam: No.
[Laughter]
Chris: Yeah.
Dave: What's the slash do? I don't know what the slash -- now I'm confused.
Adam: Commas are cool.
Chris: The slash is the alpha the end.
Adam: Oh, okay. Yeah, the slash is the alpha.
Dave: Okay.
Adam: If you say HSL (like channel, channel, channel), you can do slash how opaque is it?
Dave: Okay, so we're going into a separate RGBA.
Chris: And why that's cool is -- exactly.
Adam: Yes.
Chris: You only have one function to learn.
Adam: You don't have to switch the function. Yep. Yeah.
Dave: I like that.
Chris: Yes.
Dave: That makes it easier to do background pink.
[Laughter]
Dave: Isn't there--?
Chris: Kind of.
Dave: Yeah. No, I mean so everything is kind of moving to this sort of three property sort of schematic.
Adam: Yeah.
Dave: Sort of. Yeah.
Chris: Optional.
Dave: Yeah, because LAB, these are new colors. There are new colors. Google or whoever, Apple invented new colors.
Chris: Google invented new colors. Yeah.
[Laughter]
Dave: Yeah, invented new colors and they're coming to the browser.
Chris: Only in the new syntax. There is no LCHA. That doesn't exist.
Dave: Uh-uh.
Chris: It's LCH only.
Adam: That's true.
Chris: What does LCH stand for? I have no idea.
Adam: Lightness Chroma Hue.
Chris: It means that your pinks are going to be hotter pink. So, if you're a pink fan, there's a lot of new hot pink available to you.
Adam: Yeah, I think that's what it is, is that the LCH color space, it has more colors to pick from than RGB. The numbers that you put in there can reach deeper into the display and potentially find, yeah, a hotter pink. You don't really think there's a hotter pink until you see the pink from RGB, and you're like [gasp]--
Chris: Oh, yeah.
Adam: "That's what I've been thinking is pink?" You're like, "What?!"
Dave: Yeah, this was surprising. Adam, you and I were messing around with this in a DM thread or something somewhere. I pulled up a demo or made a demo in CodePen of LAB and LCH.
Chris: Mm-hmm.
Dave: There's a new one, too, like the P3.
Adam: Display P3? Yeah.
Dave: That's like a custom profile, sort of, right? It's another color profile.
Adam: Yep.
Dave: I pulled all these up and it was like, "Wow! I would have never guessed RGB is bad," like SRGB is bad, but it was like not as good.
Chris: It's kind of bad. Yeah.
Dave: It was not as rad, and I'm not even snooty-snooty designer pants. I just would have never been like, "It's trash, dude. We don't use that anymore."
Chris: Because the mental model is that if you get more colors, you'd think they would just fill in gaps, not push the edges.
Dave: Yeah.
Chris: But in this case, it's pushing the edges wider. That's amazing.
Dave: RGB has 256 million colors, and I've never in my life been like, "Hey, that's not--"
Adam: [Laughter] Seriously.
Dave: I think we got it.
[Laughter]
Chris: Right.
Dave: That's a lot, y'all.
Adam: Yeah. I go to Walmart or some store of, like, ten billion. I'm like, "I don't care how many colors at this point. This is all over my head."
Chris: Right.
Adam: Yeah, it's all of a sudden meaningful now.
Chris: Because there are limits. That's why we use the word retina, right? At least Apple tried to because it means that that's enough. It's enough pixels that more won't help your eye because we're at eye level goodness of density of pixels. I don't know if that will hold up. I'm sure we'll keep trying to jam more pixels in there, but that's kind of a limit.
Dave: HDR displays and all that, they're becoming more common.
Adam: Yeah.
Dave: The theory is they just have more, a wider color spectrum in HDR.
Chris: Hmm.
Dave: I don't know. I was surprised. It'll be cool to see where this goes.
Chris: It's cool. It's cool. I want to see somebody beat HSL, though, for understandability. Fine, LCH looks okay, but it doesn't look as mentally understandable to me as HSL. HSL is amazing for that.
Adam: Yeah. That's funny. You should definitely dig into it more. Yeah, since its parameters are a little less limited, HSL is kind of nice. Zero to 100% is pretty much the extent of what I get to pass on the right.
Chris: Right.
Adam: It's like an angle in the wheel of color and then some value zero to 100%. LCH is supposed to be even more human-oriented because lightness is very special in LCH. Yeah, chroma and hue are a little bit less -- I don't know -- descriptive than what HSL was. I think it's a really small--
Chris: What does hue go from, zero to--?
Adam: It's still an angle, yeah.
Chris: Sixty?
Adam: Yeah.
Chris: Oh, okay.
Adam: Yeah, it's still an angle, zero to 360. Chroma is light saturation, but this is where you get into, yeah, the snooty snobby, what is the meaning of lightness versus brightness.
Chris: Hmm.
Adam: I think what chroma is specifically vibrance of a color, which is different than saturation.
Chris: I see.
Adam: Even though that's what saturation is sort of supposed to mean. And so, I find I have to deal more with lightness and chroma as a combination in LCH, whereas in HSL they felt more as individual channels. I don't know. That's the only learning curve I've had so far.
Chris: I could see that. That doesn't seem so bad. Lightness, chroma, hue: that seems about as good as HSL for human understandable, but are the rest of them that way too? Is LAB -- what's LAB?
Adam: LAB is funny. The first one is lightness and then it's A and B. A represents two colors (I can't remember) and B represents two colors, almost like if you had a gradient from these two colors in each hand. Then you're sort of saying how negative or how positive should you reach into those colorspaces.
Chris: What?! You're in computer territory now.
Adam: You're in computer territory, but what LAB is specifically good at and what it's shaped for -- so this is where you get into these functions give you access to colors via a shape. The LCH function has a color shape that it thinks of color in, like HSL thinks of it in a cylinder. LCH and LAB have these shapes, and so the shapes allow them to more -- at least in LAB, go from one color to the next in a gradient more smoothly through the center of colors better.
Chris: Right.
Adam: Where HSL ... wrappers. Yeah, you have articles on this in CSS-Tricks.
Chris: Well, and you're helping me fill the gaps here, though, of how these color models work. I only stole that one from a newsletter I get, or whatever, that has this because the center of RGB is zero saturation.
Adam: It's white, yeah.
Chris: It's white, and so you get a bunch of grays as you get close to hitting it.
Adam: Yeah, because it crosses straight through, and so that's why, yeah, you'll find a tool that goes around the white.
Chris: Right.
Adam: It tries to do that with math and it gets a better gradient because of that. Well, LAB is sort of built that way naturally where the vibrant colors are all bunched together in a way that when you interpolate these--
Chris: Oh, they're bunched together, so there is no -- because I would think, well, isn't it just some new two colors then that cross through to the gray zone of death?
Adam: It is, yeah. This is the claim that LAB has this smoother, better, more appropriate gradients, but I'm still playing with all of them, and implementations are still kind of changing.
It's still exciting. I'm just like, "Wow! At least I'll have the potential," because, yeah, once I saw the gray dead zone in the RGB ones, I'm like, "Ooh."
Chris: Yeah.
Adam: I do. I want out of this. How do I get--?
Chris: Yeah. The answer now is just to pick two colors that don't go through the middle.
Adam: Yeah.
Chris: But that doesn't -- you can't--
Adam: Or you can use a tool that will give you six colors and intentionally works its way around it so that--
Chris: Yeah. I think that's cool, but it does change the nature of when it's doing that. It's like, "Oh, now it's swinging through yellow. That's literally not the same thing. What if I don't want yellow in the middle?" or whatever.
Adam: Yep. Totally agree.
Chris: Mm-hmm.
Adam: It's not perfect.
Dave: Wait! Whoa. When do we get color? Right now, it's like Safari technical preview. Am I right on that? All these fun toys.
Adam: Yeah, so there is color level four and there's color level five. Color level four, some of it has already been implemented, so if we don't have none of it, that's why we removed the commas. So, color level four was like, "In preparation for color level five (and all these future ones) we're just going to get rid of commas."
They introduced these other colors paces, like LCH and LAB. Then in color level five, we get all the manipulation functions. That's where you get your color mix, your color contrast, and stuff like that. Color level four and five have various implementations across various browsers, so Firefox has color mix. Safari has color mix.
Chris: Color contrast.
Adam: And color contrast, which is super rad. Yeah, and the relative syntax. They have that in there too, which is sort of like de-structuring color computing on it and returning it all in one line. Yeah, it's sort of rolling out.
Chromium is last. Me and Una have been trying to convince Chromium that it was valuable for a while. All of a sudden, it just showed up, and we were like, "Yes!"
Chris: Nice.
Dave: Cool.
Adam: This is exactly what we need to convince people to continue working on it, and it's getting worked on. The Chromium canvas element can now support these additional color spaces, which means Houdini could soon, which means that the underlying concepts are there in the engine. Basically, Chromium didn't want to do it because these colors need a new memory allocation created for them. They're bigger numbers, right? They hold more data because they're reaching to a bigger space.
Dave: Oh, okay.
Adam: They needed an easy way to keep that optimized--
Chris: Yeah.
Adam: --without crashing a page because there's so much memory of just cool colors.
Chris: Oh, wow. Yeah. I think of it so linearly of, like, CSS syntax equals something in browser. But the story has a hundred more spokes to it than that, doesn't it? Ick.
Adam: Yeah, it's hard.
Chris: It's hard. Yeah. Very interesting. Let's try to end with a couple in the spicy category here. These are ones that are so risky that there's just a decent chance they just never ship, right?
Adam: Yep.
Chris: Conditionals is a fun one. I've seen this over and over. Not over and over, but enough. People use custom properties, and what they want is a way to have the custom property behave like logic, like bullion-style true-false, if this then that type of logic.
Adam: Yes.
Chris: You kind of can pull it off, but at the cost of some understandability, let's say.
Adam: Totally. Yeah.
Chris: Is that what this is trying to solve?
Adam: Yeah. It's trying to make it explicit. It's trying to give you some named properties that you could pivot on and trying to kind of bring that if/else syntax into the value area. I think that's what's really important about this. This is a conditional at the value level.
Chris: Right. It's not a conditional block of selectors like a container query is. That's like if the container is this size, then this entire block of styles happens. This is if the property -- I don't know. It's like props.
People are hot on CSS and JS because I can pass a big prop to my component and then, in my CSS and JS, the padding value can have a turn area in it that says if props dot big padding 20 to REM else.
Dave: Mm-hmm.
Chris: Colon in a ternary that one REM or whatever. That's appealing to a lot of people. They think in logic. And so, to bring that logic to the native syntax seems cool, and it looks like literally an if function.
Dave: Yeah, if.
Chris: Wow.
Dave: Question or whatever.
Adam: Condition. Yeah.
Chris: There's no then. It's just a ternary inside of it.
Dave: Yeah.
Chris: That's cool.
Dave: Comma comma true false.
Adam: [Speaking with the tune of the Karma Chameleon song] Comma comma comma comma comma conditional vals.
Chris: I bet we'll get it. It has a good feeling to me. I don't know why.
Dave: It seems simple and useful. High use. I think people, too, are doing this a lot in CSS and JS land. They're just burning through those if statements.
Adam: Definitely.
Chris: I like it. I like the idea of viewport units in there. That's cool. If we had not only viewport units but we had container units, isn't that a thing? Is that on your list somewhere? I didn't see that.
Adam: Container units? No. We have some new viewport units coming up, and there's been some talk about the viewport unit that includes Chrome and doesn't include the Chrome, like the search bar and stuff.
Dave: Mm-hmm.
Adam: But I don't know. Yeah, is there container--? I know, yeah, the container query is--
Chris: I've heard a little chitchat about it because I think, for topography of something that you have container queries in, wouldn't it be nice to style the font size? Again, not based on the viewport but on itself.
Adam: Yeah. True a style. Yeah.
Chris: Yeah. Yeah. Sure. It seems like it would be nice. I'm not sure I'd use the crap out of it, but it does seem to make sense. What's one percent of the width of a parent? There is no way to know that in CSS right now, right?
Adam: Yeah. Container width, that sounds cool to me.
Chris: CW.
Adam: Proposal. I don't know. Send me a link.
Dave: [Laughter]
Chris: Next on the CW.
Dave: I'll send you all of fittext.js.
Adam: Nice.
Dave: Which utilizes parent width.
Chris: It's funny. I hear different things. Everybody knows different stuff. I was talking to Eric Meyer yesterday. He's at Egalia now. He's like, "We have a build of Chrome with has selectors in it and it's fine."
Adam: Yeah.
Chris: So, it's like, "Okay. Well, that's something." I also know they have a build with switch statements in it, and that's in your super high-risk category.
Adam: It is. Yeah.
Chris: I don't know why. It's funny to think that it's so high risk when there's already a working implementation somewhere.
Adam: It's kind of cool sometimes, too, how fast they can prototype some of this stuff. It's really impressive. Some things are really minimal in your whole application. You're just like, "Oh, sure, client. That's actually not that bad of a change. We'll write a couple of tests. We'll put in a couple of lines of code. That's really all it's going to be in. Wow. That is. That's a nice new feature for very little." That happens.
Sometimes, it's not so little, like color where they're like [gasp]--
Chris: Yeah.
Adam: "Ooh, we need a whole new--"
Dave: We have to invent numbers.
Dave: Right.
[Laughter]
Adam: I feel like we need to squeeze in scope and layers, though, because those--
Chris: Do it real quick.
Adam: Okay, so at layer--
Dave: Go for it. Long show. Everybody, buckle up. Get some snacks.
[Laughter]
Adam: I don't think I'm going to bust through that many, but at layer is going to get implementations this year.
Chris: Never heard of it.
Adam: It got sent off from the working group.
Chris: No idea.
Adam: You've never heard of it. Oh, snap. Okay.
Dave: Oh, I love this one from Dreamweaver: layer elements. This is--
Chris: Go.
Adam: [Laughter] Dude, I remember those. Oh, man. They were so frustrating.
Anyway, okay, the layer element as an original HTML element, right? But it's deprecated.
Dave: Yeah, I think--
Adam: No, this is at layers.
Dave: Yeah.
Adam: At layer is if you think about when your page loads a bunch of styles. You've got the stuff at the top and the stuff at the bottom. The stuff at the bottom always overrides the stuff at the top, so you kind of have to do this weird juggle of order.
Dave: Mm-hmm.
Adam: What this would do, at layer, allows you to (at some point or at any point) create a layer like a cake for the page of where all the origins and all the style sheets should go from. You can be like, "Here's my reset layer. Here's my third-party layer. Here's my first party layer. And here's my overrides." Right? Even maybe in the way you think about it.
Now, when you write a style block or import a style sheet, you can be like, "This style sheet goes into this layer." You could import a third-party script at the bottom of your document that actually goes into the origin towards the top, meaning your styles still override it. It allows you to orchestrate the direction and the layers of all your styles.
Chris: It's kind of like you artificially -- like the ones that have a higher layer, you're saying, "Just kind of make all the selectors in this just more powerful. Put an ID in front of every single one of them."
In Sass, I do that once in a while where I do an ID selector and then put the import inside the ID selectors. Have you ever done that?
Dave: Yeah.
Chris: Every single selector in it is artificially scoped higher, but you're saying it's not quite specificity. It's something else.
Adam: Yeah, it's origin.
Chris: Yeah.
Adam: It's just allowing you to be -- yeah, you have more control over it because a lot of times there are multiple teams on a page or maybe you've done a lot of slicing and dicing in your backend. Your CMS, some of it is your control and some of it is not. At layers would allow you (in CSS) to just be like really clear about you're importing some styles. Put them here so that the order -- you're just much more in control of the order.
Dave: All my styles, like at layer Dave--
Adam: Yep.
Dave: This is terrible. Don't do this. [Laughter] At layer Dave is always higher than at layer bootstrap because bootstrap has all their styles. I always want my layer to go above bootstrap, right?
Adam: Yep. It's almost like that Sass file that you have where you've got everything in order.
Dave: Joke CSS? No, oh -- [laughter] The table of contents file.
Adam: I mean index.sass, or whatever.
Chris: What if bootstrap says P color red or, even worse, it has -- not worse, but just different -- it has dot red and it says color red? Then your higher origin style sheet says P color blue. You'd lose because that origin style sheet has a more specific selector than yours does. You would just automatically win?
Adam: This is like even if you loaded bootstrap last, you could make the browser think it loaded it before your user styles so that, in terms of order, it parses it and sort of applies it as if bootstrap was imported earlier.
Chris: Yeah, so it's just order, but specificity is still -- if there is a specificity conflict, those still get resolved how they normally are.
Dave: ...matters in CSS.
Chris: It's just order.
Adam: Yeah, it's just order, so I like to think of it as orchestration. You have all these different styles coming from all these different places. Right now, you don't have a great way to be like, "Hey, you. You go in this spot. You, you go here." Sort of like that, which kind of goes into -- oh, go ahead, Dave. Yeah.
Dave: Yeah, so in my example, I would actually at layer bootstrap first and then at layer Dave second--
Adam: That's correct.
Dave: --because I want Dave layer to always be the latter contestant.
Adam: Yep.
Dave: Okay. Okay. Can I do at layer default at layer overrides and then I can just write overrides in an at layer overrides bracket, just like a media query, all my overrides, and I don't have to go to important town? I just write overrides?
Adam: Yep.
Dave: That works?
Adam: That is exactly it. What's even cooler is you could load more styles, more overrides later, earlier. It doesn't matter when you load the overrides.
Dave: They could be in the Sass partial, right?
Chris: Yeah.
Adam: Yeah. Yep, it's super cool. You can kind of name them on the fly and import them in the right spot. Yeah, it's all about order and the sources of all these styles, and how do you kind of wrangle that. Then the next one I wanted to make sure gets in here is at scope, which is very much round-like.
Yeah, I want to scope some styles, like true scoping where I can put things in between two classes. I can say a range, so from this class to this class, these styles apply. Otherwise, they don't exist to you, browser engine.
There are a lot of really cool examples that you can use them with. Yeah. Scope and layer are both blessed by the CSS working group and have people working on implementations, so we'll see that stuff pretty soon. It's really exciting.
Dave: Whoa! That's exciting.
Chris: Truly.
Dave: I've seen this scope thing. I think, at one point, Miriam had proposed a donut selector or something. [Laughter] Get ready for that. No, it's cool. I want this. This is my secret. I want this to reach into Web components, but that's just me.
Oh, my gosh.
Dave: At scope go into a dang Web component, you jerk.
Chris: Wow.
Adam: Almost like how we had deep, so you could be like at scope--
Dave: Deep, yeah. Yeah.
Adam: Yeah.
Chris: Dude! You solved it.
Dave: That'd be cool.
Chris: Yeah.
Dave: I know. It's right there.
Chris: I really want the author level. I'm reaching in here because I know what I'm doing selector.
Dave: I think that's what scope does. It's sort of like, "I know what I'm doing. Just do CSS here, please," right?
Chris: Just do CSS here, please. Yes, that.
Dave: [Laughter] Stop it here. Just do it here.
Adam: [Laughter]
Chris: As much as I love custom properties, having them be the little trick to reach in there, blah, get out of here.
Adam: One of my favorite use cases with scope is like, right now if you have a light theme or a dark theme, the styles have to coexist on the page. One is naturally overriding the other, which is weird, right? If you load your dark styles after your light styles, then you have to -- anyway, it can get weird. With scope, you can be like, at scope dot light them, here are all my styles in light them. At scope dot dark theme, here are all my styles for dark theme. They don't compete because they're scoped. They aren't challenging each other at the global level. It's so cool.
Chris: That is cool. It kind of just feels good.
Adam: It does.
Dave: Yeah. Yeah, having two -- you could have two resets, basically, like your dark reset or your light reset.
Adam: Ooh, cool.
Dave: I mean that in -- whatever -- your initial -- my links are blue on this site, or my links are red.
Adam: Dark reset, is that what Darth Vader did?
Dave: Yeah, you've got to throw them in lava. Yeah.
Adam: [Laughter]
Dave: Well, this is very cool, Adam. This is a very hot year for CSS, 2021 here. What do you want people to take away here, or what's the big takeaway for people?
Adam: Ooh, I was not prepared for this, but I feel oddly prepared to tell people, go find Chromium, Firefox, and WebKit CSS features that you want and star that thing. It is super impactful. You just be like, "I have to create an account." Dude (or whoever you are), go there. Create an account. Star it. If all of a sudden if we were to rally--just like everyone did around GME and Dogecoin--and we were just to be like, "All right, this CSS feature, here are a thousand devs that just showed up and starred this one feature," it would have insane power. Folks, your stars are meaningful, and go give them out. They're free to give. Just dish them out. That's my request.
Dave: All right. You hear it, Shop-o-maniacs.
Chris: Yeah.
Dave: Let's go DDOS the.... [Laughter]
Chris: Pick your favorite one, and then pick one that's for accessibility too, so we don't only get the shiny features.
Adam: Definitely.
Chris: Okay. Thanks, Adam. That was awesome.
Dave: Yeah. Thank you very much. I guess, before we go, how could people follow you and give you money?
Adam: Nope, star stuff. I'm on Twitter as @argyleinc, YouTube is Adam Argyle. Yeah, find me. I share lots of stuff about CSS all day. Too much, probably.
Dave: All right. Perfect. 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, @ShopTalkShow, for tons of tweets a month. Join us on the [techno voice] Discord at patreon.com/shoptalkshow. It's jammin'. Go there.
All right, Chris, do you got anything else you want to say?
Chris: [Loud exhale] ShopTalkShow.com. I'm excited, though. This is a lot of stuff.