Safari is the new Chrome - Jen Simmons of Apple

Welcome to Syntax. We've got a good one for you today.

We have been trying to get today's guest on for a long, long time, and you Folks have been requesting her for a long, long time, so we are very excited to have Jen Simmons on. She is a web technologies evangelist at Apple.

She is responsible for a large part of CSS Grid, a lot of the layout stuff in the browser, lots of of of CSS, and We can go on about what she works on, but today she's here to talk to us about, some really neat stuff In CSS Wes standards in general, as well as, like, Safari has been killing it lately, and we're here to ask her why that is and and, how they're able to move so fast and all that good stuff. So welcome, Jen. Thanks so much for coming on. Hello. I'm so glad to be here. Thank you for inviting me. Syntax is presented by Sanity.

If you're shipping software And users are using it, you wanna make sure that you have a handle on your bugs before your users hit them. Not only does Sanity give you Access to finding and fixing all of those bugs, but they also give you incredibly useful tools like session replay, test coverage, performance metrics, and tons more. So head on over to century.i0.

Use the coupon code tasty treat, all lowercase, all Node word, and you'll get 2 months for free. You want to give us a quick rundown

of who you are, what you do, and a little bit of your history? I know I gave a quick rundown, but I think it would be worth explaining to anyone who maybe hasn't heard of you,

what your past has been like. Sure. Yeah. So personally, I worked in theater and the arts for Yarn.

Then I Wes a front end developer, web designer, and developer for many years, and then I got into because I love teaching. I've always loved teaching and empowering people.

Got into developer advocacy, developer relations, working on browsers, working on web standards, especially CSS for me.

And, Wes, I worked at at Firefox for some number of years, and now I've been at Apple working on Safari for a number of years, which is a really great place to be. I'm really I love it even way more than I thought I would. So I'm it's quite an honor and a privilege to work with such a smart team, of people who really are. I mean, I Yeah. I know folks don't necessarily believe it, but The what I discovered when I got to Apple is that people really do understand the web. They care about the web very deeply and have been doing incredible work for years that a lot of people don't even necessarily attribute to Apple because they're not, You know, it's we don't usually wander around saying, hi.

This is who I am. This is where I'm from. Please, me, me, me. Yeah. Like, listen to me and how awesome I am. You know? There's a there's a certain level of humility there that, that means, I think, a lot of the innovation and a lot of the impact that the team behind Safari has had has gone a bit unnoticed, but that doesn't mean that impact wasn't there. It's No. Every day, I'm, like, Learning like, wait a minute. We did that? I didn't realize we were I didn't know that Safari was the 1st browser with a private Browsing mode. I didn't realize that Safari folks on our team were the folks who wrote the HTML five design principles. Like, I didn't realize It's it's cool. Yeah. And, you know, there's a lot of people from a lot of different companies who are all collaborating together to make the web the web what it is.

Let's talk about that. So that that's my big question. I've noticed Safari has been absolutely killing it lately.

I've been reading every couple of weeks, there's a new either technical preview of Safari or a new major version of Safari that comes out. And the blog posts are Sometimes I'm unable to scroll to the bottom of of what it is. And here on the podcast, we go through and talk about a lot of the new improvements to CSS.

And a lot of times it says this is only implemented in Safari. Safari is the 1st one to implement this. Safari has been first to a lot of this stuff. So And I've I've gotten some heat for that on Twitter because people Yes. They're like, oh, but this flex Bos bug from 3 years ago that is no longer an issue JS whatever. And it's like, Wes. That happened, but I feel like there's been crazy momentum lately. And We're here to ask you why why? What what's going on at Apple? That Safari JS doing so well. Is it you? A lot of people said it's you.

It it's a combination of things. It's a combination of lots of small, changes that are Adding up to a lot. Right? So so, I mean, that's how life usually is. Right? There's no one thing. Part of it is communication.

Yeah.

We have been in on the evangelism team working really hard to make sure that every time there's a release of Safari, that there's really great release notes for that release and that we not only list all of the features, but we also list all of the bug fixes, at least Things that are relevant to web developers. Right? There's other bugs that get fixed. But, like, for so if you are stumbling over that 1 bug that's been bothering you for the last 3 years that you could see that, oh, look. They fixed it. That fantastic.

In fact, I wrote up some I added up some totals for 2023.

There were 818 bug fixes that we put in release notes Over the year and 270 new features Wow.

In 2023. It's wild that it feels like You all don't get enough credit for that because one thing that I think developers overall like is release notes. I I see that all the time where People are complaining about, oh, an app update in the the app description release notes are just bug fixes and improvements, and people complain about, hey. There's no transparency here. Why isn't anybody but here, you all releasing these giant release notes, and nobody is, really giving the credit due for that.

Yeah. I mean and so there's several places that people can look. So one of them is the release notes are on developer.apple.com.

They come out when the 1st beta goes out.

So for instance, right now, we're in the middle of January. January 16th is today. Release the the beta.

Safari 17.3 is in beta.

So that is but if you wanna know what's coming in the next version of Safari, you can go look at the beta release notes. Those beta release notes will get updated JS the beta gets updated. Sometimes, you know, something is not quite ready. Like, we were gonna we put full screen API in Safari 17 0.2 for Bos.

But then while it was in beta, this is the whole purpose of a beta, folks were testing it, giving us feedback, and we were like, Looks like it needs a little more polish.

Mhmm. So it didn't ship in Safari 17.2 because it needed a little bit more time. So the beta release notes can be really helpful if you wanna see what's coming and you all wanna help us by testing and letting us know so we can make sure that we get things right before we ship them. And then when the release comes out for that version of Safari, it is also the release notes are updated on developer.apple. Scott.

But, also, we write a giant article on webkits.org that is not just a list because release notes are very terse ESLint, just a very Clear. Like, let's just list everything.

Where the articles that come out are at the bottom, we'll we'll list all the fixes, but in the At the top and in the middle, we go through all the features, and we say, hey. This feature is shipping, but what is that feature? What is that good for? Yeah. Here's 2 sentences about it. Here's a little demo. Here's an example. Here are some ideas about how you might use it so that we can quickly teach you Teach designers, developers a little bit about each thing.

Not enough to be able to use it, but enough to know what it is.

File it back in the back of your mind to be like, oh, that's right. That thing came out. I didn't need it. I didn't have time to learn about it, but now my team needs it. So now I'm gonna go track it down. I'll go look it up on a A tutorial or something to learn more about it. So we're hoping that those big articles can be really useful to introduce people to so many of these new features that are hitting browsers, these days. And to be able to get kind of a quick because you're right. It's long, but also it's a it goes through things very quickly. So, like, just a very

high level. You can scan it pretty quickly and see if there's anything that, like, applies to you. And I love that because it's It's it's somebody who makes a podcast about new stuff to web development. It's really nice

to be able to to quickly scan it and see a huge list of it. Well and that's super important to us is that the people who make podcasts, who make YouTube videos, who make tutorials, who are writing blog posts, who are speaking at conferences, who are working on the data can I use on an MDN browser compatibility data? Right? So, like, that all of the anybody Who's gonna be teaching other people about all this stuff has accurate information? Because that's part of so that's so what what changed? So one thing is that the release notes and these big articles are more comprehensive than they used to be. They used to sorta hit the highlights, and now the effort is to try to hit everything. Okay. You know, one of the ways in which people you know, you're sitting there. You're making a website. You're writing code. You're like, I wonder if this thing I wanna use is supported in all the browsers. So you go to caniuse.com, and you look.

And it says, no. It's not supported in this browser. And you're like, oh, that's too bad. I'm angry. It's not supported.

I guess that's True. And what we were finding is that sometimes that wasn't actually true.

People were really upset with Safari for not having support for something, And they would ping me on social media, which I love. Please do. Ping me on social media. Mhmm. And I would look it up. I'd be like, oh, we don't have support for that? And I'd ask around. I'd look it up myself. I'd I'd go find out, and they'd be like, Oh, actually, we do have support, but the data that's being used to display support isn't accurate. It's out of date.

So we put a lot of, like you know? And the teams behind it are great teams. Like, it's just there's a lot to keep track of, a lot to keep track of. So It's it's very easy for something to slip through the cracks, and so we've helped try to go through everything and just find I mean, I pnpm as much time on on those sites as I can to be. Like, let me just find anything. Is there are there any things that are wrong? Let me fix those. What about, Some of the conspiracies

around that.

And this is my own conspiracy as to why the safari has been so accelerated lately. Is Is there something at Apple that is going to be leaning more heavily on HTML, CSS, JavaScript? Is that is there something why, all these APIs have all of a sudden been been popping up? Yeah. You know, there's all kinds of theories that I've heard.

You Node, there's many flavors of theories, And I I really mean this honestly as a human being who's always prided myself on being very straightforward and very honest with people.

Like, I have seen no evidence of those theories being true. I really haven't.

What I've seen is a busy team dedicated to doing the right thing for the web.

And sometimes what I've seen is that someone will be upset that a specific API hasn't been supported, and then they're trying to understand Why? And then they start to come up with a theory.

But often, there is a reason why, and the reason is not at all whatever they've theory they've tried to come up with. It's The the team at WebKit Safari are working really hard to protect things that are important to Apple. So what are those things? Privacy, user experience, accessibility, security, Having APIs that are well designed, that developers are gonna be happy with over the long term that weren't rushed out the door, sort of Overeenered or it feels like it's gonna cover all the use cases, but it really doesn't. Or it's perfect for these situations, but it's Kinda Scott a good API for these other situations. Right? So sometimes we've been like, no. Let's really take the time in the standards organizations for web standards, Like, make a really great API. And sometimes, you know, patients sometimes a web standard could take 2 or 3 years, and Folks don't want it to take 2 or 3 years. They want it to get done in 6 months or something. So then they have these theories about why, and it's like it's not that complicated. But, so You can anyone listening could go to webkit.org, and one of the there's many things here, including those big long articles I was talking about. Also, release notes for Safari which can be super interesting. But if you look up in the menu under feature status, there's a page called standards positions.

And if you're interested, like, why is Such and such, not shipping.

You can look it up. So one of them list if I look at this list right now, it says file system access, And you could see that we have publicly stated that we oppose this Mhmm. API and it for security reasons. And there's a little number on the left. And if you on the number. You can go see the discussion on a GitHub issue.

So these things, these are stated publicly.

You Node, it's not very common. It's very you know, it's a little rare when we actually oppose a standard, but it's all here.

So sometimes people, They get I think they get upset about us opposing Node standard, and then they just sort of extrapolate that into a complicated theory that's not at all based in reality. Wes when You know, we take pride on what is it that the our customers are going to experience when they use Safari on Apple devices. Like, that matters a lot to us. So if a particular idea that would be really cool, that would make websites really amazing, is gonna just churn through people's batteries Mhmm. Then we're not gonna rush that out the door. We're gonna be like, Yeah. We aren't so sure about that. Let's you know? And maybe we'll figure it out. There's a lot of things like I mean, we shipped Push notifications. Right? Web push.

First on Mac and then later on Bos for web apps. Folks wanted that to happen sooner.

One thing that we really wanted to make sure we got right and we did, We implemented when we figured it out, when we knew we had it right, was what is the experience for people who are using their device And getting prompted over and over again to Yeah. Allow notifications. Right? I mean, Safari was the 1st browser to ever put notifications in a browser with something called Safari push notifications that were in Mac many, many years ago.

Before the web standards existed, we had Built this thing called Safari push notifications, and we learned from that. We learned that, oh, there are a lot of websites. You go to social media. You click a link. You land on the website. The first thing you see is a request for Yeah. Permission to send notifications. He likes that. It's true. Right. You

right. Everyone blocks them all. I just got a message from my dad last Wait. I have a virus on my Mac.

What do I do? I'm like, what is the virus? He says, well, this this pop up keeps popping up. I'm like, what is this? And, Sure enough, it it was a a notification from a website.

He was trying to stream a football game that was out of network or whatever. He goes on to some site. It asks him for a notification. Next thing you know, he's got notifications popping up from some janky website, right, that that that is, trying to do that. So I I Totally get that.

And it's weird how, like, I don't know, the the idea of wanting to get things right can be so misconstrued into Ulterior motives or or people are just looking for reasons

Yeah. To,

you know, be negative about something like this instead of thinking, oh, what It's the most likely reason why they haven't shipped this. Oh, it's it's not fully baked.

Autoplay video was the same JS as when HTML 5 video came out. Bos didn't allow you to either play in line or autoplay.

And then Mhmm.

Chrome did. And what happened? Frigging auto playing ads full blast video. And that was super annoying. And Chrome had a claw back and say you cannot autoplay unless it's associated with a click Or it's muted. You know? Like, sometimes those things do take time to to figure out. Yeah. And so the so then the other thing that really did help us Knock down the list of things that developers wanted and needed the most is,

I think it was around the summer of 2021 Wes, There were quite a few blog posts that people wrote really well thought out, carefully, you know, like, thoughtful blog posts about, hey.

These Features are missing in Safari, and it's frustrating.

And here are the workarounds that we have to do. Here's the use case that I have that's not that I can't implement correctly.

Here's why. Here's what it is I I want from The web technology, and this is where Safari's letting me down.

And that really makes a big difference. It makes a big difference. People filing bugs At bugs.webkits.org makes a big difference.

I know sometimes it can be quiet over there, and there might not seem like there's a lot of activity, but all of that information gets pulled into the system that we use to plan our engineering efforts, and there's a lot of noise over there in our system. So, like, it is happening. It's just maybe not always visible, which is another thing that we're talking about. Like, what can we do to make it more visible? But that level of communication when web developers let us know, especially with youth cases and especially with thoughtfulness and especially with, creativity. You know? Like, creatively, think about what it is that you're needing and wanting and why. And, and sometimes Wes really wanna push forward. I mean, like with push notifications, we have all kinds of ideas about how it could actually be better that we're working on right now.

So there's often ways in which we might hesitate to implement what's exists Node. But if we can catch the right idea about where The web really needs it to go. Then that could help move things forward as well. Wes true. Yeah. So is is bugs.webkit.org

the best place To notify

Apple about about things? Or complaining on Twitter.

Well, Mastodon, I recommend. Okay. At least if you wanna talk to me, I'm on far more than I am on on pnpm these days.

I mean, you know, I'm on x sometimes, but not always.

Yeah. Bugs.webkit.org is the best place to report Browser bugs and problems. I mean, there's more than 1 place, though. Like so if you and this is true for any browser. If you're on a website and that website seems broken In the browser that you're in, you can go to Webcompat.

There's a Webcompat website.

I should have the URL memorize. Yeah. Webcompat.com.

If you are using an Apple device and you feel like there's something going wrong with the operating system some or something else that's deeper than the just the browser, and you wanna create a file an issue that has board information attached So that, you know, like, if Safari crashed, well, it's like, why did it crash? There's information that the operating system that can about that crash. Like, I don't know. Was it a graphic thing, or was it a memory thing, or was it, you know, something else? If you go to feedback assistant.apple.com and you go through that system, there's a way to attach what's called assist diagnose file, which will It if you give it permission this is only if you give it permission. But if you say, please do attach these files, then it will attach sort of diagnose files to help.

And sometimes it can be depending on the bug, sometimes that can actually be super helpful because just saying, oh, it crashed. It's like, well, we don't we don't know. We have no idea why. But if you include that kind of a die a file for diagnosis, then it helps, engineers get deeper into, like, what actually happened.

But, you know, for sometimes Wes it's like, oh, this CSS isn't working the way that I expected it to, those things you can easily file at books.webkit.org.

Scott don't worry about filing a dupe. Like, it's fine. I know that many times open source communities can be very spicy about duplicates and get very grumpy. We don't it's fine. Mhmm. We can deal with that? Yeah. You file the 14th yeah. It it's gonna be the 150 second dupe, and it's like, that's fine. It's we'll Yeah. In fact, in some ways, that's a good signal for us if that, oh, there's a lot of the same bug getting reported. Alright. Let's talk about the CSS color profile. So we had a bit of a call before this Node,

and you explained the color spaces color profiles Very clearly, and I thought that was fantastic. As well as, like, there's many different ways to specify colors, some of which Don't make sense at all. Could you explain that a little bit? Yeah. So

color wide gamma color is super exciting, it felt like 2023 was really a breakthrough year for wide gamma color in Yarn, perhaps, because of Interrupt 2023. That because it was in Interrupt 2023.

But it is complicated. Color is so complicated. If you really start to try to wrap your head around the whole thing, it's It's, like, it's too much for me to understand. It's too hard.

So and, I made a session for WWDC last year, which I do definitely recommend, Especially if people are interested in in what I'm about to say, I I go into more detail in the session. And, also, there's visuals because it's a video, so you can see a lot of what I'm talking about.

But in in making that session, I started to really understand color on another level that I hadn't before, in part because I could ask my Super smart colleagues at Apple, and they can help me out.

So I like Wes teaching things to make them as simple as they can be And empower you with all you need to know, but also leave out all the parts you don't need to know. So, to me, this is how we should think about it.

Color gamut, what changed? So for many years, monitors couldn't represent color at all or they could only represent few colors. So we had the WebSafe color palette. And then monitors color monitors became more awesome, and there were many, many more of them. And everybody had color monitors. And you could display sRGB, which is a certain color gamut, which colors in the world can actually be seen on a sRGB monitor.

Also HD television had the same sRGB color gamut. There were many, many things in our world. Cameras all used to sRGB.

And then people are like smart people who make monitors and cameras were like, wow. Let's I wonder if we can push the envelope further and we can represent more of what the Human eye can actually see because there are more colors in the world that SRGB can't display. So we ended up with p three.

So p three color is a wider color gamut. P three is very is all over the place. It's been on, like, it's shipped And we sup we ship support for p color p three color in Safari 10.0 with images and then with CSS in Safari 10.1, which there's been some confusion about. People keep saying we supported it in Safari 15, but it's like, no. Actually, we started supporting it in Safari 10, 10.1 Many, many years ago, that was around the same time that iPhone, iPad, Mac started supporting. So all of the new screens for many years now have had p three color. And now even more screens around, you know, in the world that we live in, all the screens we look at in during our day, more and more and more of them support p three color. So In some ways, the web is behind where web designers are still staying within the sRGB color gamut, And they're only picking colors from inside that gamma, and they're missing an opportunity to pick some really gorgeous, really vibrant colors.

So then the question becomes, well, if you're gonna define a color in CSS, how do you define it? There are many, many ways to define colors.

If you use some of the older ways, named colors, hexadecimal, the RGB function, HLS function or the HWB function, you are only ever going to be able to define a color that exists inside SRGB.

It's literally not possible to define any colors outside of SRGB with those ways of defining a color. So To me, it's like, well, they're gone. They're gone. They're dead to me. Goodbye. I'm never gonna use no. That's not true. I use hexadecimal colors still all the time. But, like, Often, I try to push myself away from this. And instead, what we can use are the newer functions to define colors. So one of them is the color function.

That's the very first one that shipped in browsers because the CSS spec was ready for it.

The color function, you then say if you want it the basically, the color function, you define red, green, and blue Between 0 and a 100%.

But if you wanna say well, when I say a 100%, I mean, a 100% in p three color, then you need to say color p 3. Yeah. So you put the little which color gamut are you gonna define warp your numbers in in the little function? You can also use the newer functions, lch, lab, oklab, and oklch.

Those are the things that came out just last year or the actually, the year before.

Well, both. End of 2022 and into 2023 because I I mean, Safari had had them implemented for years sitting there in Safari technology preview waiting, but, the CSS specifications, the the web standards weren't done yet. So the The working group needed a little bit more time to come to an agreement.

So once they did come to an agreement, it became possible to ship those. And those are the things all of that, p three color plus the color function plus these new 4 new functions all shipped pnpm.

Gekko for Firefox and then Chromium for Chrome and Edge and, set up some Internet browser and many other browsers.

So support is starting to get really, really good as people update their browsers because all 3 engines have support for these now. Okay. So it's,

p three and sRGB are color gamuts.

And how you access those gamuts Via the different functions that we have are color spaces. Is that right? Yeah. Well, the word color space is really complicated,

and I Ended up personally it's a teacher coming to a place where I was like, I'm thinking I'm gonna try to avoid using the word space because nobody really understands what the heck we're talking. Yeah. So I talk about color gamuts, Gamut being, like, how many colors can you actually represent? And model Node being, what is the math? Okay. So if there's gonna be 3 numbers, and you're like, 12, 255, 32, like, what does that math map to.

And there are these models.

So, like, l c h, the l means lightness. You're basically defining From 01 either from 0 to a 100% or from, like, 0 to 255 as a number. Like, how dark or light do you want it to be? C is chroma, h is hue. So you're, like, defining a hue, a chroma, and Brightness or, yeah.

Wes lab JS, like, l is lightness, and then there's an a axis, Which, like, at one end is green and the other end is red slash magenta, and then a b axis, which JS, like, at one end is sort of blue slash saw cyan and at the other end is yellow.

Okay. And so you're basically saying, am I more blue or yellow? Am I more green or red? Oh, wow. And so Lab and Okay Lab are very similar that, like, Okay Lab is okay l a Bos. So l a b and l a and l a b, but It's just a different math. Now there are people in the world who understand the math and who know the difference mathematically, what the mod the differences are in the models between LCH, okay, LCH Vercel and lab versus l l I'm not one of those people, and I don't think that most web designers or developers need to be those people either. Yeah. I think the thing to know is there's 4 different color models, and it changes the mathematics.

And so it was it somebody I could see somebody because I what I heard a lot happening, last year is that people would have these debates where they'd be like, Which one is better? I like OKLCH.

That's the best one. So I'm ever only ever gonna use that one as if They were choosing a different set of colors when they were using l okay LCH or lab or whatever. And it's like, no. You're not Changing choosing a different set of colors. The set of colors are p 3 if you're using the you know, if you're defining p 3 Or or if you have a p three Sanity, like right? Like, it's gonna be p 3, but the mathematical model So maybe, you know, I think there are people who understand hexadecimal numbers to be like, three numbers for r, g, and b Mhmm. In hexadecimal, and they think about, like, I don't know, x or, Like f comes after 9 or whatever.

Mhmm. But there are many of us who don't actually break it down that way, and you just Write the hexadecimal numbers. You don't really ever think about it. So I'm sure there are people who are gonna get really into, like, memorizing that the c in chroma means this. And if I push it the number up this direction, it's gonna be this way. And if we pull the number that way, it's gonna be this.

And so maybe in that way, you'll you'll end up with your favorite model because that's the way you'd like to think about the math. But the end result for the functions are actually gonna be identical if you pick the same color. Like, if you're defining a very specific shade of blue, You can define that very specific shaded blue in all 4 models.

The numbers are just gonna be different because it's the models are different.

The time when it actually comes into I think that the the time when it actually matters more, like, which model are you gonna use, is if you're interpolating a gradient or you're defining a relative color or you're mixing colors.

Because in that way, you're not just saying, I pick this shade of pink.

Instead, what you're doing is you're saying, on this end, I have orange, And over here, I got yellow or green, and then I want you to make a gradient in the middle. Mhmm. And so the computer you, browser computer, you are gonna do all the math in tween.

I just picked the endpoints.

If you choose 1 model, it's gonna use that model to choose the in betweens. And if you switch the model, it's gonna Switch the model to do the in betweens.

Yeah.

And often those gradients look much nicer. And Sometimes they have, like, a little bit more green than you're expecting, but often they're they're really nice. There's less banding. Well, makes sense that there's less banding because there's literally more colors. Right? Well, I don't know. I'm curious about the less banding.

I don't know that I've seen that because you're not gonna have more colors. Like, it's still all p three color. You still have How many of her colors? Well, sorry. I mean,

I mean, using versus an RGB gradient, if if you're doing, like, a really wild gradient In RGB, you are and you're going from 1 color to another, and it's it's quite a a difference between those 2 colors. You Scott to see banding if it's, like, the whole website.

Whereas if you move that to the one of these functions in p 3, you there's there's more colors. Right? So there should be less banding.

Yeah.

Yeah. Yeah. There are more colors than p 3. And, also, it makes like, I have an example that I put in this video of a linear gradient, And it's basically going from white, just pure white, to blue, like the, If you use the named color blue in CSS, the blue blue from the Wes, and it's like And then I have an example of 8 different, and this is where I do use the word color space because it's sort of the color models, but, actually, there's more of them.

And there are the old ones too. And you can so I've got sRGB, sRGB linear, okay lab, l c h, okay l c h, lab, HSL and HWB, and the differences are really drastic. So, like, OKLab and LCH basically look like they go from that goes, like, through all the shades of light blue into medium blue into dark blue, where HWB goes straight to pink, Goes through hot pink, through purple, and then ends up at blue.

Okay. LCH goes straight to yellow, like lime yellow, Goes through, like, lemon, lime, yellows into bright green, into, like, ice icy green blue into blue.

And none of those are right or wrong.

It's just that the mathematical model is so drastically different for each of them that They literally like, if you created a three-dimensional you can actually model these color models in three-dimensional space, and then you can See the straight line between the white and the blue, and you can see why they go some of them go through this set of colors and other ones go through a totally different set of colors.

Wild.

Yeah. If you wanna get into the math, you can. But if you don't want to, just know that, like, pick something new pick one of the new things for defining colors.

And then when you go to do a color mix, same thing is true for color mix. Or you go to do a gradient or you go to do, relative color syntax, which is also cool. We can talk about that. But, it's you've got a lot of options, and they're all gonna result in something different. And maybe the best thing to do is to get yourself into a browser and go into the developer tools Just mess around until you get something that you really like.

Yeah. Well, let's talk about other color APIs. So we have, like, Some really awesome color APIs that have hit the browser lately with relative color.

But I I was wondering about contrast color. Is is that Something that is is ever going to hit. I I don't know if you can speak on that or not, but,

that's one that I'm anticipating greatly. Right. Color, contrast, contrast, color. Like, it'd be a really great function to be able to say, hey.

I told you the background color. Now could you just make the text be Black or white. You choose whichever one is gonna have more contrast against this background color that I've chosen.

And then I don't have to think about it. I'll let the browser choose.

It's implemented in Safari. It's been there forever, much like these other things I mentioned, But we can't ship it yet because there's still discussion happening in the standards organizations.

And the hang up is that the, algorithm for making a decision on when to pick which colors based on contrast is not doing its job very well.

Like, It's choosing the wrong color, and you end up with, like, black over a dark color or white over a light color. I I was just saying, like so you're not able to Mathematically

calculate if something should be flipped or other. Is it something Wes, like, the standard has to be set as to, like, the different ranges. Because even, like, the YouTube red with white text on top, that is apparently

inaccessible. Yeah. So there was this 1st attempt to create an algorithm that would make a decision of which color is appropriate. It's just not doing a good job. So it's like, well, So we could ship that, and then we had a long debate. Like, should we just ship it anyway? And the decision was no.

So maybe that's why you heard about it, and you all you felt like you almost got it, but then you didn't get it because that's kinda what happened.

The decision was made like, no. We need to have we we need to wait until there's a good algorithm. So there are new algorithms being worked on. I think it might be true that there's more than 1 being worked on. Maybe you'll end up with a mechanism where you get to choose which Node one you wanna use. I I'm not really sure the all the details, but there's definitely work happening in accessibility working groups So, like, come up with the right mathematical Node. But that's why it hasn't shipped yet JS because it doesn't have the right guts underneath in order for it to do the right job.

Yeah. Yeah. So, yeah, I do I do expect it to come, but it will come when it's ready instead of before.

Let's Talk about CSS Grid and Masonry.

So probably 7 6, 7 years ago, whenever CSS Grid came out, you and Rachel and Andrew were Heavily involved in that. And Rachel Andrew just put this GitHub repo up and she's like, ask me anything about grid because, like, every single question was going to her. And Node of the first questions I had is I had was like, can you do the Pinterest layout with CSS Grid Wes they sort of block into each other? And The answer at the time was not really unless you have a specific height, on a grid. And even then, it's kind of a bit of a hack. So there's been this Proposal for CSS Grid Masonry for a long time, and I feel like we're almost there. But, you said there's there's maybe a little bit more to that? Yeah. So there are so it's so we implemented,

Masonry in Safari Technology Preview. It's quite mature. I'd love for people to try it out. It's not even behind a flag. You can just Open up Safari Technology Preview and try it.

I also, I'm working on a blog post for webkit.org to go into more detail and have some examples and get, into some of the questions that are happening and, really, because we need feedback from web designers and developers on what you want, because there's a little bit of a, we're a little stuck in the CSS working group. Not well, stuck probably is the right word, but there's still ongoing debate in the working group about The fundamental approach. So right now, masonry is part of grid Wes you say display grid And then grid template columns, and you can define what you want for columns. So you can use f r units. You can use min max. You can use max unit max content, min content. You can, Like, you have all of the power of grid in your column direction. Now, of course, I'm I'm just gonna assume we're talking about a horizontal writing mode right now. You could Flip it, in which case, all the times, I say horizontal or or or columns should be rows. Yeah. Rows would be columns and all that. Right? But let's just for the sake of being on a podcast and having to say everything with our words, let's just assume Wes horizontal writing mode. So columns, you can make as many columns as you want, and you can make them in grid b. Like, they don't have to all be the same size as each other. Right? And they don't even all have to be defined by an external definition of, like, I want you to be 1 quarter of the width. Instead, it can be like, I want you to be the size that your image is inside of you or something. The columns can be sized based on the content.

I think people don't know that enough about grid, but where the masonry layout like, that sort of classic layout that you were describing, There's always the same the columns are always the same width as each other.

Like, there's 4 columns. There's 7 there's 6 columns. There's 12 columns, And they're all like, if the first one is 500 pic or sorry, 200 pixels, and the next one's 200 pixels, and the next one's 200 pixels, and the next one's 200 pixels, and the next one's Wes So they're all exactly the same as each other. Right? Where with grid, in the comm direction, you have all of that you have so much more power and so much more flexibility.

And then what you would do is say grid template rows, but instead of defining rows, which is what you normally do with grid, where you'd say, I want my rows to all be 400 or I want my rows to be auto, in which case it's, like, be however big you need to be able to fit the column the content that you have. Instead of that, you just say grid template rows masonry.

And what that would do is it would stop the rows from being rows, like, even with each other. It's it's it would stop trying to line up content.

Because right now with Grid, if you have, let's say, a whole bunch of images, And they're all different sizes and different aspect ratios of each other. And maybe you use a width of a per a 100% to make them all be the same width, but their heights are all different. Right Node, in grid, like, grid forces you 3rd row down, all the things in the 3rd row are gonna be this. Like, the tops of them are all gonna line up unless you change alignment. But then, okay, the bottoms of all of them all line up. But then there's extra space around them. Right? There's no packing. It's just There's a row, and then we start a new row with the 4th row, and then we start a new row with the 5th row. Where masonry lets you be like, actually, I want the browser to pack things.

Just place things so each next item is as close to the top of the page as possible, which lets you lazy load more content into the bottom, and makes you not enforce a row grid, which makes me think of the history of graphic design and the grid systems in the 1st place, Never mind the web just like in history in books and manuscripts.

For most of the time, actually, grids meant columns ESLint up. It was really the modernists that came along and said, oh, actually, rows should also line up. You have to line things up in both directions. So it's interesting that that as the Wes added grid and finally added a layout system, the first impulse was to add a layout system that lines everything up in 2 dimensions, Pnpm modernist. It's very Vercel, very exciting. It means you can have white space. Like, please, awesome. Use white space.

But there are use cases where, like, maybe you don't want that. And in fact, as you said, Wes, that was one of the most frequently asked questions when we wrote grid. It was like, well, I don't wanna line things up on both dimensions.

But but there are people in the working group who believe that it shouldn't be grid template rows I mean, sorry. It shouldn't be display grid grid template rows masonry.

It should instead be display masonry, and you should have a separate display type. That grid is grid, and grid means Line up in 2 dimensions.

Flexbox is another one. That's a different thing. We got multicolumn.

Then you should have display masonry, in which case You wouldn't have any power in the column direction. You would only have the very simple way to set up columns.

Oh, unless we decide to make it more complicated, But then, basically, we're replicating grid outside of grid.

Yeah.

So that's sort of the debate. It's like You do. And then there are some people who came along and said, well, do we even need this at all? Like, is anybody even gonna use this? Maybe we shouldn't do this at all. So that's what we need JS peep people that Oh, the everyone's making bentos Right now, that's the big popular layout JS the Apple. I think Apple came up with the Bento. Right? All the different features of the MacBook Pro warp We're on there, and everyone's like, that's the new design trend, so maybe make it display Bento.

Well, as we've been working on this, we've been looking at other sorts of things besides that kind of classic, Pinterest type layout.

The p footer, like, mega footer Wes you've just got bunch of different sets of links that you could lay that out using Masonry because there's not really a good way to lay that out today without having to Wrap each column in its own div and sort of permanently assign certain things to certain columns.

What if instead you just have a whole bunch of content and You could use Masonry to yeah. There's there's all kinds of there's no such other sorts of, oh, where all the images actually do have the same aspect ratio. They're all, say, 16 by 9, but you wanna stagger them. And maybe you wanna stagger them in the opposite direction Wes you do wanna stagger them across the columns, where your rows are cool, your rows are set, Everything JS lined up across throws, but you wanna, like Yeah. Make a brick Wes. Like, literally a brick wall. You want 3 and then 2 and then 3 and then 2, and you want them to be stacked like masonry. There's not an easy way you'd have to use negative margins and all sorts of other kinda hacky things to do that today.

I don't mind the idea of being display masonry. Yeah. It makes Sense to me that it's not necessarily a grid.

I hadn't really thought about it too much before, but, yeah, interesting. Do you think we ever have the ability to target items in a specific

grid row or column. Is that something that Node ever ever talked about? Yeah. We've talked about that a lot for, like, the next level of grid, Wes should be, like, grade 4.

We've just the people who keep having this conversation in the over snacks at the CSS working group or something, we We all end up working on something else, higher priority. But, yeah, I'd love to be able to say, hey. Everything in the first Columns should have this font.

And then if the content gets rearranged, it's still just whatever's in the 1st column that has that font.

I'd love to be able to to to put a background on an empty grid cell or border on grid cells or grid tracks. Yeah. I wrote a,

a resize observer for westboss.comnav.

So when items wrap to the 2nd line, I style them a bit smaller, and I I hit a render loop where it was too small, so it went on the 1st line, and then it got bigger. So it went on to the 2nd line. And I was like, This is what the browser people have to deal with, which is this is, like Yes. Infinite. Especially, like Can you imagine container queries? Sizing things based on their contents, And but then the contents can size themselves based on the container, and I do not envy.

People have to implement that or spec it out.

Yeah. Yeah. Well, ESLint some of these ideas about Grid, they seem really cool and really obvious in a way from a graphic design perspective. But from a brow from a CSS And, like, CSS programming language perspective, it's like, wait a minute. You'd have styles that style styles instead of content.

Instead of pointing these styles to content, you're pointing these styles to other styles. Oh, yeah. Like, you built this out of grid. It's an empty construct, and you're gonna style it? Like, So what does that mean? That's a that's a pretty big that's, like, more than grid. That's, like, a big change to the language. So,

Yeah. We'll get to it, I think. Wes when we had talked, you had mentioned a CSS switch control.

Can you talk a little bit about that that exists now?

Yeah. So switch switch controls are you know, if you use, iOS macOS and you go into settings, you'll See all these little on off things that instead of being checkboxes now, often, it's a switch. It's like a little

Yeah.

Slider With a little sometimes they're green when they're on and gray when they're off, little round circle that you slide back and forth. And, People have used the checkbox as the closest form element that you can use on the web that does that, but, it takes a lot of hackiness to, like, take a checkbox and visually make it look like a switch control.

So we've gotten a lot of requests. Hey. I really need to build the switch control, especially since, you know, WebKit's not just used by Safari, it's also used by app apps that Apple makes like mail and books. It's also used by, like, a 1000000 apps in the App Store. There are so many apps that use WebKit.

So we keep getting this request of, like, hey. I need to be able to create a switch control. I'm using web content here.

So yeah. Hey. You wanna look make it look native? Yeah. That's what happens. So

you you write input, And this works now in Safari Technology Preview. Pnpm, type equals checkbox to be a nice fallback for HTML because It needs to be elegant through the transition, and then you just add the attribute switch.

So if you just add the attribute switch, it immediately turns the checkbox into a switch control, which on our platforms is default style to look like the operating system. And then there are 2 pseudo elements that you can use to style the switch, to be able to very easily turn it into whatever you want, where you can change how that little circle handle looks. You could change how the track that slides on looks.

That's cool. I I tried it out myself. Yeah. It's it's not obviously fully implemented yet. That's why it's in in the beta, but I thought it was a really neat way because it's not going to change how forms work at all. It's not a new form input.

It simply just changes The actual UI of it and then expose some new CSS to style it and change the colors. So big fan of that.

Do we wanna talk a little bit about the the VisionPRO is coming out, very soon here. And we don't have to talk too much about the the VisionPRO, but Perhaps maybe a little bit about the web stuff.

Let's say you wanted to see, Like, your website on the VisionPRO, is there is there ways that developers can see their applications

in in XR? Immediately After our call, I downloaded the new Node, and Yeah. I opened up, Stack Overflow and Versus Node dot dev, and I was like, I can code in VR. It's wild. Yeah. So,

VisionPRO coming out very soon. Maybe even by the time people hear this, it will be out.

The Safari is Aon Vision Pro. It is really Safari, which is pretty exciting. It's like all of web get all of the web technology that you know and love from the web is there, a full, real browser.

And It is there's, you can easily if you end up owning a piece of hardware, if you go get yourself a an Applevision Pro, you can use a Mac and use Web Inspector and, inspect the content that you're using through Web Inspector.

You can also use a simulator, like you just said, Wes, where you can download Xcode.

And as in the process of downloading Xcode, it will ask You're like, what do you wanna build for? And you can say yes to Bos.

You can say yes to VisionOS.

You can say yes to watchOS if you want, A tvOS, or you can say no to watchOS and tvOS if you just wanna focus on web browsers.

And when it downloads, it will download the simulators for VisionOS, and it'll download quite a few simulators for iPad and iPhone as well.

It's really cool. One of the things that we did last year That hasn't gotten as much attention as I I think it should JS we really overhauled the way that Wes Inspector and Safari hook up to, actual physical devices if you have an iPhone, for instance, and also the way that they hook up to the simulators.

So responsive web design mode is cool, and you can use it for a really fast way to kinda check a layout. But if you really wanna check what's going on with that layout, you're actually much better off using An Bos simulator.

It's free. Download Xcode. Right? Like, just get it running on your machine. And if you wanna free up some hard drive space, you can actually remove Node after You're done. If you wanna just keep the simulator around the simulator app. Mhmm. Yeah. You just need the simulator app with VisionPRO, if you want it with iPhones, Ipads. But, like, if you wanna something on an iPhone SE, for example, and you don't have an iPhone SE, Wes you can grab the simulator and test it on the simulator.

Because the way typography is sized, the exact way the pixels are rendered, like, just the precise details of how something gets laid out JS actually very different on an iPhone than it is in responsive web design mode on a Mac when you, like, move the window to be a certain number of pixels wide.

And I feel like it's funny. I I didn't really realize this until after I joined Apple, but all of those years when so many of us were Fretting over Yeah. Oh, Wes. Oh, 360. Oh, 480. Oh, 4 oh, does it look good? I have to make sure, and yet none of us quite realized that Mhmm. We should have been using a simulator if we wanted to be that careful.

And so now if you go into responsive web design mode, there's a little drop down menu that lets you just jump straight into the simulator, or you can you have to turn on developer tools in Safari, by the way. You go into Safari settings, And you just say yes to developer tools. That way regular everyday people don't get freaked out when they accidentally open a Wes inspector.

But when you do that, a new menu appears called the develop menu, and there's a lot of good stuff in that develop menu. And in the develop menu, There's just a shortcut where you can jump straight over to any iPhone or iPad that you have paired to your so the very first time, if you wanna use your own iPhone, for example, You need to use a cable, hook it up to your Mac so that for security reasons, like, they're paired together, that we know it's you and that's your phone.

But then from then on, you don't ever have to get a cable out again, and it's really solid. Like, we worked hard to make sure that it works really well. Always there. Yeah. So you just Go to the develop menu. Just works. Yeah.

And you'll just see your iPhone, and you can just be like, oh, please open this web page in my iPhone.

And, boom, you got a web inspector, and you can use that web inspector with your iPhone. Man, that's so much better. Here's a little a little tip for people listening is,

it's hard to run old versions of safari. So one thing I wish you guys would do is also just give me a simulator for an old version of Safari as well, because We had a bug on the syntax site that was only popping up on an older version of Safari, and I couldn't figure out how to get old version of desktop Safari running. But To test it. It's it's mostly the same as, like, Wes Safari. Right? So what I did is I just downloaded an older simulator, via that, ran it, and then then I was able to reproduce the bug and fix it via that. So if you are ever in that problem, maybe just download a simulator. Yeah. Yeah. Actually so I should state that this episode is coming out on February 2nd,

so the day that the VisionPRO is coming out. So if you Sanity to, snag 1 or have 1. Yes. So it came out today. Congratulations to everybody. It was a good one.

Yep.

And there's several sessions at WWDC about VisionPRO last year where you can see what it really looks like, and there's a lot of details about, how it's working. We're still working on WebexR and model. They're both behind a flag right Node.

Working out details on some of the standards, getting updated, Getting finished, to have real full support

consensus in working groups about how exactly all those things are gonna One thing we asked Eric Meyer on when we came on, it was like, what parts of the world are running on Wes tech that you might not expect? And he had some really cool interesting, like, Playstation and some fridges are running on. And most people don't realize JS most TVs are running web tech for your streaming apps.

Is there any part of the Apple ecosystem that you might not expect that is actually just running HTML, CSS, JavaScript? Yeah. Well, I mentioned before that there are

you know, of all the apps in the App Store, all the different things that people think of when they think of an app for iPhone, for iPad, for Mac.

Of course, many of those, you you're inside, you know, maybe a social media app, and you click a link, And there's a a browser sort of appears from the bottom.

That's called Safari View Controller, which is like a little mini Safari that can live inside of any other app.

But there's also another thing called WKWebView Wes sometimes an app will actually build their own browser inside the app. That's often built on WKWebView.

Or, also, an app can create really anything If they feel like it and they wanna use HTML and CSS and JavaScript for some reason so somebody really could build quite a lot of their app out of web technology, and there really wouldn't be any way to tell. There wouldn't necessarily be navigation to, like, forward and back and type in a URL or any of those things we're used to. Because at that point, it really is up to that app developer to do whatever it is that they wanna do with that.

So there's this sort of blurry continuum of, well, that's clearly a browser inside an app to like, well, that looks an awful lot like a browser, but that seems to be branded uniquely to, like that reminds me of a browser, But it doesn't really look 1, 2. Like, this doesn't look at all like a browser, and I had no idea.

Yeah. And a lot of those embedded devices love to use WebKit because WebKit is Optimize for speed and for saving electricity.

It's been the fastest Browser engine for a very long time, and it's been, it really is all about, like I mean, often, We're working very hard to optimize things over here to be like, let's use less electricity. Let's use less electricity than that. Like, how can we make it go faster and also use Let's look into so, you know, some of those very low powered devices, they don't have very strong chips on them. They don't have you know, maybe they have a battery, maybe they don't. Maybe they are just a very low powered chip, they want to, they want something that goes really fast and is very streamlined. And WebKit seems to be one of the favorites to really do that because of the way it's been designed for so many years to work on iPhone and and Mac. Yeah. I've I've definitely found that Safari

is the is easily the browser that gets me the most juice when I'm especially when I'm needing it.

You know, it's always the the least resource intensive.

I I find myself, like, constantly being a safari truther now in TikTok comments or or things like that. No. You don't understand.

It's

it's not Safari of 8 years ago or whatever people compare pnpm to. In fact, there's a there's a tool in Wes inspector Spector that you can go and see how much electricity your website takes up. Nice. Cool. I mean, yeah, there's many ways to define performance. Right? Many important ways on how to define performance. Like, how how Soon JS it the person can use the website. Right? How how long do they have to wait for the download? But another one is, like, how much impact is your site having on battery life? Is there something that's running that you could change that's sort of burning through somebody's battery that you could look at and Make better so that it doesn't your Scott doesn't burn up somebody's battery.

Yeah. It's cool. It's like this meter that shows you how you're doing I never knew I'm gonna check that out. We're we're we're hitting our time here. So, unfortunately, we can't hit everything that we really wanted to get to, but that's how it goes. Right? I I think, it's It's been awesome to have you on, Jen. And I think if if you're down for it, we would love to extend this conversation again some other time.

You know, perhaps maybe safari's dropping some interesting stuff. We'd love we'd love you to come on anytime you'd you'd like. So, we can definitely pick this up later.

Now is the part of the show where we get into things that we call sick picks and shameless plugs, where you can, pick something that you've been really enjoying in life. Anything. Could be anything. I think we've we've picked gochujang sauce or all sorts of stuff on here. So whatever you like. Oh,

I Honestly, what I really like these days is the ability to stand up and walk around.

I mean, people people may be like, where JS Jen been? Why isn't she been on your show? It's because, COVID. Don't get COVID.

It's like, literally, I couldn't really stand up and walk around for 2 or 3 years. Holy cow. Man. I mean, I could I could stand, but I couldn't travel very far. For a long time, it was, like, 10 feet, and then it was like, okay. I can get out the front door of my building, and then it was like I could walk about a 100 feet and I'd have to Wes. I had to sit down and Wes, and then yeah. It's bad. Long COVID is You are not the 1st guest to sick pick walking. Yeah. So, anyway or not.

We had, what's his Node, from Mojo? Chris Lattner, he, who also, creator of Swift.

He also enjoys walking. So if you wanna work at Apple, go for walks.

I used to love hiking with my dog. Yeah. It's great. It's great. I I found the energy impact,

syntax.fm, 24% average CPU usage duration Scott.

In my own website, 20%. So my own website Much better and, not much better. Both of them are are pretty good, but this it's cool. You just click on timelines, click on CPU, Refresh the page, and it gives you data

as to energy usage. Love that. Yeah. Yeah. There's a page about it on webkit.org on how that tool works. There's also, like, a documentation on all of Web inspector on WebKit .org. Yeah. Oh, is that is that next on the Yes. Yeah. Shameless plug. Whatever my plug. Let's go. Like, plug away, please. Plug anything you want.

Yeah. I mean, webkit.org, I think, is is what I'm plugging.

There's a lot there. It's not a very complicated site. You're not gonna, You know, get lost.

But there's a lot of juicy stuff that I think folks don't really haven't really noticed, All sorts of details about, how Safari works, how WebKit works, how Wes Inspector works, what's coming out next. And, like, these are these are very

accessible to Wes developers. You know, like, this is not people who care about browser engines, but, like, if you care about, Oh, how does CSS nesting work? You know? How do how do I use it? What's the has selector? There's some fantastic blog posts on here, so We'll link that up in the show notes. Yeah. Thanks. Yeah. We had a whole series on color, in fact,

over the years. And there's some really interesting details about, Sometimes about privacy or security written for a web developer audience Yeah. Not, you know, security expert audience necessarily, although that that audience too, but, like, you don't have to be a security expert to understand. But sometimes it's very interesting to me to read a little bit about

What it is that browser engineers are thinking about when as we make the decisions that we're making. Well, thank you so much for coming on. Really appreciate all of your time. That was Super informative. And, again, we hope to have you back sometime if you ever wanna come on and chitchat about CSS. Yeah. Thank you so much for having me. It's really great really great to be here. Thanks. Yeah. Anytime. Alright. Peace.

Head on over to syntax Scott m for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.