Igalia Chats: CSS Working Group Face To Face Live! | Igalia - Open Source Consultancy and Development

Igalia's Brian Kardell and Eric Meyer chatted with seven different participants at the CSS Working Group’s face to face meeting at Igalia headquarters — as it happened.

Jun 19, 2024

0:00

Mentioned Links

Transcription

Brian Kardell: All right, so here we are live at the CSS Working Group face to face.
Eric Meyer: A Coruña in Spain at the Igalia headquarters.
Brian Kardell: Yeah. This is the first time since Eric and I started working together that we've been in the same physical place.
Eric Meyer: Yeah.
Brian Kardell: It's pretty cool.
Eric Meyer: Yep.
Brian Kardell: So it's been pretty good, I think. What do you think so far?
Eric Meyer: Yeah, been some very interesting things discussed. I mean, some things that only a real nerd would find interesting. As with every working group meeting, there are issues that are effectively, we discovered this one very obscure interaction, how do we want to resolve it? And then that discussion goes on for 45 minutes.
Brian Kardell: Right.
Eric Meyer: But then you have topics like today, this morning, a proposal for decorating gaps in grid.
Brian Kardell: Oh, interesting.
Eric Meyer: And that did not take 45 minutes because everyone was like, 'This is really cool. It's a good proposal. Here are some questions we have about... Can we take this further than it currently stands or do we want to defer that?' In the end, the discussion pretty quickly came to, 'Yeah, let's turn that into an editor's draft.' So there will be an actual editor's draft of CSS Gaps and Rules, I think is what we came up with for a name.
Brian Kardell: Nice.
Eric Meyer: Yeah.
Brian Kardell: So it sounded like I was surprised just because I wasn't there this morning because I had to have an emergency trip to the dentist. Not really emergency, it wasn't painful or anything, but one of my crowns just decided to fall out.
Eric Meyer: And you got it dealt with?
Brian Kardell: Yeah, got it dealt with thanks to the Herculean efforts of my fellow Igalians who live here. So thanks for that. Yeah, I think it's been really good. We had an event last night. And Tab Atkins was supposed to be on the event, but he got stuck in...
Eric Meyer: Amsterdam.
Brian Kardell: Amsterdam. And so Eric filled in on the thing for him and I was left to try to MC that. I think it was a pretty good event.
Eric Meyer: Yeah. We had a fair number of local developers show up, and a whole lot of the working group was there. And when the developers had questions, there were a whole lot of people in the room that could answer them.
Brian Kardell: Yeah. And I had afterward, I liked that we ended about 15 minutes early. And I liked that we had a chance to just mingle and go talk to them because they actually had to ask us to leave. They had to say, 'Hey, we're wrapping up now.'
Eric Meyer: 'By the way, the building closes in a few minutes. Everybody out.'
Brian Kardell: Yeah, yeah. But there was some really, really interesting conversations with some of the students. I was talking to a group of first-year students and one senior, and they had a really lot of thoughts on different things. They were still really bent about Flash. Kind of blamed it on Adobe. That was kind of interesting. So we didn't get to finish that conversation unfortunately, because we had to leave. But yeah, it was good. So we're hoping to, throughout the week, pull in some people and just ask them what's fun, what's interesting, what's painful?
Eric Meyer: Right.
Brian Kardell: Yeah. So see how it goes.
Eric Meyer: Cool.
Brian Kardell: We're here live at CSS Working Group Face-to-Face at Igalia. And I'm here with Rachel Andrew. And I don't think anybody's ever done this before, right? Just done a little chat from a CSS Working group face-to-face.
Rachel Andrew: No, I don't think so. They've not dragged me into one anyway.
Brian Kardell: Can you help explain what is it like at one of these and maybe what do you look forward to? You have some items on the agenda, what are they?
Rachel Andrew: Yes, I've got some things on the agenda for the reading-order-items spec that I'm working on, which is a proposal to essentially give developers a way to say that we should follow the visual order, the reading order of a grid or a flex layout as opposed to always following the DOM order, which is what currently happens. So that turns out to be quite complicated to spec. So I think there's going to be lots of issues coming up over the next few months as we've got an experimental implementation in Chrome. So yes, it's quite exciting. It's something I've been trying to push forward for quite a while, so I'm very pleased to have those issues on the agenda and be sort of moving it forward.
Brian Kardell: And I think we mentioned this in a recent Igalia chat that we discussed this last time we hosted.
Rachel Andrew: Yes. It's what happens here. Obviously
Brian Kardell: Last time we hosted, you and I had discussed this, that we should do a thing like this. And I'm really happy to see, I hope I get a chance to contribute in some way to that 'cause I think it's a really good... should have happened a while back.
Rachel Andrew: Yeah, it's something we should have done, I think when we did Grid. Because we basically caused a problem with the way that Grid and Flex works and now we're kind of coming around to fixing the issues, so.
Brian Kardell: Definitely. Definitely. So yeah, I really enjoy when we get together. Do you find this very productive actually?
Rachel Andrew: Yes. Yeah. I think the nice thing about all getting together is we all work on different bits of CSS. None of us, apart from maybe Elika, are experts in absolutely everything. And so normally when there's meetings, you look at the agenda, we have our weekly call. And you look at the agenda, you're like, 'Oh, well these aren't any of my things really.' And so you sort check your email and do other bits while you're listening in. I think when we get together you get to discuss actually in person a lot more of the bits and pieces that maybe you don't take as much notice of. And that's quite interesting. You get to hear a bit more of the bigger picture as it were. It's a room full of people who are just really, really good at this and know all this stuff in depth. So there's definitely a lot to learn about the things that I don't normally cover.
Brian Kardell: Yeah. I think one thing that is really great about these events like this or just TPAC or whatever is even the stuff that's not on the agenda really. It's the thing that you're saying there, I think that you don't get in the online, even when we're in person, is the ability to just like you're having lunch with somebody, you go for a walk with somebody, you whatever, and then you get struck up in a conversation. You say, 'Oh, I'm really interested in that too. We should talk about that. What if we...' And new things are born and re-energized that way.
Rachel Andrew: Yeah. Well, I mean the reading order stuff, we mainly discussed that last time at lunch and in the breaks. It was something that we flagged up during the meeting, but it wasn't really an agenda item. And so that discussion was something that happened kind of as a back channel. And I think lots of that kind of thing happens. And also I think in person, you just get to see how excited people are about the different things they work on. And I think people would be quite surprised about that, about actually how much people care about specific things that they're pushing forward. And I think you get that feeling from people, you realize why they're so adamant that we should be doing something a certain way or whatever because you've got this whole picture when we're together and that really helps.
Brian Kardell: All right, so this is the crossover episode where we have Una from the CSS Podcast, Emmy Award-winning CSS Podcast.
Una Kravets: Oh, I wish.
Brian Kardell: Yeah. So we just wanted to just stop and talk to people who are here. So do you have some things that are on the agenda that you hear that you're really pushing, that you care about? Or are you here in more, like me, the general capacity?
Una Kravets: So for me, things that I'm interested in are being talked about right now actively. So things like anchor positioning resolutions, but mostly it was really convenient for me to stop by because I was already in Europe for CSS Day.
Brian Kardell: All right.
Una Kravets: And then I saw a bunch of people from the working group there. So we talked, a little pre-discussion about some of the issues. That was really fun. And then I'm going back to Amsterdam after this, so I thought while I'm in Europe, might as well come in person. It's so much better than joining online, which I usually do the virtual face-to-face. But yeah, definitely excited to see movement, resolutions on anchor. I want to see forward movement on Masonry, that's been a point of discussion also in the working group. There's a few other items too, that I think it would just be great to get resolutions on and move forward with.
Brian Kardell: I think the reading order thing we were just talking with Rachel about would be really good too.
Una Kravets: Yes.
Brian Kardell: Yeah. Can we say that just completely coincidentally that we both are leaving here and going to Italy for a brief stint?
Una Kravets: I know, that's funny.
Brian Kardell: Yeah, the same thing happened to me when I left TPAC, Ryosuke from Apple and I both wound up literally in Florence together. We had dinner a couple nights in, so that was pretty interesting.
Una Kravets: That's cool.
Brian Kardell: Yeah. So the discussion so far, what do you think is the best thing, the worst thing, the most boring thing? Give me one take.
Una Kravets: I think it's interesting because there's some big questions that still need to be answered, specifically around shorthands. Like shorthandifying some of these CSS properties if that's possible, one, if it's a good idea, two, how things should interact. There's a lot of different ways that you can also combine these features when you're talking about shorthanding. Specifically with anchor, that's one that kind of came up. But there's other ones that we were talking about, just the general concept. And then what goes into the shorthand too, what properties do you want to include there? What's the order? How do you differentiate between things like custom identifiers of options that you've created versus what are defaults the browser provides. So I think that those conversations are really interesting. How do you make it all work?
Brian Kardell: Yeah. I liked the conversations that we were having earlier around anchor positioning and the disagreements about how you lay them out. Because there was one proposal that Elika had that was about using 100% to mean 100% of the area that you were laying out. And when you hear her say it, it's like, well that makes a lot of sense, but then somebody else points out that is not the way that percentages work anywhere else in CSS. And so we don't like that. And the back and forth and the debate and everything, I wish people could see a little bit more the conversations that go into it and how long it takes. I wanted to say that you and I also were kind of involved in anchor positioning really early on in Open UI. It was still very way back idea.
Una Kravets: It's changed a lot.
Brian Kardell: Yeah. And I remember-
Una Kravets: For the better.
Brian Kardell: I remember you did a lot on that. I thought you had a lot of insightful things, but I do like where it's going.
Una Kravets: Yeah, I like where it's going. I'm happy to see it actually in browsers and all the browsers working on it. Those discussions are really interesting when we talk about what does percentage mean in the context of insets? And specifically different inset areas and how does that work with spanning versus being in a single cell of the inset area grid. There's so many open questions for any of these topics. You can get really deep. With anchor, we were talking about this three years ago.
Brian Kardell: Yeah, right.
Una Kravets: It's taken that long to just even get it to a place where we're having these deeper conversations.
Brian Kardell: I mean, it's actually pretty good. So I've worked on other things like inert and :focus-visible. We did a show after they both kind of basically in the same release cycle, more or less, landed very quickly one after another. And we did a show after and talked about them. And when we first started talking about them, we had to go back and look at our notes, but it was seven years.
Una Kravets: Wow.
Brian Kardell: Seven years from the first discussions until they shipped in the last browser, so.
Una Kravets: Yeah, things take a long time.
Brian Kardell: Yeah. Flexbox, I went back and looked at the thing. The flexbox discussions are even longer. And if you really go back to the real beginnings of the first time somebody suggested, I think it was Elika, it's even longer than most of the histories that people tell you that sound so bad. But yeah, things can take a long time.
Una Kravets: And I feel like that happens a lot too, where people will talk about a certain feature, container queries for example. That's something that developers have wanted for a long time, but either the tech's not there yet or there's not really a path forward. Even with anchor, just bringing it back to that, there's a lot of things that we want in the spec that we don't know how to solve yet. Like when you change positions, how do you identify that you've shifted positions and style that? That's really challenging, especially if you're using some of the auto options for flipping. How do you hook into that? We don't have an answer yet.
Brian Kardell: Yeah, that's a great, I mean the container queries thing, it's really interesting. We were talking about the things that happen at these, and the last time we had this here Rachel's reading order thing came out of discussions that we had here last time. And container queries, actually, they got unblocked here because we worked on it really hard... and then we came with an idea that was much simpler than what we have now. Because it was the thing we knew we could get done. And David said, I think we can do better. It's amazing the things that happened from the conversations and the things that block it and ultimately get things unblocked.
Una Kravets: Honestly, it's amazing how much happens in the few days that we all get together.
Brian Kardell: Right? 'Cause it's like three or four days. Yeah.
Una Kravets: Yeah. And I think it was even this event feels like it's even more extended because a lot of the folks happened to be at CSS Day last week. But standards take a long time, a lot of work is async, there are weekly meetings, but there's nothing like sitting down and hammering on something with a whiteboard. You don't really get that as easily virtually.
Brian Kardell: And you don't get a lot of opportunity to take the thing that you're kind of interested in but isn't sort of far enough along as much as you do when you have these times when you can maybe be having a drink afterward and just casually talking about it.
Una Kravets: New ideas come out of that too.
Brian Kardell: Yeah. Some of the stuff that Rob is working on, and I remember you and I and Mia and Rob all talked about it at the New York face-to-face. And yeah.
Una Kravets: The contrast color stuff we talked about the New York face-to-face.
Brian Kardell: Yeah, right. So I mean there's no substitute for these kinds of things. Anyway, thanks for stopping by and talking to me.
Una Kravets: Yeah, thanks for-
Brian Kardell: I'm glad we're going to have one of these from-
Una Kravets: It's cool.
Brian Kardell: ...from a real face-to-face. I don't think anybody's ever done that.
Una Kravets: Thanks for doing this. This is fun.
Brian Kardell: Yeah.
Eric Meyer: Okay. All right. Here with Andreu Botella, who is a programmer here at Igalia and is working on line clamping in CSS. So Andreu, what's line clamping?
Andreu Botella: Yeah, so you know Youtube comments. You have a long comment and it shows two lines, an ellipsis at the end of the second line, and a 'Show more' button. How do you do that with CSS? Well, in 2009 there was no way to do that. And now there is a way, but it's kind of broken. So back in 2009, Apple added a -webkit-line-clamp property that lets you clamp based on a number of lines, and they actually made it require two other properties, which were old versions of Flexbox. It also doesn't exactly do what you want because it places the ellipsis, but the remainder of the content overflows the element. So you need overflow: hidden. Even with overflow: hidden, you might have a padding through which the clamped lines still show. It's all sorts of broken for many reasons. So we're thinking of fixing that. So the idea would be to sort of clean up a bit the behavior of -webkit-line-clamp. There's some web compatibility issues, so we can't just fix everything. And add a new line-clamp property, which would have the right behavior. And that would also let you clamp based on a height, not just on a number of lines.
Eric Meyer: Okay. So I would say something like paragraph-line-clamp: 2 for two lines. Is that the general idea?
Andreu Botella: So you would just have line-clamp: 2 and that would clamp to two lines. And if you want to clamp based on a height, you would set line-clamp: auto and then either height: 200px or maybe max-height.
Eric Meyer: Oh, I see. And so if I say 200 pixels, which my text lines are almost certainly not going to come to exactly 200 pixels, what will happen in that case?
Andreu Botella: Well, the last line which fully fits, it will be clamped to that. And if you have max-height rather than height, the height of the element will be set to the end of the line as you would expect.
Eric Meyer: Oh, I see. So if you're using line-clamp and you want some kind of a upper length bound, you would much preferentially use max-height instead of just plain height.
Andreu Botella: Yeah, I have a demo where you might want to use height rather than max-height, which is a demo where the height animates and then you can see the clamping changing as the height animates. And there you would want height, but I think that might be a niche use case.
Eric Meyer: Interesting. And so if you've clamped to a height and a number of lines and there are more lines than that, what do you do with the overflow in that case?
Andreu Botella: Well, there are two very different proposals for what to do with that. The one that is currently in the spec is that content gets completely discarded. It does not get laid out. It actually works based on fragmentation, which is as if you were printing things in a different page, like you would print in a PDF or just printing a website. So that content gets fragmented into a separate page and that page gets discarded. And that could be implemented currently in Chromium without too much work, but it would be very hard to do in other browsers because of the way that their layout engines work. So the other proposal which I'm currently implementing in Chromium, is those lines are there but they behave as if they had visibility: hidden.
Eric Meyer: Okay. So then you would ideally be able to reveal them in some way, perhaps programmatically?
Andreu Botella: Well, you would have to remove line-clamp. The idea is that nothing after the clamp point, nothing after the ellipsis gets shown and everything should look visually as if there was no content after that.
Eric Meyer: Okay. And then the ellipsis, that's automatically generated?
Andreu Botella: Yep.
Eric Meyer: And are we leaving it up to browsers to decide how to ellipsize?
Andreu Botella: That is one thing that we'll be discussing this afternoon, I think. So my implementation currently uses the current behavior of -webkit-line-clamp in Chromium. Which is not very good in some cases, it behaves to some extent the same as text-overflow: ellipsis. But I was discussing it earlier with Florian Rivoal who is an expert on these kinds of things. And he was saying that that is actually kind of broken in some cases. So maybe that will have to change.
Eric Meyer: Yeah. Okay. Well, I mean determining how the ellipsis should appear and what interaction if any it should have is probably an area that the working group should be addressing anyway.
Andreu Botella: Yeah. That gets complicated when you have bidi text, like text in Arabic, which goes right to left, mixed with text which goes left to right in the same line. And where do you place the ellipsis in those cases?
Eric Meyer: Right. And then if you're quoting now that material on a page that's laid out using Japanese, top to bottom, it gets super crazy. And those are all things we'll be discussing. So this is actually happening this afternoon at the working group. We're having this discussion about line-clamp and how it should act.
Andreu Botella: So as we were having these parallel proposals, we noticed some things, some questions that could be resolved independently of both proposals so that they would apply to both. And those are the questions that we will be discussing. At some later point, in some later CSS working group meeting, we will be discussing or looking at the proposals in more detail and seeing if we actually put the one that I'm working on in Chromium in the specification.
Eric Meyer: Right. Because that's part of this process is that oftentimes these, particularly when we have something new, it doesn't all get decided in an afternoon or even a single face-to-face or a single conference call or whatever. The working group gives a thumbs up to, yes, this is how we think the basics should be and let's see how that implements. And then you're working on the implementation. Ideally you implement in time for the next face-to-face or even sooner what the working group decided on. And then you come back with, 'Okay, so I did that and here are the things that came up that I didn't know how to answer because we hadn't decided that. So we need to decide those things. And here's how it turns out that interacted with grid layout or margin-trim or whatever else is being worked on or that is being supported.' What do we do when you've done this and you've done this and what those two things should do are in direct contradiction.
Andreu Botella: Yeah, so-
Eric Meyer: Which one wins and how do we figure that out? So that's all part of the process and it's sometimes why people will hear about, 'Oh my gosh, they're going to add something, they're going to add line clamp to CSS. When can we have it?' It's like that's a process. We're figuring it out and we're taking the time to find out how it fits in with everything else that we're already used to so that you don't have this one thing that people start using it and then saying, 'Okay, I used that, but it broke these six other things I was doing that are perfectly reasonable. And why is this so broken?'
Andreu Botella: Yeah, currently in the implementation I'm figuring out how it has to interact with ruby, like furigana for pronunciation in Japanese, how it has to interact with margins when you have multiple nested elements with margins and borders and paddings and everything inside the line-clamp container. And I have an idea for what the results should be, which at some point we will have to check with the working group.
Eric Meyer: With the working group, right.
Andreu Botella: But it's also hard to figure out how to implement that in the way that I'm thinking of it. And sometimes the implementation, like for something with floats that I was thinking, the implementation was so complicated that it was better to just do something else, even if it gives authors - like, web developers - less flexibility, but it would be a lot simpler to implement and it's not clear that that flexibility is needed.
Eric Meyer: Okay. Yeah. Well these are the things we figure out as part of the process. Cool. Andreu, thanks a lot.
Andreu Botella: Sure.
Brian Kardell: All right, so get an early start this morning. We have Yehonatan from Wix. So tell us Yehonatan, what are you working on with CSS right now?
Yehonatan Daniv: Hi, so these days mostly working on animation stuff. I'm trying to help a bit around the view transitions where I can and contribute from our experience at Wix. We had a few requests that already got a few changes in, like adding the view transition type. And now we're talking about adding some sort of conditional selector that lets you start elements based on whether you enter the page via a view transition. So you can, for example, disable some animations that weren't required, entrance animations, stuff like that. But the major part of what I'm working on is currently trying to edit a draft for a spec for animation-trigger, which is a mechanism to allow you to trigger animations based on a timeline. Currently, the most interesting case is a view timeline. So it's building on top of the constructs that we already have for view timelines and view timeline ranges. So you can say I want to trigger an animation when an element enters the view port, but because view timeline ignores transforms and stuff like that, it'll know when the actual position of the element enters the view port and you can configure it same way that you configure scroll animations. So you'll be able to trigger animations no longer with IntersectionObserver and some hacks like that. It will all be declarative in CSS. And then you can change the behavior, for example, trigger the animation again and again every time the element enters and exits and re-enters. Or you can tell it to animate in reverse when it's exiting. Or play pause for animations that play indefinitely. So this is something that I think is really cool because browsers, you'll be able to set the animation beforehand and the browsers will know, oh, this element is not just hidden, it's actually going to do an entrance animation so I know what you're doing and it'll avoid all sorts of stuff. For example, if your JavaScript breaks, then the element will still show up once they hit it and it's going to avoid a lot of bad stuff that's currently happening. And most importantly, like Una usually say at her talks in conferences, one less dependency. So this is also very important. Other proposals that I have that I hope to get to after we get this merged and approved by the working group is stuff to help progress with group effects in web animations level two. There's a lot of brilliant stuff there that was already written by Rob Flack and Brian Birtles and I hope to get some changes there to help this progress. And also I have a proposal how to get that also into the declarative syntax in CSS level two. Then there's also an addition of a new property, align to maybe start be able to do staggering animations. So if you want to have multiple animations and have them synced in a way that they'll do a nice looking staggering. So have native way to stagger and do stagger animations in CSS, web animations, that could be really cool. And after that, I have some prototype for what you can call a hover timeline or a pointer timeline, and I hope to show this to people while I'm here in the face-to-face. And after that there's tons of ideas.
Brian Kardell: Well, I just wanted to say that I am glad that we got you in here because normally when we talk about these things, people we're talking about tend to be either some invited expert or somebody from one of the big browsers like Google or Apple or Mozilla or Microsoft. But you're from Wix and I think it's excellent that you come and that Wix is so active and that also sometimes you focus on the things that other people aren't focused on. We were just talking last night about how I look at the HTTP Archive data a lot and it's just like Wix is all the way at the top with a lot of stuff on there. And yeah, I think we forget how much of the web gets created by people using Wix. It's a lot. And it's great that Wix understands and cares about where its bread and butter is from, from the web, and reinvest in it. So yeah. I just also wanted to give y'all credit for investing in SVG, for example. So you've been investing with Igalia, helping Igalia get the layer-based SVG in WebKit working all done. So thanks for that. That's been-
Yehonatan Daniv: Yeah, yeah. That's great pleasure that we can help in that. Because this is a long time dream of me personally and we really hoping that because SVG really got neglected for a decade now and it's way behind and it got us so many beautiful things into the web and things that were ported into CSS, and really what the way we see it is SVG is like this nature conservation that it's beautiful and we can do beautiful things on the web with it, but because it has so many rough edges and so many issues, then many people just don't want to touch it. So we have to give it some love and some help to get all these issues out of the way and dust off all the code bases, the browsers, so that we can again, start making more beautiful things. And it requires some effort from everyone and we're really happy to be able to give our share.
Brian Kardell: Great. Maybe we can get some other people to join you in that investment, we can get even more done.
Yehonatan Daniv: Yeah, we hope.
Brian Kardell: Thanks for coming on.
Yehonatan Daniv: Yeah, my pleasure. Thanks.
Brian Kardell: Okay. Miriam Suzanne, superstar. Container queries and layers and all the good things. Nesting too, I guess. And now colors.
Miriam Suzanne (Mia): Well, yeah. Sure.
Brian Kardell: Colors.
Miriam Suzanne (Mia): I have opinions on these things is that...
Brian Kardell: Regions is the big news of CSS working group here. Yeah.
Miriam Suzanne (Mia): Sure. I mean I think once we ship regions we're done.
Brian Kardell: Until the next thing.
Miriam Suzanne (Mia): Until the next thing.
Brian Kardell: Yeah. But yeah, there are no actual concrete plans to do regions, that is specifically called that. But...
Miriam Suzanne (Mia): Yeah, I think you're not allowed to use that name because it scares people. But I mean, I saw a demo that looked a lot like it.
Brian Kardell: So what do you think is the best thing that we've talked about this week or the best thing that's happened? Could be in working group or outside of working group.
Miriam Suzanne (Mia): Oh yeah, I don't know. I mean I think it's been a good week. I think we've made it through a lot of issues, although I'm never sure if we check how many we closed versus how many new issues we open.
Brian Kardell: Yes!
Miriam Suzanne (Mia): I'm not sure that that would make us happy to find the answer there. I'm pretty happy that yesterday we made progress on colors. It wasn't exactly the answer I wanted, but it's a lot better than what we have now. So I'm excited for wide gamut colors to have a solution. I think there's some other ones I was excited about too, but we moved through so many different issues so quickly that it's like, I don't know, two days ago? I don't remember what was two days ago.
Brian Kardell: Yeah, I have no idea what happened two days ago. Were we even here two days ago?
Miriam Suzanne (Mia): I think so.
Brian Kardell: Really? But we had a good time. I mean the meals have been nice and the company has been nice. I think the meal last night was huge. Oh my God.
Miriam Suzanne (Mia): Yeah. I mean by the time the main course came, I was already stuffed.
Brian Kardell: Yeah. I literally, I ate too much last night. I went back to my hotel room a little sad that I had eaten quite that much. But yeah. Okay, that's a lot about food. We'll probably have to cut down that. But yeah, every time we come here, not just here, but every time we come here I feel like we get to the bottom of and unblock a lot of things that had just been sitting there for a long time because, I don't know, tell me what you feel about this, but I feel like so much of standards is just getting people to actually discuss things. We open an issue, we do a bunch of work, you do a bunch of work. Actually, tell me if this holds true for you because you have been so productive. I think it's because whenever you do something, people want to look at it and respond so it gets the attention. But really a lot of issues that get some immediate attention maybe, but then they just fall off everybody's radar.
Miriam Suzanne (Mia): Yeah.
Brian Kardell: And one of the things that happens at CSS working groups in general, but especially at Face-to-face where it's multiple days, we just churn through a lot and get attention to a lot of things, which in the end seems to unblock so much. Right?
Miriam Suzanne (Mia): Yeah. And I sort of think of that as the process. So I try to write something that explains the issue, explains sort of the direction I'm thinking about moving but often still with some open questions. And then I will add Agenda+ and wait several months. And then I often have to go read it again when the issue comes up at a face-to-face or a telecon, but particularly a face-to-face for more difficult issues because I think there's a certain amount of in the room just talking to each other and hashing through the questions. And it's sort of like at this point, anything you're proposing in CSS has a lot of questions. It has a lot of implications, there's a lot of how does it affect other properties, how does it affect different situations? What are the edge cases? And we have to think through those things and having a lot of people in the room to bring up the questions.
Brian Kardell: A lot of people say, 'Aha. Gotcha.'
Miriam Suzanne (Mia): Yeah, exactly.
Brian Kardell: Is infuriating and ultimately necessary.
Miriam Suzanne (Mia): Exactly. Our decisions end up better for it, but first we have to yell at each other for a while. But yeah, I think of that as the process. The written thing should come out a while before we have the discussion so people have time to come up with their questions, but then it also means that I have to go back and remember what I even said.
Brian Kardell: I'm glad that you said that because this is actually a thing that's hard to appreciate if you've never been in it before. But we did a show on :focus-visible and inert when they shipped because Alice and Rob and I worked on those together, both of them, and they shipped at roughly the same time. So we thought, oh, let's do a celebratory show. And we did that and we had to go back and look at the history because we couldn't even remember. And we were like, holy crap, this was seven years ago. And then looking at it, the thing that I'm trying to relate to here is sometimes you get even these sort of giga threads that just seem to go on forever and ever and ever.
Miriam Suzanne (Mia): Yeah. Colors!
Brian Kardell: They get 150, 200 different... And some people write a book, it's not like a small thing and they link to seven other issues. I don't know how much time I have spent in my life coming back to an issue when somebody finally... When it finally gets somebody else's attention and it's going to be on the agenda or whatever, and they're like, 'Okay, we're going to discuss this thing,' and I have to go back and look at it and my heart just sinks because I'm like, oh my God, this is going to take forever. I don't remember any of this at this point. I think it's probably hard to appreciate even how many people who write specs then have to go look up, 'I don't remember the answer to that.'
Miriam Suzanne (Mia): Yeah. And I think particularly because there's enough of us looking at different parts of CSS that in a meeting like this, we're going through 50 different topics and you have to engage with all of them. And by the time you get to the fifth, you don't remember the first or what you thought about it.
Brian Kardell: Exactly.
Miriam Suzanne (Mia): And you have to go back and get your brain in that context again. It's hard to keep it all... You can't keep it all in your head, so you try to write down as much as possible.
Brian Kardell: Yes. So Mia works on specs and other things with OddBird, right?
Miriam Suzanne (Mia): Yeah.
Brian Kardell: So how can people give you money and sponsor your amazing work so that you can keep doing it?
Miriam Suzanne (Mia): Oh yeah. OddBird does client work. So that can range from, we can help you build a website, help you build a design system, help you do a refactor, come in and help train your team on something. We're doing workshops all the time. And then also we have a lot of open source work that we do. So we have an open collective or GitHub sponsors, you can help sponsor some of our open source work building polyfills, writing specs, all of that sort of thing. So oddbird.net would have links to all of that. And you can find us on Mastodon. OddBird@front-end.social or mia@front-end.social.
Eric Meyer: So this might be one of our last recordings from live at the CSS Working Group. We're here with Joey Arhar, Joey, thanks for joining us. And this is your first working group meeting, I understand?
Joey Arhar: Yes, it is.
Eric Meyer: Okay. At least your first in person, or...
Joey Arhar: Yeah, my first in person. I don't think I joined any of the other ones virtually. So yeah, this is my first one.
Eric Meyer: Cool. So what's it been like as your first?
Joey Arhar: It's been awesome. Yeah, a lot of issues all day. I'm really impressed by everyone who can actually comment on every issue because there's so many things going on. I feel like the things I'm actually relevant to and talking is a small fraction, but some people like Tab and Elika seem to be commenting on literally everything. It's insane.
Eric Meyer: Yeah, they and Florian, and... It might just be those three who comment on everything. But yeah, I mean there are some people who just have all of CSS more or less in their heads, although we are getting to the point now where there's a fair amount of, 'This should work because of these reasons,' and then someone else says, 'Ah, but there's this other reason.' They're like, 'Oh yeah, crap.' But yeah, because there's a lot of CSS now. So what's been most interesting to you out of the three days?
Joey Arhar: Well, I was just working on something... I was skipping ahead in the agenda and I saw that Florian opened an issue about transparency on the accent-color property and how some browsers throw away the transparency and Firefox incorporates it by transposing it on white. And it turns out that I actually, I wrote a patch in Chromium to make it throw away the alpha because it was rendering funny. So it was fun to kind of go back to that and I guess to reimplement it. I'm excited to show it to everyone.
Eric Meyer: Okay. Yeah. Cool. So how did that feel to have someone describing the behavior and you realizing, 'Oh, that was me.'
Joey Arhar: Oh, it felt great. It's really fun 'cause yeah, then I knew exactly where to go to fix it and stuff.
Eric Meyer: Yeah, no, that's pretty cool. You've also been scribing a lot. In the CSS working group, on our calls we use IRC, but as the discussion goes on, there's somebody basically doing their best to transcribe what everyone's saying in the IRC. And you've volunteered for that a lot at this meeting.
Joey Arhar: Yeah, I figure it's the least I can do since I feel like I'm not actively discussing a lot of the issues. But yeah, it's tough, I feel like... So I just type as fast as I physically can and try to literally write down every word that everyone's saying. But I tend to miss a lot of things and there's typos. And I feel like other people have a way of, they must be paraphrasing or something when they also scribe stuff. Yeah, it's pretty tough. And I'm kind of hoping that we'll have a bot. Even if some kind of bot could automatically transcribe for us and makes mistakes, I'd much rather correct those mistakes than literally try to type every single word.
Eric Meyer: Ah, so you're hoping for real-time, AI transcription kind of something?
Joey Arhar: Yes. That would be so nice to have.
Eric Meyer: It would be very nice, I have to be honest. 'Cause I have also done scribing in my time and yeah, sometimes you have to paraphrase in order to keep up and sometimes you just miss stuff.
Joey Arhar: And the notes are nice to have because for meetings that I don't make it to, I can always go on GitHub and see what was discussed and why resolutions were made and all that kind of stuff. And it's like a permanent record that's really useful.
Eric Meyer: Right. So of the topics that we've talked about, what are some that were really exciting to you or interesting or things you were like, 'That's awesome that we have that decision.' That sort of...
Joey Arhar: Yeah, I'm trying to remember. There was some things about the, or there's one issue about the select element that I marked Agenda+, but I don't think they're going to get to it at the face-to-face. I'm trying to remember.
Eric Meyer: When you say the select element.
Joey Arhar: Yes.
Eric Meyer: Describe that a little more.
Joey Arhar: Oh yeah, yeah. So I'm working on a big project to make the select element styleable.
Eric Meyer: Okay.
Joey Arhar: And there's a new proposed value for the appearance property called base, which is supposed to opt you into this new styleable mode for form control elements. And yeah, I'm really hoping that we can make progress on it because it's like my one big job this year.
Eric Meyer: Okay. So is this based on Open UI work or?
Joey Arhar: Yes, it's very much based on Open UI work. We've been incubating it in Open UI since 2019 or something like that. And I started working on it about a year ago. And everyone there has put a lot of work into designing all kinds of little behaviors. Everything from should the options have check marks next to them to what should the keyboard behavior be and all kinds of stuff. So there's a lot that's in there right now and I'm kind of hoping that it will be well received. But it is a very, very big project. There's so much that goes into it.
Eric Meyer: So basically this is a trial implementation of Open UI's work on styleable form elements. And the idea is to get the working group to agree to do that or to agree to do the switch to let us do that. What is the issue to be discussed here exactly?
Joey Arhar: Right. So the one thing was like bikeshedding the name of the new appearance value because...
Eric Meyer: And bikeshedding for those who are not familiar is where everybody argues about what the exact name should be.
Joey Arhar: Yeah, right. And so the proposed name is base, but I don't think there's been a ton of discussion about is that the right name or not. So that was one of the first things we're going to get to. But there's many, many issues including what exactly should these user agent styles be, which there are a lot of, and how should the whole structure of the select element be. And then also this whole appearance value thing in theory should apply to all form control elements. So it almost is an endless amount of possibilities and conversations about every form control.
Eric Meyer: Yeah, that would be a huge area of discussion. I mean, it's good that the Open UI has the work there for the working group to look at and then be able to say, 'Hey, is this going to fit with CSS as it currently exists? Is it going to work in browsers?' Hopefully we do get to that this afternoon, but if not, I'm sure a near future working group weekly call will address it.
Joey Arhar: Yeah, certainly. Lately we've established a task force that's a combination of the WHAT Working Group and the CSS Working Group to talk about form control elements. So right now that's kind of where most of the discussion's happening.
Eric Meyer: Okay. Yeah. Cool. Alrighty, well thanks very much for joining us.
Joey Arhar: Thank you.
Eric Meyer: Okay, we're back being live at the CSS Working Group meeting and I'm talking to Ian Kilpatrick.
Ian Kilpatrick: Hi.
Eric Meyer: Ian, thanks for dropping in.
Ian Kilpatrick: No, that's okay, Eric. That's great.
Eric Meyer: It's been quite a few days.
Ian Kilpatrick: It has been.
Eric Meyer: What's been interesting to you the most?
Ian Kilpatrick: So I'm actually looking forward to one of the issues later this afternoon, which is about how do we allow developers to have more control over how an element affects the scrollable overflow of its parent. So one common request that developers have is they might transform or place an element like up in the top right corner, but they don't want it to contribute to any... You don't want to be able to scroll into it. It might be rotated, for example. And so you don't want to actually allow that little bit on the edge to be scrollable. You don't want to allow the scroll to scroll into that little corner. You just want to clip, if that makes sense.
Eric Meyer: So you want it to be clipped off, but you can't use overflow: scroll.
Ian Kilpatrick: Yeah, exactly.
Eric Meyer: Because then suddenly there'll be a little horizontal scroller so you can see the little bit of the new banner that you...
Ian Kilpatrick: Yeah, exactly.
Eric Meyer: Were trying to stick out the site. Okay.
Ian Kilpatrick: And there's variations on this. So for example, you might want to animate a element in via transform or something like that. And so you want it still to contribute to scrollable overflow, but you don't want the transformed part of it to. So you can imagine you're animating something in, or you're animating along some curve, so it's not on the compositor. So it's going to change the scrollable overflow each time. But you just want to do that in such a way, but you don't want that bit to be scrollable. You just want its final position to be scrollable. And so there's a proposal to do this. There might be multiple switches. So one of these switches might be ignore this element's contribution to scrollable overflow completely, just ignore it. The other one might be just ignore the transform component of that case. So that covers the animating in type of case. Developers achieve, yeah, it is very hard to do the transforming in case, they ignore it completely developers. There's some hacks basically that people use to achieve this. I'll leave it at that for the sake of brevity. But yeah, it keeps on coming up when a chat with web developers. I was a web developer previously in my former life and I would've used this. So that's sort of what's exciting to me.
Eric Meyer: So how do you feel about the if thing, you want to talk about that?
Ian Kilpatrick: Yeah, yeah, I think-
Eric Meyer: Okay, so let me introduce you. So just this morning the working group decided to add an if statement effectively to CSS. What were you thinking about that?
Ian Kilpatrick: Yeah, I mean it keeps on coming up with developers. I think in the initial explorations of container queries, we had considered something similar. It'll be interesting to see where it lands, I think if is probably pretty good. Another thing you could imagine is in functional language you sort of just want to match something. So you just want to say, 'Hey, if this variable is foo, then do this,' and you just do case matching. That could be another solution space, but probably to most developers the if function might be good enough.
Eric Meyer: And in what context does this appear? The if.
Ian Kilpatrick: Sort of when you're doing variable substitution, it applies basically. I don't know the exact details of the grammar. That's sort of again, slightly out my wheelhouse. But conceptually I don't believe at least there's no fundamental problem. But again, I'm not the style expert on our team, so.
Eric Meyer: Not the style expert.
Ian Kilpatrick: I defer, we might have Anders or Rune go 'there's this fundamental issue that we need to consider' or something like that. But yeah, on the surface, yeah, solves the developer need.
Eric Meyer: Yeah, so be able to say if we have this variable, do this thing. Basically.
Ian Kilpatrick: Mm-hmm. Yep, exactly.
Eric Meyer: And apparently from what I understood from the discussion, and it seemed like it was actually not just an if, but sort of an if-else, if-else, if-else.
Ian Kilpatrick: Yeah. Yeah. And that kind of lends, that's why I think of it a little bit more as a pattern matching type of thing versus a if-else, but different side of the same coin.
Eric Meyer: Right. Makes sense.
Ian Kilpatrick: [inaudible 00:54:34] scenario.
Eric Meyer: Cool. Anything else that's gotten you sort of...
Ian Kilpatrick: Not too much, there wasn't sort of too much...
Eric Meyer: Layout stuff?
Ian Kilpatrick: Well there was layout stuff, but nothing groundbreaking.
Eric Meyer: So then what layout stuff was there?
Ian Kilpatrick: It's all-
Eric Meyer: Well, what I mean is if it wasn't groundbreaking then what were the layout topics generally?
Ian Kilpatrick: Yeah, I mean a lot of the time it's small details on how to adjust things or fix things. One thing in particular that came up that people might be interested in is line-clamp, for example, and how that works. So a few years ago, people that are familiar with line-clamp on the web know that you have to write, display: -webkit-box, -webkit-box-orient: vertical, and then -webkit-line-clamp: 2 or whatever. And so internally browsers will, like Firefox and Blink at least, will map display: -webkit-box over to display: flex. -webkit-box is effectively a flexbox, but some subtle modifications. But when you line clamp, for example, you really don't want it to be a flexbox. And so both Gecko and Blink will actually create a display: block or a display: flow-root instead. And so part of the discussion was enshrining that actual behavior into a spec. And then the exact mechanism of how we do that is another issue open for discussion. But I think there is a path forward for a standards-based line-clamp implementation, which Igalia is working on it at the moment and I'm reviewing. So it's great.
Eric Meyer: Yeah, cool. So, so far so good?
Ian Kilpatrick: Yeah, so far so good. Yeah, implementation is looking really solid. There's a few corner cases that we need to look at, but yeah, I'm pretty hopeful in that we'll land on a pretty good solution there pretty soon.
Eric Meyer: Yeah, and I mean, as you know, that's what a lot of working group discussions actually are, are the, 'Okay, we've done the thing that the working group agreed to do and we found these corner cases. And how are we supposed to deal with those? This line-clamp happens to interact with max-width in a flex environment when it's inside a grid in this way. And when you look at this spec and then this other spec, they directly contradict. How are we supposed to resolve this?' And the working group's got to figure it out, so.
Ian Kilpatrick: Fortunately we're getting to a stage where the boundaries between all of the different layout algorithms are much more solid than they were previously. Previously they were pretty amorphous and icky, to put it. Especially the CSS2 spec says a lot of things. Some of it correct, some of it wishful thinking. Yeah, I don't think that you can, for example, go through the CSS2 spec and come out with a compliant, a web compatible block layout, for example. To all of you that want to write a block layout algorithm out there, I wouldn't necessarily take the CSS2 spec as verbatim, for example. But yeah, I think more recently we've solidified the boundaries between everything so that there is a pretty clean conceptual interface between everything so we're not dealing with as many of these problems anymore.
Eric Meyer: Okay.
Ian Kilpatrick: Yeah.
Eric Meyer: Cool. All right, Ian, thank you.
Ian Kilpatrick: Cool. Thank you very much.
Brian Kardell: Okay, so CSS Working Group Face-to-Face, June 2024.
Eric Meyer: It's come to a close.
Brian Kardell: It's in the books.
Eric Meyer: Yep.
Brian Kardell: I fell asleep a few times. How long? Two weeks.
Eric Meyer: Yeah. I mean you've been traveling quite a bit. I came out just for this regular. But you were at the WebEngines Hackfest and you were at Igalia Week and you're here now and you're still not going home.
Brian Kardell: Yeah, I'm getting around
Eric Meyer: It's a little bit of an odyssey for you.
Brian Kardell: Yeah.
Eric Meyer: For me, it's in and out. I might've also fallen asleep, but I can neither confirm nor deny that.
Brian Kardell: It was not really the subjects or anything. It's just it's a lot of meetings and it's a lot of travel and...
Eric Meyer: And a lot of mental power going into the concentration on the topics.
Brian Kardell: Yep.
Eric Meyer: And all that sort of thing. Yeah, it can be very draining.
Brian Kardell: Yeah.
Eric Meyer: And also we discovered that in Spain you don't even start eating dinner until like 9:30 or 10:00 at night.
Brian Kardell: Oh yeah.
Eric Meyer: And so you get back to your hotel at 11:30 or midnight and then you wind down and go to sleep and then you got to get up to do stuff and it's just, yeah.
Brian Kardell: And you're supposed to be ready to talk about tomorrow's topics too.
Eric Meyer: Yeah.
Brian Kardell: Yeah. Well I don't know. I think this is fun. I think Igalia did a pretty decent job of hosting it. I think we always like having everybody here.
Eric Meyer: That's for sure.
Brian Kardell: Yeah. I don't know, hope the interviews are interesting.
Eric Meyer: Yeah, I think they will be. It'll be all good. And then maybe we'll do this again sometime. Live from the face-to-face working group meeting.
Brian Kardell: Cool.