 Hello, my friend and friends. Today's video is one that I'm absolutely thrilled to be bringing you, as I was lucky enough to have a chance to have an in-depth talk with Gent Simmons, where we got to talk about the state of CSS today, how it's got to where it is now, including an interesting discussion on how Flexbox not only changed how we make layouts, but it also changed some of how browsers approach things when it comes to introducing new features as well. I'm going to talk about Safari and how it's been leading the way on a lot of the new big features like haas and container queries, amongst a bunch of other ones, and dive into how developers actually can influence what browsers are working on or prioritizing, and a whole bunch of other stuff as well. And just in case you don't know who Jen is, she's currently a web technologies evangelist at Apple working on the web developer experience team for Safari and WebKit. She's also a member of the CSS working group, and she was one of the people who helped usher in grid to the world of CSS and educate us all on how it worked. She also introduced the idea of intrinsic web design, and she's just done so much other stuff for the web as well, and I'm just absolutely thrilled that I had this chance to talk to her. So let's finally get to the interview itself. Let's go. First of all, Jen, I just want to say thank you so much for coming and joining me for this. I'm really looking forward to it. Yeah. Thanks so much for having me. I'm really excited. Yeah. This is a great show. I have a warm spot in my heart for teaching CSS on the internet through videos. So it's great. Yeah. Thank you so much. That means a lot to me. Yeah. So I guess the first thing I want to talk about is we're going to sort of, but you know, it's sort of speaking about having a channel devoted to CSS. It's sort of turned out to be a really good time to start one because I never imagined the way that CSS would evolve so much because it seemed like CSS was really stable for a really long time. Because now it seems like every time a browser is updated and I look at a change log, I'm like, oh, I have five new things I need to learn about. And I'm just curious, since you know, some of the behind the scenes stuff going on, like why the pace of change might seem so much faster. Yeah. Well, I think there were reasons that the pace was slower before and then those reasons changed. So some of it was, and I wasn't involved in the CSS work group during a lot of this. So I've heard the stories a little bit second hand. They might be a little bit overly summarized. But my sense is that from what I've heard is that there was, that CSS itself, it was written in the specification that later was called like the CSS one specification. And it was pretty basic, pretty solid idea, but it took many years before browsers really had support for it. And then CSS two came along, the spec got much longer, the web standard got much longer, but it still was very under specified. There weren't a lot of details about what each of those things were supposed to do. So you ended up, for example, with, hey, if you set a width on a box and then you give that box padding, is that padding supposed to make the box wider or is the box supposed to say the same size and the padding goes on the inside of that width? Like it was different in different browsers because the web standard wasn't super clear. And then there was a movement to say, OK, well, that's really not working out very well. How about we make the web standards be incredibly detailed, which took a lot of time to go through and be like, no, it's going to work exactly like this. If you took a float and you put it inside a table cell and then you did something else crazy with that, then this is exactly how it should work so that that way every browser was identical and not only identical in how the features work, but identical in how buggy code works so that if a developer out there writes code that actually has bugs in it, that those bugs work the same in every browser. It took years to go through all of CSS2 and give it that level of attention. And the CSS2.2 specification was really kind of like, OK, finally, we've got all the details into all the things that have been invented over the last whatever that was at that point, 10 or 15 years. And once that was done, then the working group could start tackling CSS3 and adding more new features. And the first features that got added were all kind of rounded corners and basic things. And there was a bit of a backlog of a bunch of ideas that people had had over the years, but the working group was just trying to get the basics into a really good shape before they could move on. And then it felt like I think my sense is that the most urgent need at that point was layout, that the web needed better layout models and better layout tools. So yeah, we've got Flexbox and Grid. And some of those specifications are incredibly complicated. The algorithms for determining how layout works are hard. So those were massive projects. And then, OK, that stuff got done. And then it feels like, all right, everybody knows that CSS is a thing because for a long time it wasn't. Some people really believed in it, but other people didn't. Everybody agreed to stop using tables for layout or whatever techniques were being used in the 90s and the early 2000s. And with everybody body and both developers and browsers, it feels like also there's more, I think, of an understanding of how important it is for there to be three parts to the web that you've got HTML, you've got CSS, and you've got JavaScript, and that each have their roles. And it's like the closer you can get to the metal, the more declarative you can be as a developer, the easier it is. So if you can do something in HTML, do it in HTML. And then add CSS to create styles in the look and feel that you want. And if you can do something in CSS, like an animation, then do it in CSS. But if you want to do something that can't be done in HTML or can't be done in CSS, then do it in JavaScript. That's cool. Use JavaScript. There's a lot of like, well, hey, everybody's doing this in JavaScript, but do you really want to implement that same thing for the 400th time in your career as a developer? Can't we add that to HTML and put it in HTML, like the switch control is now being added to HTML? Or, oh, we've been doing this. People are using JavaScript to do this, but is there a way to actually do that in CSS? Can we move it closer so that developers don't have to do as much work, and it's baked more into the browser, and it can be more accessible and more robust? So I think that's where all of the people who make the web become what it is. It's been the work that all of those folks are doing has matured over time, and lessons learned over time become canon, and then you can build on top of that canon and build just get something's going. So yeah, you don't have to do this. Now there's a new thing. Oh, it's cooler. Oh, it's more polished. We got the basics for typography. Now we're getting a lot more polished for typography. We had the basics for layout. Now we're getting even more layout tools. We had the, you know, so it is exciting. I think the challenge for developers now is keeping up. How do you, wow, there's more new stuff I got to learn. How do I keep up? But it's worth the investment of time. It will save you time in a long time if you really learn it. That's a question I get asked a lot, is how do I keep up with the pace of everything coming out? I'm like, oh, I'm in a privileged place where I can actually spend time to do that for most of my day. And I understand if you're working, it can be a lot more challenging. But I think just keeping an ear to the ground a little bit, at least so you know what's possible, I think, is the most important thing. Yeah, I think that's a good strategy, is if you at least just hear that something exists and you tuck that information in the back of your mind, then the day that you're like, oh, I have to do a thing like that, maybe it would be faster to go learn the new one rather than use the longer, more laborious old-school way of doing it. So circling back a little bit to the pace of change that we sort of got to now, I think at least from my own perception, one of the things that it felt like for a while was, Safari was a little bit slower in keeping up with some of the new features. And that sort of changed a while back because I think Chrome and Firefox for a long time were on more of like the evergreen type of update schedule. And I think it was only in 2001 that Safari sort of officially made it like a switch into something where there was more regular updates. I'm just curious about why it happened and if it has helped in keeping up with all these new things that are coming out. Yeah, well, what happened in 2021 was that we changed the way that we number Safari. So rather than numbering it 10, 10.1, 11, 11.1, 12, 12.1, 13, 13.1, 14, 14.1, like there was more than one release in all of those years. We changed up the way that things are numbered. So Safari 15.0, 0.1, 0.2, 0.3, 0.4, 0.5 and 0.6 are more like that was the first sort of step was let's make all of the releases that come out more visible so that we can write comprehensive release notes for every release and we can ship features into any of those releases because there were other releases happening in the past and bugs were getting fixed and such, but people didn't always know about it and it was hard to, you know, you couldn't look on Can I Use or MDN to see Safari 14.1.1 or Safari 14.1.2. So that was one step. And then feedback from folks and taking those lists and to folks inside WebKit, inside Safari and saying, like we're hearing from people who make websites what they need and let's, we took those lists very seriously and we started executing on them and, you know, things always take time. So it took time, but starting Safari 15.4, there were quite a few features there. Safari 16.0, 16.2, 16.4, there was a ton of stuff and 2023 from like 16.4 to 17.2, we shipped like a record number of features. So Safari 17.2 just came out in December a couple of weeks ago and it was the biggest release that we've ever had in December. We were able, we just shipped more stuff spread around the year so that it gets into the hands of your users just a little bit sooner. I mean, I'm really happy to hear that people are seeing a difference that it feels different because that was definitely our intention. Also, you know, there's a lot of effort as my colleague and I, John Davis and myself we put a lot of effort into writing a giant article. Also a lot of WebKit engineers help with these articles, they're so huge. Like writing a really great article about each release where we go through all of the features that are in that release. Not just the highlights are the most exciting things but we talk about every single solitary new feature no matter how obscure it is and we take some time to describe it so that like I said before maybe you don't need it right away maybe it's part of the stack that you don't actually even write very often but if you could at least learn what it is then you can tuck it back in the back of your mind and when you do need it or when a colleague needs it or somebody else on your team needs it you can be like, oh, I think I heard about something that shipped in Safari last year like let's go check that out and then there's links to let go actually learn how to use it. But that's the hope with those articles I really it's webkit.org is the website where we publish every time seven releases a year of Safari so seven times a year that these giant articles that describe every single thing that's in the release and then also we're taking a lot of time to document and list in the release notes because there's also release notes so the articles go on webkit.org there are release notes published on developer.apple.com which if you just search for, you know Safari 17.2 release notes you'll find them but we list all the bug fixes like all of the bug fixes. But wait, that was something else that we really heard from everybody is that folks wanted to, you know you encounter a bug in the browser maybe you filed the bug report and you're wondering what's going on and I think maybe sometimes what would happen is the bug would get fixed but it wasn't really announced that it had been fixed so folks just assumed that it still hadn't been fixed but it was fixed so that's this weird position to be in as a developer so our goal is to really list every single bug fix that affects web developers which is so much work it's so much work to go track them all down but it matters, we're hearing from people that it really has been helpful so that's what we're doing these days, yeah. Yeah, and actually just on that note of the idea of filing bug reports I do think it is worth mentioning that if somebody comes across a bug that usually it's a good idea to file a bug report instead of just complaining about it on social media. Yeah, because you go to bugs.webkit.org and that's where you can file, you know it's an open source, open piece of software you make on yourself an account and log in and file a bug report because those do go into our system where everything is being considered and I know often there's not a lot I mean we're working really hard over here and going very fast and folks don't always take a lot of time to update those tickets and explain what's happening but that doesn't mean nothing is happening it really does not mean that nothing is happening there's many things happening over in another space so and we're working on like that's a place for an improvement like oh maybe we should figure out ways to help communicate outwards on those issues a little bit better that might be nice but don't assume that if it's quiet that means nothing's happening because we care a lot, a lot, a lot I mean often I made websites for decades most of the time when something was broken it was me I was writing that code but there are times where people realize no it's not me like I really worked hard to figure out that there's something wrong with the browser please let us know please let us know because we want to fix it for sure you're helping us out by letting us know if you find something that's wrong in our implementation it matters you know these systems are massive there's millions of lines of code in each web browser and the code bases are 10, 20, well 20, 25 years old so yeah it takes everybody to help track down anything that might be wrong and get effects yeah can imagine it's an overwhelming project at times I wouldn't want to have to deal with that side of things I'm glad I just get to use the browsers and not figure out how they work since we're sort of on the topic of Safari and the update schedules and all of that and sort of perceptions of it I know for me my early perceptions of it at one point were that it sort of went to the beat of its own drum in terms of what it was prioritizing and a lot of it was like color related stuff or design related stuff with typography things I think it's still the only browser that supports hanging punctuation which I love and I'm just like oh I wish that was everywhere because it's nicer there was initial letter it had early support for the P3 colors for a long time now and the color function and stuff and it's sort of like that seemed like they were doing that and the other browsers were doing other stuff more and sort of that perception change that I was talking a little bit about was also when all of a sudden I think it was a lot of the 2022 releases especially when all of a sudden it was like the major features that everyone wanted Safari was the first one to actually launch them the two main ones that come to mind for me are Has and Container Queries and I remember seeing like it was probably a tweet from you or something on social media where it was like these are coming now and it was Safari the first one I was like whoa, okay that's great especially for such like massive features like that it sort of I guess for that's when I sort of really picked up that like oh things are going a little bit different over there right now at least in my mind in my own perception of it Yidd Nesting came early enough some grid obviously was way behind on Firefox but it was still ahead of Chrome so yeah I guess like on that front is has there either has there been a shift in what features or types of features you guys are looking at or is it more of what you said about just listening to what people are wanting or just like I guess how do you pick what new features this is what we're prioritizing now yeah I mean it's always so complicated right like how does any engineering team handle their backlog and figure out what to do next I guess that's why I have product managers have jobs in some companies right and I think that in somebody Safari has always been super inventive and been pushing the boundaries on a lot of things and I think you know once I joined Apple I was often surprised to learn stories about things that Apple had been taking the lead on that I had no idea somehow I had an impression that it was a different browser and maybe that's more of a comparing DevRel team to DevRel team or something more than or how much time or effort companies put into DevRel I don't know but rather than actual truth about who invented what but you know like it's people at Apple who wrote the HTML5 design principles it's people at Apple who came up with private browsing and shipped the first browser that had a private browsing mode it's people at Apple who decided that we needed to eliminate third-party cookies years ago privacy especially taking the lead over and over again battery life thinking about performance not just as how fast does the browser page load like how much of electricity does it use that what do everyday people want they want their batteries to last they want to get online and surf the web forever on a device that has a battery and not have the battery die so there's actually a developer tool in Web Inspector in Safari that shows you how much electricity something is using and it's been there for years right so there are these ways where the folks behind Safari have been helping collaborating with everybody else to invent the web and drive the direction of the web just like so many different companies many of which you know the big names of because they own they run browser projects but also there are a lot of companies that you might not realize are super involved like Adobe Adobe's had huge impact on the web many many many different companies that I should there's just too many to list so it's like a big group project that's actually quite successful and so yeah recently I think there has been more effort put into making sure that people know the things that we've been first on that they aren't sort of sliding in secretly or silently they're not sliding in silently but we're talking about them we're writing about them more and I also think that in general like I was talking about the maturity of the web and the way that people who make the web work together has evolved over time and I think some of what you're seeing like grid shipping in four browsers in four weeks was so profound for so many people that I think there's been efforts across many different teams to say hey we should do that again so things like cascade layers or nesting or whatever to be like oh I see you over there working on that we're gonna work on that too or oh I talk to you about that I'm not just gonna think eh it will ship eventually I'll think wait are you actually working on it we wanna work on it oh we gotta hurry up over here so there's a lot of I see every company doing a lot of that kind of work kind of naturally like without necessarily having infrastructure around it just sort of realizing that it's just super helpful and kind of fun when we all release sort of simultaneously it starts to people start to rewrite history and sort of make up these stories about it's been some kind of a competition and in a way it's really more of a giant collaboration and I think it's important to realize the strength and the importance of all of the different teams all the different companies that are involved and creating the web and moving the web forward and realizing that really helping any of those companies and making any of those companies stronger is helping the web in general that it's not a one winner and everybody else is a loser like we really need everything to be working every browser to be in great shape so yeah with sort of what you said there about grid I remember for me that was like a like you said it was like wow that just happened on all the browsers okay I didn't know that was possible especially after the pain of Flexbox taking years to seem to standardize and then even once the spec was there it seemed to take a long time to get to a place where all the browsers were had it and implementing it in the same way it was a buggy mess for a little while so grid was really exciting on that front and when I saw all like going back a few years when we had all these new features people were talking about them and you hear chatter about whether it was container queries or other things I was sort of like wow there's a lot of stuff coming and I was a little bit worried that there'd be sort of a new fragmentation going on just because there was so much and it's like well what if Safari prioritizes this and Firefox does that and Chrome does this other thing and I think I was a little bit scarred by subgrid when Firefox jumped on that right away and then it was like oh no one else is touching this okay for a feature I was really excited by and luckily we finally got there but it seems like you said with nesting with layers there's so many others that it just has container queries all these new features that are not only super useful but also really complex and they're just coming out in all the browsers within a few months of each other we've mentioned it a little bit you know you talked a little bit about why that might be happening and you've also mentioned the interop a few times now yeah well let's talk about interop but actually you just reminded me of another thing that changed that I think really is the reason that it seems different because it is different but this is what changed so back in the day for a while if something new came along like border radius the working group would think of the idea they would write it down they would discuss the details and then somebody would implement it and ship it and it would be out there in the world but then something like Flexbox was far more complicated and it actually needed some implementation experience where you couldn't just imagine it in your head and write it down and be like that sounds good we're done it was like oh we need to actually have some running code we need to actually see what this feels like we need to make some demos and see if those demos work out well and in order to do that everything was put behind a prefix and also there were other times when browsers would be like oh we have an idea for something that's why there are so many webkit prefixes because Apple there was lots of time engineers at Apple who were like oh there's a really good idea let's go ahead and try this out but we don't have a web standard for it yet so let's just put it behind a prefix while we're coming up with this idea and implementing it and figuring out the details once the web standard is done then we can take the prefix off right so that was kind of the way that things worked for a really long time and Flexbox was in some ways the pinnacle of realizing that that's that can go wrong when things are complicated because there were literally three entirely different ideas about how Flexbox should work and all three of them were shipped into browsers behind prefixes and so there was like the 20 whatever 12 version I guess it was like the 2006 version that shipped behind a prefix and then there was the 2009 or something like that version got shipped and so browsers just kind of wiped out their first implementation and wrote their second implementation and I think the intention on the part of the people who were making browsers although I'm not totally sure because I didn't work for browser at that point personally but I think the sense among the engineers was like well nobody's using this yet this is a rough draft and but it those of us who were front-end developers were like awesome I'm using this right now like I read the books about CSS 3 that showed you how to use a web pick it you know a prefix whatever flavor prefix and so I was writing all kinds of code and shipping and into production with prefixes but then it would get changed and then your website would change from from underneath you or so after all of that experience having Flexbox be so painful having developers end up feeling very skeptical and like I can't trust what's going on and then for instance when grid came along people were like I'm not touching grid for the first four years I'm gonna wait until 2021 when it's been out for a while because I don't trust I don't want to go through what I just went through with Flexbox but it's like browsers change the way we do things right so there are no more new prefixes there are no more rough drafts being shipped to everyday people in the normal browsers that they use everything is behind a flag so the advantage to that is that when a new idea comes along and it needs some work and some implementation experience like grid so this started when grid was still under construction this started in 2012 where grid was put into browsers well not 2012 but like 2015 or so grid was being put into browsers without a prefix behind a flag and so grid was worked on and changed radically many many many times behind a flag developers were not really paying attention and then when it did ship in 2017 all everybody all the browsers had to actually do was just flip the flag they're just turning it on and it had already been you know baking for five years so at this point when things are being created they're being created behind a flag and they don't ship until they're ready it may feel like things are showing up quickly but actually there was years of work behind it or it may feel like things are showing up like many many things but it's even more work than you might even realize is happening it's just much neater and much more everything's like ready once you once it gets to a place where it's shipping without the flag so developers should feel much more confident about using those things quickly especially if it's something that will work with progressive enhancement that you can use a progressive enhancement technique then start using it right away because it's not going to change from out underneath you it's it's this the web standard is stable it's ready to go and that's a pretty massive difference between how things used to be and how they are now yeah I like you said I think the the flag system works so much better than the prefix one did oh like you said oh this is there I can use a prefix and put it in and going through prefix hell we had for a few years with all the different stuff it's a world that any developer who didn't have to live through that I'm they're jealous they didn't have to deal with all that yeah you made me think they're a little bit of just with with talking about progressive enhancements is at one point because I've always had the whole thing whenever I put out a video on a topic someone will invariably say what about browser support if it's below even a really high number I used to do early on with grid I like I was looking through my videos recently and I had like a bunch of grid videos and then I actually had a gap for a while just because like you said there were so many people just like browser support browser support browser support and I'm like okay I'm gonna take a little break and once support numbers are higher I guess I went back to it I don't know it wasn't necessarily a conscious decision I'm not sure but one thing at one point I sort of decided that I wasn't going to do a video unless at least two browsers supported a feature just to sort of for whatever to say at least I know this is coming this is good two browsers or do it but now there's a few things I've done where it's like well only one browser might support this or it's even well yeah generally but it's just a progressive enhancement you know so it's a really cool thing it works if they have that browser that's supporting it and if not it doesn't really matter it doesn't break anything everything's fine it's just people get a cooler or more fun or whatever it is but like more people need to sort of lean into that mentality a little bit I think that's one of the most important skills to really understand as a web developer is what is progressive enhancement and how do you do it and if you're writing CSS to really understand the difference between I don't know something like cascade layers or nesting the benefit is for the developer to make it easier to write code it doesn't really make a difference to the user right like user can't tell that you nested your CSS or that you used cascade layers in your CSS so maybe those things you don't want to use until basically all your users have support because you would have to write your code twice and once for using these layers and once not using these layers and that makes your life harder right like the whole point is to make your life easier than like why bother except I should say I bet there are some great third-party tools that do preprocessing or something that could help you through that transition so in those those might actually be a good idea I don't I haven't actually looked at them so I don't I can't recommend them or not recommend them either way but if you just think about if for some reason you couldn't use any third-party tools and you had to only write vanilla CSS would you want to use cascade layers and like a change to the cascade if you don't have any support you know if you maybe I don't know 40% of your users have support it might be too early but there are other things where something like um like line height units or one of my new favorites where you could easily define your line height using a REM or an M or whatever and then very quickly write it again and be like well if you don't know what an LH unit is then you're going to use 1.2 REMs but if you do know what an LH unit is then you're going to use one RLH super easy to do progressive enhancements like that super easy to make sure that all of the browsers are covered even if somebody's got a very old device with a very old browser over in the corner that they're good too their their content's gonna look awesome and um and yet you can use these things now and make your website look extra gorgeous now not have to wait five years or something because even when 98% of your users have support for something those 2% of people matter they can on a big project they can actually be a lot of people so progressive enhancement is a good way to ensure that all of your users are going to have a good experience even if it's only four people who have who don't have support or something that those four people matter too right so and that the web is designed to do that like the whole reason that the web was invented and the web became the dominant way that people use the internet is because baked right into the basic idea the basic technological architecture of the web is hey this is going to work on a bunch of different devices a bunch of different computers computers that back in the 80s like literally had no way to talk to each other the web worked the same or not the same but the web worked on all of them and different people would have different experiences but they all could have an experience of the web that worked and so those are really important values to have and very important techniques to understand how to do and they're not that hard like it's a little bit weird if you're I don't know if you came from a computer science background or something where maybe in other coding environments it's very bifurcated where it's like you need support for operating system number whatever and if you have it you can download my app and if you don't you do not get to use my app like then you can count on there only being a certain kind of support because you it's very locked down where the web is the web's supposed to run everywhere on very very different machines so cool lean into it like that's what's fun about it yeah so anyway progressive enhancement you could talk about it forever but I see new you know new people all the time learning and I am like oh you've got it this is like one of the most important skills you have to learn is what is what in the world is progressive enhancement and how do you do it circling back to circling back to interrupt just the idea there of all the browsers or not all the browsers but just sort of that I guess seeing this everyone sort of moving in the same direction a little bit and we'd mentioned or you'd mentioned interrupt a couple of times now just for people who aren't familiar with it could you sort of give a little bit of background yeah so if you're wondering how you know oh this web technology doesn't the work the way I think it's supposed to well the supposed to what does that mean how is it supposed to work well any web technology the way it's supposed to work is according to the web standard right so there's a web standard someplace that's been written down a technical document that explains exactly how that web technology is supposed to work it's not like the first browser that shipped it is right and everybody else is supposed to copy it's that there's a document somewhere that's been written down by a working group and so you can test you can write automated tests to see hey cascade layers is it behaving the way it's supposed to be behaving well let's write a whole bunch of automated tests that way also over time engineers can keep an eye and make sure that nobody created a regression bug that that feature keeps working the way it's supposed to be working and so there are repositories of shared open source tests of web platform technology is one of them is called web platform tests which tests a lot of like CSS and JavaScript and now actually new accessibility tests have been written and not not I'm sorry not JavaScript CSS and HTML there's a separate set of tests for JavaScript someplace else so that project there's a project called WPT web platform tests so there's a a project that that organization started hosting several years ago that's called interop interop 2023 maybe you heard of there's an interop 2022 and interop 2024 coming up where each year there are there's a group of organizations that get together to decide what's going to be an interop next year so and then the last three years that's it's been the same group so there's six of us Apple, Google, Mozilla, Microsoft so those are oh yeah Chrome, Edge, Safari and Firefox also Boku and Galia both of which are companies that have a whole bunch of browser engineers that work on many of these browsers like a Galia works does a lot of work on WebKit so it's all a bunch of you know it's six companies of browser engineers who come together to say okay I mean in a perfect world with an infinite number of people working on our these browser engines we would fix everything and there would be no bugs and we would implement everything but no team has that many people on them so priorities like what could we choose of all of the things that are making it hard to build websites especially like what is something that's just not behaving the way it's supposed to be especially maybe some of the stuff that got written up in web standards 10 years ago 20 years ago maybe things that were shipped in CSS2 or CSS3 that didn't have interoperability where it worked a little different in each of the browsers and there are things you know in CSS where you start to think about it you're like oh that's right there is that cool feature like how to make a border out of a bunch of different images that have all been chopped up so that you can put a picture frame around every image or something like that's right I did try to use that once and it was so hard and it didn't seem to work and so I stopped using it and I never tried again like well maybe the reason it was hardest because maybe it wasn't implemented correctly in all the browsers so oh so this year for instance in interop 2023 that was one of the focus areas was border image like let's let's fix whatever bugs are there let's fix whatever differences are there between browsers and sometimes things that are chosen for interop or some of the newer things like cascade layers was in interop the idea being that like hey this is going to be looks like this is something we're already all working on the spec this the web standard is done right so this is not a place to come up with new ideas this is not a place to finish web standards you're like you'll see that nesting was not part of interop 2023 because the nesting specification was still being debated it still had not been decided how it was going to work so it couldn't be part of interop interop is about things that have already been there's already consensus the web standard is already finished everybody already knows what it's supposed to be there are already tests that have been written right so if there's no tests even if it's a good idea it can't be an interop either like it has to have tests so let's like use the test and double check and has for instance was in there just to like is there any are there any differences are there any bugs and at this point has it's passing 100% of the tests in all of the major browsers and interop is only testing desktop browsers because of the infrastructure at WPT and it's actually only testing them on older operating systems right like so it's not a perfect situation but it's it's pretty good and what it does is it gets the attention of all of our teams and these six companies and sort of says hmm yeah you know pointer and mouse events like let's yeah let's all commit to making this better let's all commit this year to sitting down and figuring out actually two years ago there was an investigation project which is basically homework for the team that runs interop so two years ago people wanted to do pointer and mouse events but there was no consensus on what it should be and there were no tests and whatever I shouldn't say no test but there was a need for a better test coverage so the groups spent a year looking at the specs and figuring out what was agreed on and figuring out what this test could be and they spent the year writing tests and then that was for 2022 and then in 2023 that became the focus area where those tests started counting towards this basically basically all it is is a scoreboard it's a dashboard where there's a big score for each of the browser engines and you can look and see every time a new browser engine or a new preview browser comes out a new version of Sephardic Foundry Preview or a new version of Chrome Dev or a new version of Firefox Firefox Nightly the tests get run again and you can see the score and you can kind of track it there's a little graph that shows you like the improvement over the year and there's a column that shows like okay let's not just look at browser versus browser let's look at which tests pass everywhere like at the beginning of the year I think it was like 48 percent of all of the tests that had been selected to be part of the interrupt passed in all the engines 48 percent and now I think it's 95 percent 95 percent of all the tests pass in all the engines and there's an open call each fall if you are this year a developer working on some code and there's a thing you'd like to use but in that back in your head you get that feeling of like oh this is just so crappy I wish it worked everywhere but it doesn't take a note and next fall go it's over like it's an open call and GitHub you just make a GitHub issue on the right repository and file an issue and you got to make a case you got to like submit an application with like all the information where are are there tests where are they is there a spec where is it what seems to be the problem what's the idea here I think we had 91 proposals for focus areas for 2024 I can tell you that we're not going to pick 91 that's a lot yeah it's too many it's too many so you know we'll pick whatever handful of things that seem to really stand out so there obviously developers can have an influence on that by by submitting things you'd mentioned earlier that people sometimes you know just Safari sort of heard through blog posts and social media at one point and made some decisions to go forward based on the feedback they were hearing there I'm curious if you have like if people say there's a feature that's maybe in the works but doesn't seem like hanging indentation I want I want that to be in Chrome and Firefox let's say but maybe there's something that's not in Safari yet or whatever it is like as a user that would like to see it and it's something that exists but it just doesn't seem to be you know prioritized is you know how do how do browsers hear from people is it just through you know watching social media or listening to social media and blog posts is there a way that you know we get our voices heard I guess because it's hard when you're just you know I have an audience but most people are you don't have what I have and I'm just curious like for for the people watching if they have something that they'd like to see progress on that maybe isn't that the interrupt level yet but is you know earlier on in the spec or something if there's something they can do yeah I mean any any method of communication that you can possibly think of whether you're trying to communicate with browser teams or working groups who write this web standards or other developers or other designers you know any of those ways of connecting with people work it really is about reaching out to regular humans and talking to them but also I do think that before I started working on browsers I would have had no idea how effective a really well-written blog post can be where for example I saw someone else I think the other day write about hanging punctuation that they really love it they like using it if you write something and you teach because of course there's many people who have no idea it exists so like teach it say here it is it works like this I love using it in this situation here's the code here's an example I just you never heard of it I just taught you how to use it also what's the progressive enhancement story there like that's a perfect example of that's great you can hang your punctuation for the browsers that support it and then your quotation marks will be inside the paragraph for the browsers that don't support it so like tell that story too right and if you can start to create a conversation even if that conversation is nowhere near any of the people who have a have the opportunity to make decisions or impact roadmaps for browsers or whatever um and it those things can just there's just a there's a remarkable way in which those conversations can start to build and especially if your example is gorgeous your webpage is really cool and people are like wow that's a gorgeous example that's beautiful and then they want to tell each other and then they share it with each other on social media or private channels or wherever sometimes it doesn't take very much for that to to then show up in front of someone who works for a browser company or someone who works in a working group because I can tell you that there are many times when because especially there are many conversations that are happening across companies in working groups or in organizations like the interop organization where they're just coming you know we all kind of like many of the people that who work in these places know each other and they're talking about stuff all the time and and people just pointed out to each other being like wow look at this oh yeah I've been meaning for years to do something about hanging punctuation at my company that's right not only do I want that I also want this other thing that goes with it we should fix widows and orphans okay cool let's we talked about that three years ago we also talked about it eight years ago we talked about it 15 years ago but we never did solve that problem did we oh people still want it people still want this solved good to hear from them I wasn't sure whether they still wanted it we all thought 20 years ago this would be awesome it sounds like people still want it good to know that will help me decide what to focus on as I'm working next year yeah it does really make a big difference and I think stories and like friendliness go a really long way right yeah yeah yeah speaking of one of those blog articles one that caught my attention years ago was one on margin trim I think it was on a medium post it was really good it had like the visuals that would go across to animate it to sort of show you how it's working and stuff it was really well done and it was like oh that's going to be fantastic I'm really looking forward to it and then it I think actually it's now shipped in Safari so yeah but it seemed to take a long time like at one point I thought it just I'm like oh I guess it's not happening because this has been a long time and it's funny because sometimes you hear about something and it's like super early it's being proposed they're talking about it and then all of a sudden it just gains momentum and it ships and then other times like with margin trim it seems to take a really long time and I'm curious and with there was margin trim and I think it was letting trim where like sort of bundled together in the thought process there which I don't think is shipped with the margin trim so I'm just curious why some things can seem to build momentum go really fast or other times it seems to take I think it must be at least four years or three years at least since I read that post so it feels like it was that long anyway yeah it's it is always where it complicated it's always like a story of humans so let's talk a little bit because also I'd love to teach people's about some new technology right so margin trim and yeah what used to be called letting trim but it's now called text box trim and text box edge they're awesome these are things that there's a bunch of smaller little pieces that if you start to add them up and put them together we're inching our way towards vertical rhythm and being able to do vertical rhythm on the web and being able to polish typography and to a level that hasn't been possible before so if you have a paragraph like let's say you have a card and inside of that card you've got a headline and you've got a whole bunch of paragraphs and you've put padding on the card so that that text is standing away from the edge times the first content that's in that card is a pair is a headline and the headline does have a top margin or what about the bottom like maybe there's all sorts of different things that could be the last thing maybe sometimes it's a little bit of a tiny menu or something and those menus don't have top and bottom margin but other times it's a paragraph and those bottom paragraphs the paragraphs have bottom margin on them right so what ends up happening is that margin gets added to the padding to easily get from your QA team where they're like why is there extra space here this looks weird and you're like oh because somebody put different content in this card and we didn't write the code for that a better way to do it is to not try to remove the margins from all the content on them inside the card but to instead say hey card I'm putting some padding on you and I also want you to now magically know that you should chop all the margins off of anything that's touching you so it doesn't matter what it is if it's gonna butt up against you I just want you to chop the margin off margin trim so it's very simple but it means that you can kind of address this situation in a much more robust fashion and then letting trim is or really text box trim now is going to be a way for you to be able oh by the way margin trim shipped in safari already so it's already out in the world I haven't looked recently to see one can use what what's up with other browsers but there's a place if you want this you could start talking about how it would actually be very useful to you so that you know folks understand how important it is whether they should rank it ahead or behind other things that they could be working on letting trim is not shipped in browsers yet and it's not shipped because the spec isn't finished so margin trim and letting trim I think I think I think they were sort of thought of together in the CSS working group and those web standards were written around the same time and it felt like letting trim was just as mature and was going along just as happy as margin trim and that those things could kind of ship at the same time I think that maybe we started implementing them around the same time ish um but as we were implementing and we were continuing discussions with the CSS working group it became apparent that oh letting trim actually starts to touch upon a different problem that's been involved on the web for a really long time which is this so if you've ever say typeset a paragraph and there are multiple languages in that paragraph or other characters of some kind and your font your main font doesn't support those characters or doesn't support that other language the characters in that other language that it will fall back to a different font right so maybe you've got your fancy brand web font as your main font but it doesn't have a certain like a C with a certain thing hanging down or a U with a certain thing above it or or there's characters in another language a CJK language or another language so it like switches fonts that other font and just for a little bit like maybe only one letter is in a different font or one word is in a different font that other font could have different metrics to it and the X height for that other font for example could be bigger or like the font is all set to the same REM like maybe it's all 1.2 REM but visually that fallback font looks bigger which by the way we should talk about this with fonts as it just to because it's a similar problem font size is just fixes part of what's going on but what ends up happening with the original line box the way it lays out on the web is the one of the major principles of the web is that if there's a choice between cutting content off like making it disappear or making it appear but be ugly you go with making it appear and be ugly right don't chop content off just move stuff around so that everything is visible that's how the web works it's a very important principle it's the right choice it's a good principle but what that meant is that the original line box model is is set up so that if the line height for that fallback font is for example bigger then like that one line will be there'll be like more space above and below that one line and it also happens with things like footnote numbers like superscripts where you like superscripts sound like such a good idea and you add one in and you've got like this beautiful paragraph with this whole giant article and every line of text is the same distance from every other line of text just like it should be and then there's like a little tiny number two hanging up in the air and then all of a sudden that line has more space above and below it and you're like why don't do that right? So that line box model it's very complicated and I especially can't explain it with only using words but complicated things are happening behind the scenes in an attempt to make sure that no content never gets cut off but there's new ideas about how that same problem might get solved instead and a different line box model could keep it from getting that weird raggedy thing where suddenly there's more or less space because the font changed or because there's a superscript or because something else is going on or subscript and in some ways that it reminds me of box sizing and you know box sizing border box versus box sizing content box so box sizing content box was the default in most browsers except for one browser it turns out box sizing border box is actually a better default so most people in their reset styles just right off the bat you just apply box sizing border box to everything so I think I think we might land in a place where text box edge gives us a new gives us a way to switch to a different line box model and that we're going to maybe maybe do a similar thing and be like yeah text box edge foobar just like everywhere could you please use the better line box model but I say if and I'm not sure and maybe because this is this is all still getting worked out like this part of the spec hasn't been written yet so there's like a theory that hey maybe we could maybe we could like wander over into this other space and fix some things over here and maybe what we should do is have text box trim gives you the ability to trim off some space which I haven't described yet which I can describe in a minute but text box edge would give you a chance to switch line box models and also switching to line box models will give you the opportunity to tell text box trim exactly where to trim so it's like we started to get into the space of like hey let's just chop off extra white space on the line boxes and we ended up with oh right this is really complicated maybe we should revisit all of this with the wisdom of 2020s the 2020s rather than going with what I've got to find in the 1990s but it takes time does conversations take time and sometimes they take implementation experience they also take like maybe somebody who works as an evangelist somewhere should write a blog post about this and come up with some demos and some examples and really start to explore whether or not the ideas that are in Safari technology preview or in other like in rough draft could are working the way we could intend them to work because again sometimes the ideas in your head don't actually work out the way you think they're going to so it helps to like get it in a browser make some demos try it out and this is where web designers and developers can help too where you can maybe you learn about something that's half built and you can write some code and see whether or not you like it and then write a blog post about how you loved it or how you hated it or how it kind of worked how it didn't work the way you expected it to how you kind of wish it was this other way like people will see that and people will read it and people will discuss it and people will it will be part of the conversation as decisions are being made especially you know again if it's like well intended and kind and full of information full of like real world this is what it actually means to be a web designer and a web developer right now yeah but letting so letting trim and textbox trim letting trim is the old name textbox trim is is the new name but basically what it's going to do is so and this is the example I started to say before but it was the wrong one so let's imagine you have a paragraph with a headline and above it you have an image and it's certain few port sizes or whatever you float that image and what you want is for the top of the headline to line up with the top of the image because it's just going to look nice but the top of the ink on the letters maybe you're writing in English and your your headline has some capital letters on the words but there's nothing else that sticks up any higher than your capital letters you don't have any little extra characters or anything but that capital M is not the top of the capital M is not lining up with the top of the image and you're like why is there any margin no is there any padding no is there any like what why is there extra space there what it is is that there's extra space inside it's sort of inside it sort of comes along with the font where the font you know your capital M stops at a certain place but maybe somebody else is writing a capital U and they have a umalot above the capital U or they're writing a capital E with an accent mark on the top of the capital E or they're writing in a language like Thai that has all sorts of parts glyphs parts of the characters that go higher than the cap height of a font so fonts support multiple languages and there's all sorts of different metrics for these other languages so letting trim is basically going to come along and say well where do you want to cut it do you want to cut it at that cap height do you want to cut it at the x height and it's not going to cut off ink so if you say I want it to cut off at the cap height and then you do have an accent mark the accent mark is still going to be there it's just going to stick up above the line in fact it will be like higher than the image and maybe that's what you want maybe you want the cap height to line up with the top of the E and then you want the accent mark to be higher than either one of those things but another challenge with text box edge is oh now we need to reach into the font oh also we need to say okay well we know cap height is a number is a metric that people might want to use that's a good line x height's another good one maybe you want to chop off at x height maybe you make it so there are no capital letters and you want to line something up along the x height but what else what's the right line to use in Thai what's the right line to use in Korean what's the right line to use in all of these many many languages around the world also people who make fonts aren't necessarily very consistent about filling out the tables with all the data that they're supposed to fill out so let's go talk to the Unicode consortium and see whether or not we need to get some new metrics added to the fonts and let's talk to the people who make fonts and see if they're going to fill out the tables and what are we going to do if they don't fill them out and so it's a more complicated conversation than chopping off margins yeah yeah that's definitely one of those like oh this sounds like a great idea oh my goodness it's it is a good idea but it's there's a lot that goes into it yeah yeah but by the way I mentioned cap yes cap height x height there's some cool units that people should know about I like the cap unit I like the x unit ex for x and now there's root units for those so you can do R CAP for root cap height and you can do R EX for root x height there's a character unit which in horizontal writing modes which is say for example how English works how most languages around the world work is that they you know the the string of text lays out horizontal the ch unit measures the width of the zero character of the font so it's like oh instead of saying how many rem why don't you say I want my column to be 40 characters wide I want my column to go from 25 characters wide to 40 characters wide minimum of 25 characters maximum of 20 of 40 characters like that's a great way to do typography and if you want to do a root character unit you can there's now an R CH unit the IC unit which stands for ideographic character the eye is ideographic and the C is character IC that is for measuring the width if it's horizontal or height if it's vertical of a CJK character so a character in Chinese and Japanese and Korean or other languages that are similar that are character based in those languages it tends to work the way it tends to work is that all of the characters are the same size as each other except for the ones that are not that size like Ruby's smaller and some characters are half half character width but there's this idea there's a concept in those in those in typesetting those languages where every character is the same width kind of like monospace fonts in Latin based text in Latin based languages English but it's really important and in fact especially in Japanese typography like lining things up even when you type set horizontally you're like of course everybody wants their lines to look gorgeous type horizontally but then because the characters are all the same width as each other you start to create this vertical alignment as well or of course you can Japanese especially lay things out using a vertical writing mode so then it's like the other direction the horizontal direction so everything is kind of a square and you want all your squares to line up and be squares on the square grid so you could use say the round function and ask the browser to not make the width of the column be any pixel in between but to be like always rounding off to the nearest character so that as the as you make the browser if you if you're doing a responsive web designer whatever and you make the browser width and your column gets wider then it doesn't like smoothly open up it like jumps for one character width to another to the next or every 10 characters so like jump to the next 10 characters or pixels you could say I want you to always round off to the nearest 100 pixels this flexible column anyway these units just kind of like open up they sound so simple when you read about them and release notes or whatever you're like oh that's whatever okay but I I can't wait until people who care a lot about typography really think deeply about what they mean and start to realize oh instead of using a rem and m for everything I think I'm going to be more prescriptive and say I want this to be a certain number of characters wide and I want this to be a certain number of this wide I want this to be the same I want my line height I want my box to be this I want my margin around my paragraph to be one line height so that the whatever the line height is on my text that the space between the two paragraphs is exactly one line height you couldn't do that can now line height units new last year there's also root line height units right so there's in some ways it's like oh there's so many units I don't know what to do with them all but on the other hand it's like there's so many units there's so many things you can do with them all typography I just it it's never been like this before like the amount of gorgeousness that designers could ask for is amazing and I wish they would rather than just saying everything's a pixel like nothing's a pixel everything is a is a unit based on something else on the page font size adjust I feel like I'm just on a monologue it's great I've enjoyed myself yeah keep going yeah so font size adjust it gets back to that problem I was describing before where different fonts are different sizes so even if you say I want everything to be 1.2 rem it's gonna be so one place that this happens a lot is if you're making a website and you're talking about code and you're like oh my normal font is this font maybe Georgia I'll just use old school fonts like my normal body copy is Georgia but I want my code to be type setting courier and then you're like writing a sentence and then you say in the middle of the sentence you say the word you switch to the code font and you say font size adjust and then you go back to the rest of the sentence but the oh in font in courier is like a bigger than the oh in the other word in Georgia and you're sitting there looking at it going really that looks weird so then maybe you sit there with the developer tools and you're you search for the magical number of like well if I make my codes on the 82% no 81% no 83% no 82.5% now they visually look the same right but what if you're not using courier in Georgia what if you're using web fonts and then what if the web fonts don't download and it falls back to courier and you've got your body web font and you've got courier when you actually you picked your magical number to be your gorgeous fancy code web font right then it could end up being extra big also computers are good at doing math and this is a problem where like I feel like this is all of what CSS is doing like yes a developer can sit there and fuss with it to try to get it to be hopefully good if conditions are optimal but what happens when conditions are not optimal it ends up being not good and also it takes a lot of work how about instead we put this the burden and all of this on the browser get the browser to do this work you don't want to do this work as a developer the font size I just was defined one way it was implemented in Firefox that way and it was in there for a really long time and it worked just that way and then people realized people at the CSS working group that they could make it better and so they added two other parts to it so I guess I'll describe how it was originally and then I'll describe how it's better now and actually how you should just use the better one but the original one was okay you're not going to look at the first font you're just going to look at all the fonts in the paragraph and you're going to look at the x-height and you're going to look at the font the whole font itself and there's like a ratio between those two numbers it's like x-height divided by the font size or something and I want you to change the size of the font so that the x-height is whatever so I think most fonts are around 50% they're around 0.5 so you would say font size adjust 0.5 and what that would do is it would iterate over every font in the paragraph and it would just adjust all the sizes it would say oh 1.4 rem but I need to adjust the ink so that the x-height is half of 1.4 rem sort of not really but kind of and then it would adjust all of the font sizes so that they were all that all the x-heights would be like 1.5 of the whole thing and so if you had your body copy and you had your code font it would adjust both of them to be 1.5 there's a few problems with that one is you're still searching for a magical number maybe you don't want to change your main body font you just want to change the others so what I would have done as a developer in those that era is like try the magical number well what is the ratio of my main font oh it's not 0.5 it's actually 0.4 7.5 and then I'll put 1.475 so that my main font isn't actually changed and all the other fonts are are conformed to match by being 1.475 right but that's a pain in the ass so instead of finding a magical number you can just use this newer thing which is called from font so you use the from font keyword and it will look at as I was starting to describe before it will look at the main font and it will say huh what's the ratio of this font and then it will apply that font to everything and then also why would you only want to be able to do this to x height some languages don't even have an x height right maybe you want to conform to a cat pipe or maybe you want to conform to some other measuring so now you can it's called two value syntax but basically means you can say either a number or from font and then you can add a second value and the second value can be which metric do you want it to be using by default it will use x height but if you don't if you say something else it will use the other thing that you've said which gives this feature true internationalization support which is what it should have so safari was the first browser to ship all three parts which is really cool firefox has since caught up and they implemented the newer parts so now firefox and safari have full support from all of this stuff which is pretty great and it means and this is a great example a great example of progressive enhancement where use it today and in a browser that doesn't have support whether it's an older browser or a browser that hasn't implemented yet sure your code font will be a little bit bigger but did you actually adjust it anyway you probably maybe most websites don't even adjust it or if you want to keep your little adjustment that you did old school by changing the font size or whatever you can do that just keep it wrap it up in a support statement where you say at support not font size adjust colon from font space metric and then if the browser doesn't understand that statement that it will run your little you know old school hacky code to try to adjust the font so and you can do that you can do that today even if one percent of your users have support only one percent which is more than that but if if for some reason only one percent of users had support you could ship that code today and then over the next decade as it becomes a hundred percent of your users having support or five years whatever it takes more and more and more people would have the kind of extra polished beautiful experience but literally everybody can read the code and read the regular font everybody you know everybody gets the thing that actually kind of used to on the web where all of a sudden in the middle of the paragraph the font changes and it's a different size and everybody's like well it's just the web that's how it works it's like well yeah so font size adjust it's cool it's it's a little hard to explain but um once you start to understand what it's doing it's like ah finally amazing I've needed this forever yeah and I explain these things I explain font size adjust and margin trim and a whole bunch of stuff about color and some other things that were actually really hard to figure out how to explain in my session from WWDC last summer called What's New in CSS which I highly suggest people check out because it's really like there's a lot of miss there's a lot of people who don't quite understand what happened with p3 color so I like really try to simplify it into the information that you need to know and really break it down awesome yeah so it's linked down below along with a whole bunch of other stuff so make sure if you're curious about anything to go and check out the links in the description and speaking I guess you know of new features there too when say you mentioned actually a lot earlier the new switch attribute for checkboxes that I think is just in the new technical preview now for Safari yeah and technology preview Safari technology preview yeah and just actually going way back to the very beginning we were talking about keeping up with the new stuff coming out one thing I do is usually just look at the change logs of you know the tech the the preview there as well as like the Firefox Nightly and Chrome Canary because that's always like cutting edge like experimental sometimes stuff but it gives you an idea of where the future is going sometimes yeah with this switch attribute is that something that's actually in the spec right now or is that oh yeah so it's interesting because different working groups work differently so the CSS working group for example masonry that was an idea that the working group discussed or maybe I should use that one example but in anything the working group will somebody will come along with a new idea and they'll say hey I have this new idea I think we should work on this thing and the working group will discuss it and sort of say every decision is a resolution at the CSS working group and it's very formal like you know whenever resolution has been called and everyone can anybody can speak up and say no I'm jacked that's a no for me and so if nobody's saying no then it's a yes and so there's a resolution to say yeah we you know we like this idea we like this space we think this is a good thing maybe we'll pursue and an editor's draft will get started so there is an editor's draft you can go read an editor's draft at any moment the editor's draft is never the official like that's not the official web standard but it's a good place to see the very latest version of the web standard and where the web standard is probably going and then the working CSS working group will get to a place where this those back is that is mature enough where the working group resolves to create what's called a first public working draft where now there's an official web standard it's called the first public working draft and then as it gets revised it's the working draft and then there's a journey on it goes on where it becomes a candidate recommendation and eventually a recommendation to graduate through those higher levels it has to get implemented in browsers so by the time something gets to rec to recommendation stage it's basically done it's done the spec is done it's in all the browsers the browsers are done and it's sort of just frozen in time of like here's the official recommendation the html working group or it's not html working group the what way working group that is the keeper of the html specification is just has a different operating procedure so CSS used to have one document there was just CSS2 everything was in CSS2 but it was getting to be such a huge massive document and it was so hard to keep track of what was changing or to make decisions but to change things or or to move things from working draft to candidate to like you couldn't you had to wait till the whole thing was ready and then move it to the next level so the CSS working group decided to break it into a whole bunch of separate specifications so that's why you have all of these different you've got backgrounds of borders over here and you've got you know fonts level one over here and you've got CSS grid over there and like everything's a different spec where html everything is still in one giant document and so when new things are created they're not just put straight into the html specification they actually go into a pull request and the pull request is discussed in detail by the group all the details are worked out and then it actually has to get implemented by two browsers before it can go into the specification which is it's just different right so no switch is not in the spec yet but it has to get implemented first before like the html web standard is more of a record of what is already shipped than it is record of the consensus of things that haven't shipped yet but it is on the standards track and that's very important like it's not like we went rogue and just made something up and we're like whatever yolo we're just going to ship it um which you know we could do sometimes browsers do do that or other you know some there's always a conversation sometimes there's a very clear objection where one or more browsers or other folks involved say no we have very strong concerns about this we believe this has privacy implications that we're not okay with we don't we think this is too much of a security risk to ship this API on the web no and then another browser will go ahead and ship it anyway and it's like well they totally have the right to do that they they can ship whatever they want but it's not a web standard and it and there may be a document and there might be a spec and people might want it web developers might be asking for it but it's still not a web standard because there was no consensus and there was an objection and you know some of us really care deeply about privacy and security and sometimes it means you can't have nice things that there are very good use cases that makes us all wish we could ship it but if it's got privacy implications then it might not be worth it so switch is on the standards track it you know I I I think there's no reason to expect that it won't be part of the standard either has been a lot of discussion about it both at the HTML in the what way again also at CSS working group because there's two pseudo elements that go with it so basically what is which you might be familiar especially if you go to the settings in your operating system where a lot of times there's a toggle where instead of it looking like a checkbox where you turn something on and off it's a little slider with a little knob and you can drag it back and forth and maybe when you drag it one direction it turns gray and you drag it the other direction and it kind of lights up and turns green very common interface at this point there's nothing built into HTML or built into the web to do that the closest thing to that is to use a checkbox so a lot of people who are building web apps or other kinds of interfaces and they want to have switch controls they'll build a checkbox they'll use a checkbox they'll input type equals checkbox and then they'll apply a bunch of custom CSS or sometimes even custom JavaScript to make it visually look different but sometimes there's privacy I mean I'm sorry accessibility considerations where you think you did it well but actually it's not accessible because the hacks the giant piles of hacks you had to use this is a way to say let's just get the browser to do the work let's get the browser to instead of drawing a checkbox let's have the browser draw a switch control and rather than making a different element because again progressive enhancement is really important and figuring out a path forward and what's the fallback and so basically you use input type equals checkbox and then you add an attribute called switch and as soon as you write the word switch in there in the browsers that have support which right now is Safari Safari technology preview it will just magically appear as a switch instead of appearing as a checkbox and then there are two pseudo elements I forget the names of them sorry I should have looked it up but you can style that switch I mean and I've seen some examples where it's so completely different one of our engineers made some examples and it's like when it's off it's like the background is a night sky with a moon and when it's on it's like turned into the daytime with a sun or maybe you want the circle that is the slider to be far larger or maybe you want to change the colors that it changes to or whatever hopefully it'll be a lot there so people can customize it if you want to make it look like your own brand yeah so it's just an example there's lots of examples these days of realizing gosh we could add more to HTML to create the kind of functionality that people want instead of people making websites having to build it from scratch over and over and over and over again I think a lot of people are looking forward to that those new additions and stuff that are being thought about on that side because yeah I remember doing a switch for a video one time and I was just like you know as you said that this won't be too bad and then I was like oh my goodness and then you're looking at the accessibility you're going through everything else and you're just like this should how is this not something that's just there that I could just come in and make a change to yeah yeah one thing I was wondering with the switch just because it was cool and it's like oh it's pushed in the the technology technological preview and I was just like and not hearing about it coming from other places and you explained it a bit there with how it sort of goes through the process but I'm just wondering like say somebody at Safari comes up with the idea or there's someone at Chrome comes up with another idea and they want to push something or push an idea forward without you know doing it trying to get everyone on board and everything just is there ideas that just come straight from the browsers and I guess like how much influence or or of these new things like the switch just come from one of the browsers being like hey why don't we do this really the process when it works at its best it's often browser teams that have ideas that know sometimes because there's projects inside the company or sometimes because for example WebKit supports all sorts of um not just browsers but other apps there's mail books there's all sorts of apps that Apple has that run WebKit there's all sorts of other if you go to the Apple store I think there's a million apps using WebKit on the Apple's App Store it's used all over the place so there's often times and I'm sure that the same is true for other browsers like Chromebooks for example run Chromium often times there's reasons to want to add technology to a browser engine and also by doing research and learning and listening and saying you know OpenUI I know has done that a lot where they've talked to frameworks and said you know looked at frameworks and been like oh these things are being it got invented and put into frameworks same thing happened with nesting like why did nesting happen well because everybody was using SAS because they wanted to be able to nest their CSS so sometimes it's people who don't work for a browser company who are involved in a working group who work on the specs specification but often it is it's browser engineers so the way it really should work is that that browser engineer might start implementing and messing around seeing whether or not it's even possible in the first place because things have gotten so complicated today there often is a question of like can we actually do this has language for 25 years because engineers did not believe it was actually technically possible until somebody at WebKit on my team like finally sat down one day because a golly kept talking about it they're like I'm going to look at this one more time and they've cracked it they figured out how to make ads work and make it fast enough or when nesting that was the big debate last year was we didn't really think we were going to be able to have it look ahead and without look ahead you had you couldn't have an element selector you'd have to stick something like an ampersand in front of an element but finally somebody figured out I think it was somebody at Google maybe or I forget which team but like somebody figured out how to make that happen no I think it was Mozilla I don't know somebody figured it out how to make it happen so there is that kind of necessary incubation debate conversation I mean we've been working on model for a while the model element so that on the spatial web you've got the video element you've got the image element you then will have the model element work very similarly where you can point to a 3D model and have it appear it will work it will work on every browser on every device you can do similar things with AR quick look on iPads today but that on Vision Pro it would actually be part of that 3D environment so we've been working on it internally writing up documents internally having conversations about it and then proposing it to the working group so that's really how it should work is that a browser team doesn't want to get ahead of the web standards process that at some point you go to the appropriate working group and you propose it and you say here's something that we've got maybe it's an early idea maybe it's a well fleshed out specification really better if we collaborate and we work together and we use each other's teams to be like hey this is the best idea that we could come up with but can you look at this and can you help us make it better because you also have a lot of smart people over there and you know this team tends to think about things from this point of view and this other team tends to think about things from this other point of view and it's not just the browser makers it is a whole bunch of other players like for example I mentioned before Adobe or there's some book publishers that are involved in the CSS working group there's you know a bunch of people who are thinking about print right there are people who represent all kinds of companies and they're all they all care about the web so it's like kind of representing all of the different needs and all the different ideas and it is a place as well where you know a lot of my colleagues across the industry other developer relations people talking about things on podcasts or writing blog posts or if you're interested in you sort of look at things that are being debated before they're done and then you could chime in as a designer or developer because many of us who are working on the standards and the browsers used to be designers and developers but we haven't been making websites for a while so like tell us what it's like now making a website and what it is that you need and why it is you reach for this framework and what the web could do for you to make it easier and jump in and say but also with care and empathy and kindness and realizing that there's some real complexity in the engine that you probably don't realize are in things like how fonts are made or whatever Speaking of sort of how we get to that stage is there anything new or exciting sort of behind the scenes right now going on at Safari that you could share with us? Yeah well we are working on model we're working on switch control we're working on a lot of what I mentioned like masonry layout right so masonry layout is a standard that Mozilla put together in 2019-2020 and they implemented the first idea of it behind a flag in Firefox nightly and then over at Safari we think it's a good solid needs that we picked up the work and implemented it in Safari Technology Preview and the spec of Sense Evolved some things that were in it that don't seem necessary got removed and some other details got worked out and so now it's in Safari Technology Preview but there's still some debates going on there's some questions some people have questions about like do we really need to do it at all or should it be part of grid it should actually be part of its own display type like display masonry instead of display grid grid template columns masonry or grid template rows masonry so yeah like there are conversations that happened last year in the year before where there were a bunch of conversations publicly about nesting like hey there are these three options which ones do you like better can you answer this one question survey those can really help getting input from people who make websites can really help when the working groups are in a little bit of a like haven't yet made the decision and the debate just keeps going around in circles or something because we really are there to serve people who make websites and people who make websites are really there to serve the people who use the web and the people who use the web are really the ones that matter so it's a way to figure out what is best is to involve the people who make websites and it really does make a difference well we'll finish things up with a bit of a different type of question just because you've been involved in the web so long and you've seen it evolve a lot and been a big part of that evolution in helping sort of spearhead some of the big changes we've seen but i'm really curious if especially with the pace of change i guess being faster now as we've sort of alluded to a little bit if you'd be willing to venture a guess at where css and not even just css but the web in general might be looking in say three to five years from now yeah i mean in some ways five years is nothing right it's going to be the same web we have now but in some ways the area that really captures my imagination and makes me think wow i have no idea this is this could break open into something really amazing is the spatial web like right now safari is real safari it's running webkit and it's got all of the things it's got all the css html javascript everything that safari has is in safari on vision pro but they there's there's possibilities for more i know web xr is something that people are very excited about it's it is in progress i think it's still behind a flag there are some things about the web xr specification that needed to evolve because you know it wasn't designed with hands in mind and that kind of user interaction but it's you know it's happening and the model element is a sort of clear obvious to get 3d models onto the web is is real content but then there's so much more that could be done with css around you know what does it really mean to be able to style something and have it interact with that kind of an environment on a level that we just haven't seen before so there's nothing to talk about yet but I think there's some really mind-blowing possibilities that are quite different I think one of the real strengths of the web is that it's declarative so it seems more obvious how to get kind of programmatic things into 3d space to be able to like you know write very complicated code and you know things like web xr and and usd g models and such but like like what about declarative web being part of the special web and being able to declare that you want this or that to have this or that kind of styling in that space and then let the let the computer do the work like it's like that it's like we haven't even imagined it yet we haven't even the the world of web designers and developers are still still in some ways trying to wrap their head around responsive web design still trying to wrap your heads around grid it's like get that under your belt because there's a whole other dimension coming literally a whole dimension coming yeah yeah so I'm out of questions but is there anything I didn't ask you that you'd want to talk about or mention or bring up before we yeah a couple things so safari technology preview which we've talked about alluded to a lot right so that's the preview browser it shows you what's coming in safari it's a great browser for developers to use it has the latest developer tools in it and it comes out you know if you look at the pattern over the last year at least in the last year it's basically come out every two weeks and it may be not holidays but like the rest of the time so it's if you want to know what's coming webkit.org is the place to go every two weeks there's new release notes that tell you what it is that's landed and if you have a Mac you can run it on your Mac side by side with regular safari so you can use regular safari for your own browsing and use safari technology preview for development or testing or something and there's also flags right so there are feature flags they used to be in the menu but we moved them into settings you do have to turn on developer features in safari which sometimes strips people up if you're a developer like go into settings and find the place where it says in the advanced or whatever it says turn on developer features and check that checkbox and when you do you get a whole new menu called the develop menu the web inspector will start to work and there'll be new sections in settings and then you can find the feature flags in there because web inspector works with iphone like if you have a physical iphone in your space you have a physical ipad or now if you in the future soon very soon have a physical i a physical vision pro in your space you can use web inspector on your Mac to directly inspect something that's in a safari window on any of those devices and we overhauled how that works in the last last year shipped it all in safari 17.0 17.1 in yeah 17.0 in september and um so you can basically like take your iphone plug it in with a cable the first time just for security reasons or whatever and pair it and then from then on you never have to use a cable again you can just pick up your iphone you can open a web inspector window there's a place in the develop menu where your iphone will just get listed and you can just tell it which window you want to open and you can use the web inspector and use your iphone and like very easily debug directly on mobile devices and on vision pro which is something that I think not enough people know about and is a real something that where safari can really help you by just getting you directly onto those devices but also if you don't have devices maybe you have an iphone but you don't have every iphone maybe you need to test iphone semen you have an iphone 15 or something or you don't have every size of ipad or maybe you don't have a vision pro yet you can use simulators so if you download xcode it comes with some simulators but you can also download even more simulators you can download whichever ones you want and you can throw away the ones you don't want to use so you can not use up as much space on your drive and then for a web inspector you can open things in a simulator and inspect right in that simulator and responsive web design mode is is handy it's it's it's clearly much faster to use to just if you want to check out your mobile your mobile layout or whatever but what is interesting about responsive web design modes in any browser is that they don't actually emulate the operating system and so the fonts are not probably not the right size and the even if you get it to the right number of pixels and width the way things layout is different so using a simulator can really help you like see what it's actually going to look like on a phone or device that you don't have plus you have you know it has anything to do with media or anything to do with color or anything to do your bug with anything else in the stack you actually get to see it in the correct operating system with the right all of the right technology and vision pro you can the simulator has been out since july if you want to check it out and see what safari looks like inside the vision os simulator you can run that on your mac and get an experience of what that's like so that session about read think it's called rediscover the development menu has all kinds of information that just shows you exactly step by step how to do all of those things and then I would just recommend webkit.org in general like every time we put out a version of safari we write one of these long articles that walks you through every single feature there's also other articles about other technology just a great resource there's documentation about web inspector if you look at the menu bar of webkit.org there's all kinds of links in there including links to all the documentation for web inspector that shows you exactly how it works and there's good information out there to be had and there we have it a huge thank you to Jen for being so generous with her time and as a reminder there are links to everything that we've talked about and more in the description down below thank you so much for listening I really hope that you enjoyed that Jen thank you once again for your time and of course everybody until next time don't forget to make your corner of the internet just a little bit more awesome