 Hello, everyone, and welcome back to the State of the Web. My guest is Jen Simmons. She's a member of the CSS Working Group and a designer advocate at Mozilla. In today's episode, we're talking about CSS standardization and how it shapes the way we style the web. Let's get started. [?]. So Jen, great to have you here. Can you tell us about the CSS Working Group and what it does? Yeah, so CSS and much of the rest of the technology that runs the web is all created by a standardization process run by the W3C. And so the CSS Working Group is the body of people who get together and decide, what is CSS going to do in the future? And oh, is there anything we need to clean up about the past and make better about the CSS that folks are already familiar with? And it's a group of people who most of whom work for browser makers. So there's a bunch of people from Google, a bunch of people from Mozilla where you work and where I work, a bunch of people from Apple, from Microsoft, from other browser makers around the world like Samsung, and also a lot of e-book publishing platforms that use web technology to put out what they're putting out. So all of those are kind of different rendering engines. But of course, also folks who are invited experts, they're web designers or web developers who just have a vested interest in making sure that CSS becomes what we need to become. It's a fascinating group. It's highly technical and very calm and chill and professional, and people are really lovely to work with, and it's fun to be part of that group. I think it was 1996 when CSS 1.0 came out. Can you describe what the developer experience was like then? The developer experience, of course, we didn't even call ourselves developers back then. We called ourselves webmasters. So the webmaster experience was like, no, didn't use CSS. You didn't use CSS. It wasn't ready. It took many, many years. I think in some ways a lot of us started first using CSS in like 2002, 2003, 2004, 2005. And when we first started using CSS, you really could only use it for things like changing the font or the color of the font or maybe some colors of the backgrounds and such. Some of the rest of it, the ideas that were in the original CSS 1 specification, just weren't implemented properly enough in browsers to be able to use the number of bugs. And it's almost not even fair to call them bugs. It was just like missing features, complete incompatibility, not at all. Browsers didn't do the same thing at all. And so you didn't use, we just didn't use CSS for a long time. Yeah, I remember there was like a center tag in HTML. So there was a lot of confusion about what do you do in HTML versus what do you do in CSS. Yeah, because for a long time, the only styling that you had for the web was HTML like attributes, the font tag or the, you know, you write these attributes on the font tag, right? In some ways, you know, sometimes people are getting excited about the possibility of using JavaScript inline all their CSS. And I know a lot of folks are like, we've done that already. Well, I remember that from 1998. That's so painful. I mean, it's very, very different now, but there is a way in which there was a whole world of styling websites before CSS came along. And it was a big fight in the early 2000s. And really in the mid 2000s, like whether or not you should even use CSS for layout or if you should use table-based layout, you should make use HTML tables to, oh, it's all boring and ugly and those days are thankfully over. But yeah, like it was rough. It was really rough. And sometimes when people who are newer to the industry today complain about I-11 or how browsers aren't completely identical to each other, that's true, and that can be painful, but also it's like 2% of how painful it used to be. So things have definitely gotten much, much better. You've described 1.0 as being under-specified. Can you explain what you mean by that? So one of the things that people get frustrated with these days, they're worried that if they start using a new CSS property that it's not gonna actually work. And this came up a lot when CSS Grid was new and people are talking about it, I've been talking about it. And sometimes people are like, I don't wanna try it. I don't wanna use it because I don't trust that it's ready. Like I think I'll wait a year or two until it's ready. And a lot of people feel that way because of the experience that we had when Flexbox was brand new. And people started using Flexbox by using vendor prefixes and then the spec changed and then they had to learn the new syntax and the spec changed again and they had to learn the new syntax again and then all these browsers had the wrong bugs and it just was like this weird, painful process. The CSS working group saw that process and said, oh gosh, we shouldn't do that anymore. We're not gonna ship new things with vendor prefixes. Let's instead ship the experiments and ship the work in progress behind a flag and we're not going to let developers have access to these things until they're completely ready and completely done. And that gave the working group a chance to really get every single detail about CSS Grid decided. Like we had every once in a while a new issue comes up but for the most part everything is already all perfect and picked and just like it's ready. And when it shipped, it was completely ready. The way the working group works and the way that CSS gets shipped in browsers today is so different than it used to be that we can actually really trust that it's working. Things are very well specified. The specs today have every little detail about how every little new thing is gonna interact with every little old thing and how the old things, so that if there's actually a bug, the bug and how the bug is supposed to work is specified so that every browser can have the exact same buggy behavior and that's not how CSS originally was figured out. Like that's not how it was originally written. The CSS one, even a lot of the CSS two specification, the two point specification, the philosophy was very different in those days and the philosophy was more like, well we don't wanna tell browsers what to do. We wanna like have an idea and then each browser can kind of come up with their own details about how they wanna implement this grand idea. So we have this grand idea for multi-column. Why don't you at Internet Explorer and you at Netscape and you at this other browser like you guys can just decide yourself what you think the details should be for multi-column. Well it turns out that really didn't work so well because anybody who's tried to use multi-column in the last five years or something might realize that you start to use it and it's just, it works in one browser one way and it works in a different browser a different way and you're like, what's the deal? That's not how new specs are written anymore and in fact, like Rachel right now, Rachel Andrew is going back and recovering the multi-column specification. She's grabbing it out of the ancient past and dusting it off and going back in and specifying every little tiny detail about exactly how it needs to work and on the working group the browser makers are all there and they agree, yes, we do agree that we will make this change and then they're going into the browsers and they're making all of these changes. So a lot of the multi-column bugs are rapidly disappearing and even more of them will be disappearing over the next year or so. So that was a big change between like, oh, let's just have an idea and y'all can work it out on your own to like, no, we need to specify every single tiny little which is sometimes why it takes so long for new things to come out but every little detail specified every little and if you ever, as a developer, if you ever do use a piece of CSS and it's working differently in different browsers it's implemented in both browsers but there's something different about the way it's implemented then please file a bug, raise the issue, let someone know because we want to know about that example so that we can go fix that. You've described the web as a universal platform. So what role does CSS play in that? One of the things I've seen developers get sort of frustrated with and I think especially people who maybe are coming over from Java or Flash Action Script or they're coming out of school with a PhD in computer science and they really understand computer science theory really well. One of the things about developing for Android or developing for iOS or Mac or Windows is that you can, you know, you go to a store, an app store and it will tell you right there you must have this operating system or greater. You must have this version of macOS or this version of iOS or this version of Android or whatever or later. So as an engineer, you're able to say, okay, we're only supporting this operating system and we're only supporting this operating system from this moment forward and the web doesn't work that way and I see people try to make the web that work that way and to say, oh, we only support Internet Explorer 11 and up and it's like, well, you don't really have control over whether anybody uses Internet Explorer 10 and comes to your website or whether, like they're still gonna show up. The question is what kind of experience are they getting get and also the web works on all those operating systems I mentioned and plus a whole bunch of others and ones that you may not even realize exist. Some refrigerator browser or some, you know, next thing you know, there's gonna be a talking browser that works with voice control and you've never heard of that browser before. Like there's all sorts of new things that are gonna show up. The amazing, beautiful thing about the web is that we're creating work, whether it's content or application, whether it's buttons people click or stuff can people consume, whatever it is that we're creating, it can go on every one of the operating systems, every one of the devices, every input kind of device, every output device, every screen, every mouse, a keyboard or whatever. So it's harder and I can understand people's frustration and that they want to write one simple code base and have it just automatically work. But the reality is that you wanna think through well what's gonna happen on the older machines? What's gonna happen when someone doesn't have a screen? What's gonna happen when someone can't use a mouse? What's gonna happen when, you know, this code that I wrote lives on for eight years and like new stuff comes out that I never knew existed. It's not actually that hard. We CSS use techniques from progressive enhancements and or what Jeremy Keith calls resilient web design and thinking through what it means to make an application or to engineer some kind of JavaScript heavy platform in order to make it work across multiple platforms and multiple operating systems, multiple devices. And it's sort of the bane of the web but also the beautiful, beautiful thing about the web and the reason the web is so popular. The reason that the web is kind of like eating more and more and more of our computing lives is because it works everywhere. You had made the point that some of the native app developers are now becoming web developers. Does that affect how the standards are made knowing that the audience itself is actually changing? Kind of the crux of the pain and the debate that's happening right now is there is a lot of pressure coming from certain circles to sort of fix the web and turn it into a proper runtime application environment and that argument actually kind of breaks my heart because I feel like if we let that argument win the day too much, we're gonna lose the web that we know and we're gonna lose the beautiful thing about the web. It's not just for $100 million websites to build these massive walled gardens that consume a lot of people's time and attention. It's a space for anyone to publish. It's a space for any little team, little group to come up with a new idea and wanna launch a new company or come out with something new to be able to do that. And so we really don't wanna over engineer it and we really don't wanna like force it into this bucket to be more like an operating system. And so I don't know. I think the standardization groups, it's one of the tensions that I sort of smell inside some of the standardization groups and I'm really familiar with the CSA's working group and not so much with the others, but there is this kind of pressure. And in part two, because there are multiple corporations being represented and each of those corporations is representing their own personal business, not personal, but their own corporate business interests and some of those corporations, like this one is very, very powerful. There's a lot, a lot of money, hundreds and thousands of people behind what is happening. And so that pressure is pretty intense. But I think part of the job and really the responsibility of the working groups is to not let one mass of corporation dominate so much, but to really balance out the interests of lots of different kinds of people and especially the people who aren't at that table at all, the people who are building $10,000 websites, $1,000 websites, $100 websites because what those folks need is just as important and we need to make sure that that is in the web in 10 years and 50 years and 100 years that the web still remains something for everyone. So how have the browser's evolution into evergreen updates affected the developer and user experience? Yeah, that has been genius. Having evergreen updates is amazing because rather than having like a big pile of things come at all at once and then oops, we kind of got it half wrong and then you have to wait a year until another pile or two years or six years or whatever it was with Internet Explorer six. Yeah, having just every six weeks or whatever it is depending on the browser having a new copy of the browser come out this has just really been amazing. It does mean that there aren't as many super exciting announcements, you know, like, oh, like it's sometimes I think people don't know that things have shipped because it was like, oh, we shipped this one thing or we shipped these three things, one was sort of exciting, the other two were not at all they were sort of totally boring and you missed that announcement. You didn't see that blog post. There was no big tech news, there's not tech blog news posts every six weeks. So it's easy to miss something. Like CSUS Grid, I think everybody kind of knew about it but there've been other things that are super exciting that totally shipped. Mozilla just shipped AV1 support, like that wasn't like, it's just sort of, so I encourage developers and designers to kind of find ways to learn that what's new because maybe they missed it because it wasn't a one giant product announcement so like in all these little product announcements. So what is this CSS working group up to now? What's in the pipeline? Oh, there's so many things in the pipeline. Subgrid is one of them, I think the spec is basically done but we're implementing it now at Mozilla and I'm hoping that Agalia will implement it for Chrome and for Blink soon. Subgrid is a way to be able to, because CSUS Grid, you can apply it to a single formatting context so you have maybe let's say an article element and you apply a display grid to that article element and then there's a whole bunch of other elements that are direct children of that element or maybe you have an unordered list and then you have list items and Grid will apply to those list items but it doesn't apply to the content inside the list items and Subgrid gives you a way to like pull the grid further into the DOM structure and have it work on the content inside the list items and then kind of like work its way back up and such. So it makes Grid even that much more powerful but there are other things, I mean like I said the improvements to multicolumn or shipping constantly there's a lot of things around overflow and fragmentation, really understanding some of these fundamental building blocks of layout is what designers and developers need to learn in order to really understand the new layout system that we have and there's some things that are happening around min content and max content and options for specifying what you want overflow to do that are new that by themselves don't seem super exciting but they are the building blocks of modern layout and they are super exciting so there's kind of this non stop I've been working on personally I've been working on with Ellica aspect ratio spec trying to figure out a way so that we can just quickly apply an aspect ratio to an element that doesn't intrinsically come with one some things like the image elements or the video element intrinsically have an aspect ratio but we need a mechanism to explicitly specify an aspect ratio and an element that doesn't have one that would be so handy so I'm hoping that we can do that and you know there's so many ideas time is tight engineering there's only so much engineering capability among browsers to actually implement things there's not really any point in specifying a hundred thousand things if we can only implement, you know, 50,000 things so- The to-do list is long Yeah the to-do list is long I didn't know that until I started working for a browser maker I started working for Mozilla and I said, oh right, making Firefox is a software project and there's a giant backlog and there's a limited number of people that work on it and you have to prioritize and I just as a web developer I just sort of thought, well browsers are magic they should just be able to do what I want them to do it's like, no, there's a so it's part of my job is to like absorb what it is that is the best priority what do people want, what are they saying what do they need and then pass that information along to the folks who make Firefox and the folks who make CSS specifications and other folks that Chrome or Edge we all communicate with each other and let each other know what we think the trends are and where we think things need to go So what are the ways that people can get involved with the creation of new CSS? Yeah so all of the CSS specifications for years all of the conversation would happen on an email list and then these face-to-face meetings and there would be very rigorous minutes taken and the minutes would be on that email list too so if you want to see the history or what happened way in the past that's all on this email list but modern communication doesn't really happen by listserv anymore in IRC so now all the CSS specs are on GitHub there's a single GitHub repo I think it's called like CSS desks drafts or something at the W3C and there's issues so each thing that we're discussing is an issue and if anybody wants to be all listserv-y they can like subscribe by listserv because all the GitHub issues are duplicated into listserv email because someday probably GitHub will go away but people can jump in they can read the issues they can comment they can open their own issue it's all an open discussion it's open source you don't have to be a member in order to participate in the conversation I would ask that people realize that it is really complicated and it's probably far more complicated than you as a web developer realize and just showing up and being like you should do what I want isn't super helpful sometimes people do that and it's like you just put yourself out of the conversation but it's fascinating to actually also I've just learned so much about CSS by watching this conversation and being part of the weekly phone calls and such because it's so complicated but yeah and also people I think can get involved by pinging someone like me or by Rachel Andrew or Leah Varue or Ellica Entomad or Tab Ackins or Greg Whitworth there's like this group of people who you can just talk to us we're all available you know we're all out there on social media marketing channels and stuff like people can find us and say hey you know I I had this example at work it's really not working and it would be super helpful if we could have something like this that's one of the most helpful ways to have an impact or write a blog post and say here's what I think could be helpful here's why what we've had so far it doesn't work this is how it might be able to work maybe not so much working out the details of the syntax but working out why it's needed what the use cases are why web developers would use it why web designers would use it why there's a business need out for people who make websites to have such a tool those blog posts are so powerful and they have such a big impact I imagine people who think about writing them don't realize that the kind of impact they would have that they maybe they just feel like they're talking into the void but those blog posts actually make the biggest difference of all MDN has been a great resource for people wanting to learn more about CSS are there any other resources you would recommend yeah there are a lot of them I mean I'll start by recommending my own I have a channel on YouTube called Layoutland where I'm teaching people about the new CSS that you can use to do layout and really trying to inspire people to open up the imagination and the possibilities of graphic design because most of what we've been doing is so based on the limitations of like 2008 and we have a whole new set of possibilities and I don't see them being used yet so I'm trying to inspire people and explain and teach through that channel Layoutland YouTube because people like videos also of course CSS tricks is super popular especially magazine is really high quality content really well curated really well written Rachel Andrew will highly recommend her work she's been writing about layout and grid and she really gets into the details especially around how the CSS works exactly what you need to be doing she's a bit more of a developer and I'm a bit more of a designer and the two of us kind of wander the earth together teaching a lot of the same stuff but there's so many of course so many resources out there well Jen this has been great thank you for being here yeah thanks for having me you can check out everything we talked about in the links in the description below thanks for watching and we'll see you next time