996: 10 New CSS and HTML APIs

Wes and Scott talk about the latest CSS and browser features, including the Grid Lines API for masonry layouts, HTML in Canvas, name-only container queries, CSS random, search-text styling, and more. Show Notes 00:00 Welcome to Syntax! 00:57 Grid Lines API for masonry-style layouts Introducing CSS Grid Lanes CSS Grid Lanes browser support 03:25 HTML in canvas and next-gen UI effects @jaffathecake @mattrothenberg 11:30 Name-only container queries for scoped styles Name-Only Containers: The Scoping We Needed 14:37 Brought to you by Sentry.io 15:34 Safari removes haptic feedback workaround 17:38 CSS random for dynamic values Rolling the Dice with CSS random() 18:49 Styling find-in-page with ::search-text 21:44 Sticky positioning now works in both axes @una 22:43 Multi-column CSS finally gets usable fixes Looking at New CSS Multi-Column Layout Wrapping Features 24:41 Border shape improvements and new design options @una MadCSS.com 27:09 Why MDN demos need to be better 28:24 Element-scoped view transitions for cleaner animations @bram.us Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, we are talking about a bunch of new stuff in CSS and HTML. There has been some big things added and some small things added, some nice quality of life things, and some really exciting things that you cannot use just yet, but you can play around with. There is just like an onslaught of new stuff. So, we've collected a handful of these things and are going to be sharing with you today. My name is Scott Tolinski. I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes?

• 0:30Wes Bos?

  I can't wait to talk about the HTML in Canvas thing. Honestly, I didn't even know that this was gonna be a thing. I didn't even know this was an option. And now the world has opened up to me. Yeah.

• 0:42Scott Tolinski?

  Yeah.

• 0:43Wes Bos?

  Stoked.

• 0:44Scott Tolinski?

  My brain has been opened up by some of these demos for this, so I'm stoked to get into that too. So, stay tuned, folks. We're gonna be talking about what the heck HTML in Canvas is and why it's going to allow for crazy stuff going on on the web. So, the very first one I want to get into is something that has been long awaited in CSS, which is the CSS Masonry API, AKA, the actual name for this thing is CSS Grid Lanes. There's a display property, display grid lanes, and then you can specify using grid template columns, those types of things in gap, the CSS properties that we know and love. The only difference is, is that the content actually filters in in the classic Masonry Pinterest-style layout. This can be useful

• 1:29Scott Tolinski?

  for all kinds of things beyond just your classic photo grids or things like that. I saw it being used for like footer links, to have the footer links all shuffle correctly. This is kind of the best possible thing we could be adding as an implementation for the Masonry-style layouts in CSS. It's going to allow for the shuffling of elements in such a great way, where in the past, we had CSS columns that where things went like 1, 2, 3 down vertically before going into the next column. This is actually going to do the opposite, where things will fill in kind of where they fit in, left to right. They will just kind of fit, and you can actually do it

• 2:10Scott Tolinski?

  right to left, or up to down, left to right. You can change all of that as well. But if you just want a straight-up Masonry-style layout, man, display grid lanes, can it like get any more simple than that? It is... Really super cool.

• 2:26Wes Bos?

  That's it. There's nothing to learn here. It's simply just display grid lanes. And now you can have multiple, like a Pinterest style layout, which is something that we have been trying to do forever. And we've had, like, we had what? Like box pack fit in CSS grid, but it never was perfect. And it didn't go the way you want. And it had to have a fixed height. There was always gotchas with this type of thing. And now we have it and I am so happy that we can finally have this type of layout. It's going to make doing these types of websites so much easier. And like also like it opens up new creative use cases as well.

• 3:07Scott Tolinski?

  Yeah, yeah. Super cool stuff. So we will, we'll link up a web kit post. This is available right now in the as of Safari version 26.4. And it's behind a flag in Chrome and Firefox. So not long off here. Really stoked about this one.

• 3:26Wes Bos?

  All right. Next we have this HTML in Canvas API. And I had zero idea that this was coming. It's an experimental API, meaning that like it might not ever come. But it sort of solves one problem we have with Canvas, which is you, you cannot draw HTML to Canvas. And the other problem is that when you make UI in Canvas, if you want to like add effects or whatever with Canvas, then it's very hard to make accessible. So this new UI will allow you to simply just put elements inside of a canvas. Like I got my DevTools open right here. This is literally a canvas element.

• 4:08Wes Bos?

  And then inside of that, you can just put regular HTML. And then there are some JavaScript APIs that will allow you to paint that HTML to the canvas. Now, why would you want to do that? Well, there are so many different effects that you can do with Canvas that. You can put a canvas in front of HTML. You can use SVG where there's some tricks where you can put HTML inside of an SVG. And now it's an image and then you can paint that to canvas. But there's a whole bunch of limitations. That's actually how we use on the Synhacks platform. But this is simply just you can put most HTML inside of a canvas element and then apply

• 4:49Wes Bos?

  any shaders or any, any whatever things that you want to the canvas element. So here I've got pixelization and I can just go ahead and like type in it, right?

• 5:01Scott Tolinski?

  This demo is totally unreadable for people who are not watching this. It's completely pixelated form input.

• 5:08Wes Bos?

  HTML in here. Yeah, it's obviously a stupid example, but it's just showing how like this is live HTML. And like, I don't like, if you backed it off a little bit, that kind of looks kind of cool. Right?

• 5:21Scott Tolinski?

  I got a question about that, Wes. If you just had the HTML inside of the canvas, would it just render as normally? Or do you have to tell it to render the HTML?

• 5:31Wes Bos?

  There is a like a request drawing API on it where you have to explicitly tell it to, to draw. I'm curious about what would happen if you're not. I have a whole bunch of demos in here, but I assume it would probably fall back, but maybe not, because maybe that's not what you want.

• 5:54Scott Tolinski?

  Yeah, I need some handholding sometimes in these demos. I look through them and I'm like, what is required here and what is not required?

• 6:00Wes Bos?

  Yeah. So here's another example where I made a magnifying glass for a website. And because the HTML is, is being drawn to it, right? Like you can see, I'm, I'm just typing into this input here. But I'm, I'm using a magnifying glass to make that bigger and slightly distort it. Right? Another one is frosted. So here you can see like, this is just text.

• 6:25Scott Tolinski?

  Can you describe what you're doing, Wes? For the audio listeners.

• 6:28Wes Bos?

  Oh yeah, sorry. This is creating like a frosted effect on a window. You know, if you're blowing on a window on like a Cold, warm day, and then use your finger to wipe the frost away. I'm doing that. And this, again, you could have kind of done this before where you could put a canvas in front of the HTML. But what I'm doing here is I'm literally, I'm blurring the stuff that is behind the canvas, you know, and then as you use your finger to move the frost out of the way, it becomes less blurred. It's a little random every single time. There's some other really cool demos from, here we go, Matt Rothenberg had a cool demo where

• 7:11Wes Bos?

  he's, look at this, and if you pause it really quickly, you'll see-

• 7:16Scott Tolinski?

  What is happening now, Wes, for the-

• 7:18Wes Bos?

  Oh, my gosh, I'm so sorry, audio listeners. He has two things. One is when you have an input, you have like a kind of a cool box that's following around the currently focused input. And that is just rendering out a cool border hover effect around each of the inputs, which you could have done that previously with Canvas and some work, but I think it's a lot easier now. And then the other thing is that when you submit it, there's like scan line goes down through the form and sort of like, like wipes it off the page, right? But part of the wipe is you'll see that the wording is getting slightly stretched and blurred as it's being wiped off.

• 8:02Wes Bos?

  And I thought that was such a cool effect, even like, you know, on iOS, when you bring up like Siri on iOS, where you it slightly does like a gradient border around your phone, or when you do your volume up and down on iOS, it actually pushes in the content that is on the screen. It's not just overlapping the volume slider. The volume slider is literally pushing the content over and it slightly warps it. And I think like that kind of stuff is so cool that you can have control over how the pixels are painted in the DOM, right? Whatever is simply falling behind this volume slider, I want to simply push that over and-

• 8:46Wes Bos?

  That is something that you have not been able to do. You've been able to like have SVG filters on top of things. But in actually having full control over how the pixels are rendered on the screen without having to give up or move to something or give up a whole bunch of accessibility and whatnot, you just regular HTML inside of a canvas element.

• 9:06Scott Tolinski?

  Yeah.

• 9:07Wes Bos?

  So.

• 9:07Scott Tolinski?

  It's so neat.

• 9:08Wes Bos?

  Make it or not. So cool, though.

• 9:11Scott Tolinski?

  It's so cool. Yeah.

• 9:14Wes Bos?

  The just jelly slider right here, like we saw this demo on Twitter a couple years ago or a couple of weeks ago.

• 9:21Scott Tolinski?

  Yeah, a couple of years ago at this point. Yeah.

• 9:24Wes Bos?

  If I inspect element on this jelly slider, it is simply just an input, right?

• 9:29Scott Tolinski?

  That's the best part, folks, because people who might not know is the moment you get into any of this canvas stuff, you're having to write so much interactivity code, or in the case of inputs, forget about it, you know, like, so having the actual DOM elements and then you don't lose accessibility in canvas-based sites, too. It's really just what a powerhouse of an API this is.

• 9:57Wes Bos?

  So here's another one from Jake Archibald, where like if you wanted like like an old CRT TV where things are slightly, what do you call that shape that the CRT TV has? You know, where it's not perfectly square, but there's a bit of an arch to it.

• 10:13Scott Tolinski?

  Yeah, it's a convex.

• 10:15Wes Bos?

  Convex, something like that. Woo! So cool. And like, again, this is just regular old HTML. I can inspect element on it, you know, I can change some of the text inside of that. I can use all of the stuff that I'm used to in HTML. It's just updated any effects you have. So I'm gonna, I'm building out some more demos with this because this is right down my alley.

• 10:39Scott Tolinski?

  Yeah, you know what it kind of feels like it would give the, uh, the stuff that we wanted to do with Houdini. Now, now you could kind of do, you could do all kinds of custom rendering.

• 10:49Wes Bos?

  Yes.

• 10:50Scott Tolinski?

  Yeah.

• 10:50Wes Bos?

  And I, I think like, a lot of the Houdini stuff like never panned out. We, and it ended up making its way via things like, like Text Line Center or, or what is it? Text Wrap Balance, you know?

• 11:01Scott Tolinski?

  App property.

• 11:02Wes Bos?

  But I think that this is another one of those APIs where, yeah, just render out the HTML to a canvas element. And then you've got the pixels. You can do whatever you want. You can put shaders on it. You can tweak it. You can morph it, whatever you want. So I hope this works and it's behind a flag in Chrome right now. So obviously you can't use this on any website, but everybody who saw this is like, yes, I absolutely need this thing for, uh, making next gen interfaces.

• 11:30Scott Tolinski?

  Nice. I have a one that you might not have seen here, and this one kind of flew underneath the radar. Firefox 149, Chrome 148, and, uh, the same version of Safari that brings, was it 26.4? That brought Gridlens are, are bringing container queries that you don't have to specify the actual query part of the container query. You can just specify the name. So the way you would do this is you would, on a wrapper, you would give your container name property a name. So container name sidebar. Then you could just use the @container sidebar.

• 12:09Scott Tolinski?

  And that would scope the CSS to that container specifically, giving you basically another way of doing, uh, scoped CSS that is baked into the platform. Because right now, all the scoped CSS solutions are adding a bunch of classes to scope. And this is again, just another way that we could have native scoping in CSS. Because, uh, typically with container queries, you're specifying like a style query. Okay, apply this CSS when this value is equal to this, or apply this CSS when the container width or size is this or this. But this is basically just saying, apply this CSS inside of this container. But it does scope it.

• 12:49Scott Tolinski?

  So that way you could use more generic specifiers inside of that and scope it to that container itself.

• 12:57Wes Bos?

  Oh, man, I think that that is awesome because.

• 13:05Wes Bos?

  Like, we have at scope in CSS now, and I ended up, I tried using this for a project I was working on the other day, and like, it just didn't feel right.

• 13:16Scott Tolinski?

  Really?

• 13:17Wes Bos?

  And you can at scope, you can give it a selector, but, and then you can also don't at scope, which is really cool. So you can start the scope and you can tell it to end at a specific thing, which that's great as well. And this is, this is widely supported as well. But the ability to make like named scopes, like sidebar, that's great. And you're simply just using container queries for that. And very likely, you also want to do things with your container queries as well. And then those are not two separate APIs. This is simply just the container spec. And now and then there's style queries as well coming to container queries. I am in. That, that is awesome. So that's just called name

• 14:01Wes Bos?

  only container queries.

• 14:04Scott Tolinski?

  Yeah, it's hard to actually find anything about this. I saw it because Chris Corrigan had a tweet, and then front end masters had a post on it. And then I'm starting looking for what the support is. And I could only find it in GitHub issues and stuff. So one of those things that was hard to track down what the support is, but really neat. According to Anthony Ferner on Blue Sky, he says it's in Firefox 149, Chrome 148, and now Safari 24 point, or 26.4, 24.6, one of the 26.4. Yes, there we go.

• 14:36Wes Bos?

  Okay.

• 14:37Scott Tolinski?

  And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io/syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io/syntax. Again, we've been using this tool for a long time and it totally rules. All right.

• 15:02Wes Bos?

  Man, I am in. There's so much of CSS that doesn't get the like props that it needs to. And I attribute that to people being obsessed with AI right now, you know? There's, there's not a lot of time to, to spend on new CSS stuff. Or like, everybody's just cranking out Tailwind left and right. And like, a lot of this new stuff is not supported in Tailwind at all. So it's kind of hard, but there's so much cool stuff added to CSS that is super powerful.

• 15:33Scott Tolinski?

  Yeah.

• 15:34Wes Bos?

  Couple other ones. Safari, again, cranking on all of these things. First of all, a couple of episodes ago, we talked about the ability to use haptic feedback in the browser in iOS now, which means like, if you have your phone and you want to like, slightly vibrate it to the user to tell them that something has happened. There was a, a trick where if you have an input type of checkbox and you give it a switch attribute, which is only supported in Safari, it will, when you, you, you turn a switch on and off, it would do a little vibration. So people figured out that you can programmatically turn a switch on and off many times and you'd be able to get haptic feedback in the web. Apparently, I went back in the like WebKit GitHub repo and, and the WebKit docs.

• 16:18Wes Bos?

  Apparently, it was only ever supposed to be associated with a user interaction. Like same thing like opening up a pop-up window or playing audio. Those things always have to be associated with like a click or some sort of user interaction. You just can't fire them off willy-nilly. And I think, I think that was just a regression in Safari for one version that people figured out you can do that because it's been fixed and you can no longer use haptic feedback on the web. So, thanks Safari.

• 16:47Scott Tolinski?

  Safari. But it's one of those APIs that like the navigator.vibrate like Safari. It's just one of those ones that like adds more fuel to the fire that Apple intentionally like limits the browser APIs. Because what, come on, like abusing it.

• 17:05Wes Bos?

  They don't want people abusing it.

• 17:08Scott Tolinski?

  But you're not gonna tell that to the native developers. We don't want you abusing it. Like, come on.

• 17:13Wes Bos?

  Yeah.

• 17:14Scott Tolinski?

  Because they don't have control.

• 17:14Wes Bos?

  Instagram abuses it. If you scroll through people's stories, every time like a friend likes that story as well, it goes, dude, it's so annoying. So I see why, but that shouldn't, that shouldn't stop us. You should be able to turn it off, like webcam access or anything else, right? Do you want this page to be able to vibrate?

• 17:35Wes Bos?

  I don't know if that requires permission or not, but that's frustrating. One cool thing Safari did give us is random. So CSS random, random 0, 102 will choose an even number between 0 and 100. This is so cool because I, every time I need randomness in CSS, I have to go into my like my view layer and like pass in a CSS variable that has been programmatically calculated as random. And then I also have to make something seeded random because if you're doing server client rehydration, it needs to be the same amount of random on the server and on the client.

• 18:16Wes Bos?

  So then you have to get into seeded random. So it's, you know, it's not as random, right? It's the same amount of same value you get on both sides. But this is something is a straight up CSS API where you can randomize your values, which is gonna be great for.

• 18:32Scott Tolinski?

  Awesome.

• 18:33Wes Bos?

  Even just like rotating values on a page, I very often will rotate cards. And I'll have to like, on the Mad CSS website, I have to programmatically go in and give every single value a random, random one. I'm in.

• 18:49Scott Tolinski?

  Yeah, yeah, neat. I have a one here, which is search text, which is a new pseudo selector. So colon, colon, search hyphen text. Or there's a, what do they call it when there's a double pseudo selector? Because you can do colon, colon, search hyphen text, colon, current as well. So it's like a second layer to it. I guess that's pseudo class.

• 19:13Wes Bos?

  That's just stacking pseudo classes, right? That's no different than doing like active. And hover, yeah.

• 19:19Scott Tolinski?

  Yeah, yeah, it's so funny to see that in action. It looks like something entirely new, but it's not at all. So there's search, search text and current. So search text is allowing you to style like the, when you do command F in a browser and you start searching, it allows you to style the way that that text is highlighted on the page, matching the rest of your CSS for, for searching. But the coolest thing is the, the colon current on here because you can, uh, the, you know, when you do like next or next and next to find the current iteration, you could now style that however the heck you want.

• 19:56Wes Bos?

  Oh.

• 19:57Scott Tolinski?

  Super neat. So you could have some, uh, really to, to really match the, the theme of your site to make the current one look interesting. You know, I, I think, I think there's all kinds of different ways you could make that look nicer than just putting a stupid highlight on it, right?

• 20:12Wes Bos?

  That's great. I like that a lot because yeah, how, how does the browser know that yellow or whatever is going to be the best version for you? So this will allow you to highlight them. That's such a simple API and I'm so glad we have it. I do wish, you know what I, one thing that grinds my gears? Is that if you have like a search going, and this is on tweets as well, where I'm looking for a specific reply or a specific word in like people replying to a tweet. So I'll search for like syntax and then I'll scroll through some replies. And as Twitter loads in more, you know, it's lazy loading the values. The browser's search doesn't update. So I have to like go back to my search, like push space and then push backspace. And then it, uh, then it applies to the markup on the page.

• 20:57Wes Bos?

  I wish that the browser would say, ah, I have changed the markup on the page. Therefore I will re-highlight what is going on on the page.

• 21:06Scott Tolinski?

  Do you think it's a, just a virtualization issue? Or is it like always just the DOM not having the?

• 21:13Wes Bos?

  Well, like in that case, like it would be nice if the browser, like if the website would just use like the, there's, there is native APIs that allow you to like not render things, but still maintain the search and that way you can, you can find it. But in many cases. Like Twitter doesn't want to send a thousand replies on a single endpoint to the thing. So you need to be like live searching every single time the DOM updates.

• 21:42Scott Tolinski?

  Yeah, word.

• 21:44Wes Bos?

  Sticky both ways. Una had a post the other day where Chrome 148 sticky positioning now works on a per access basis. So sticky headers in CSS, when you scroll, you're able to stick them to the top or offset them certain amount, but it previously has only worked in one axis, meaning that like you can scroll left to right or top to bottom. And now they work in both directions, which is awesome for specifically for like conference layouts. Or if you've got like a big tournament where there's, I don't know, three different places that people are playing, you want to figure out where they are.

• 22:26Wes Bos?

  Tables is one of the hardest things to do well on mobile and this will certainly improve that.

• 22:31Scott Tolinski?

  Yeah, yeah, I think this is dope. Again, just more, more stuff that we, more stuff that we need here.

• 22:39Wes Bos?

  It's just little paper cuts that are being solved.

• 22:42Scott Tolinski?

  Little paper cuts.

• 22:42Wes Bos?

  Yeah.

• 22:43Scott Tolinski?

  Another one with little paper cuts here is this multi-column fixes. So we all know multi-column CSS sucks, but there is new column wrap properties as well as a new column height that now basically, even if you were to specify how many columns before, it would just continue to make them horizontal. But now what it does is if you have too much text for the amount of columns you specify, if you specify a height, it puts them on the next line. The reason why you would use this over something like flexbox is because this is breaking up a single like paragraph full of text instead of like

• 23:25Wes Bos?

  Okay.

• 23:25Scott Tolinski?

  having divs where you're segmenting the text into different divs. So this would be one long paragraph full of text and you want it to be in three columns. And then if there's too much text for three columns, then it's going to wrap onto another line. So just giving you that flexibility and freedom. This is an API again that I pretty much avoid using, but it definitely has its use case and happy to see that it does in fact exist and like working in a way that probably should have worked from the start.

• 23:58Wes Bos?

  Yeah, yeah, I agree. The columns has always been like kinda not great, you know? It works okay, but here and there. And you have to think like, anytime we show any demos like this, people are always like, "Oh, I don't see where you would want to use that." And like, guarantee, there's somebody who is like, "Oh, I work in publishing and we lay everything out in HTML and CSS and we need like this weird print style sheet hack to make it work." And like, finally, this is gonna, they're gonna work well for you. So just because your single one website doesn't need this, doesn't mean that it doesn't, it shouldn't be added to the web platform because people use the web in many different ways, in many weird ways.

• 24:41Wes Bos?

  BorderShape, another one from Una. BorderShape can handle both inset and outset. So you can do, this is so cool. You can make like breadcrumbs that are like chevrons and then the focus wrap will follow that along, which is super cool. The BorderShape stuff has been so fun to work with. On the Mad CSS website, I used it for, both for these ones right here. You see these little cutouts on the tickets? So I like, I replicated like what a ticket would look like and then I used BorderShape to cut out the corners. And, and that's been doable before with, you could use like a mask image, right? And that's what I'm falling back to.

• 25:25Wes Bos?

  But this, like where the border follows the border shape, that was not really doable with, with masking previously. So this, the red inset value here looks so cool. It's not really something you could have done previously unless you like had like an image programmatically generated or you use like an SVG to sort of draw. And now you can simply just use regular CSS borders and it will just bite right into them.

• 25:52Scott Tolinski?

  Yeah, there's so many cool things about this API. Can just, man, not everybody, when it first came out, everybody's like, "It's squirkles." And I was one of those people. It's squirkles. But it's more than squirkles. We got all kinds of, what's it, scoop? I, we did one of these for our, we did a live CSS show and I had a fake corner shape property in there and just to be a little devious.

• 26:15Wes Bos?

  Can we name them all right now?

• 26:15Scott Tolinski?

  Uh, let me try, let me try, let me try. Okay. I'm not gonna look at your screen. Squircle, super ellipse, yeah, my god, scoop.

• 26:26Scott Tolinski?

  I'm like blanking whether or not the one that I had in there was fake or not. Bevel.

• 26:31Wes Bos?

  Yep.

• 26:33Scott Tolinski?

  Am I missing one?

• 26:34Wes Bos?

  Yeah.

• 26:34Scott Tolinski?

  Super ellipse, squircle, bevel. Oh, I'm missing one. I just saw it. I'm missing notch. And round, but although I think round's the default one.

• 26:44Wes Bos?

  Which is probably the default. Scoop, bevel, notch, square, squircle, and super ellipse. So all of these values, bevel, scoop, whatever, whatever. Those are just like nice shorthands. And then you can literally make anything with a super ellipse. So a squircle is just a super ellipse with custom values preset on them. Big fan. Man, one thing about MDN is they gotta make their demos look cooler.

• 27:13Scott Tolinski?

  Yeah.

• 27:14Wes Bos?

  It's so hard to make a cool demo and not add a bunch of CSS that is unrelated. And that's probably what they need to do. But then also, like, I was looking up border image the other day where like CSS has this thing where you can add images for borders. And let me show you. Border image CSS. This all looks awful, you know? And like, I don't think I've ever seen anybody use border image before. And I was looking it up. I was like, oh, maybe I could use this type of thing. And all, all of them was like, see, that maybe is one good. But that's not even, that's not even the API.

• 27:52Scott Tolinski?

  It's not even good. It's so funny because it's always been like that. And, and then what the problem is, is that like, I think people don't reach for some of these tools because they don't see it in action as being like, good looking or useful.

• 28:06Wes Bos?

  This is the cool one that I did find. So this guy on CSS tricks

• 28:14Wes Bos?

  made a, like, right here, like one of these.

• 28:17Scott Tolinski?

  Oh, yeah.

• 28:18Wes Bos?

  Paper scroll, tombstone.

• 28:20Scott Tolinski?

  Yeah.

• 28:21Wes Bos?

  Yeah, video game style, repeating border images.

• 28:24Scott Tolinski?

  So this next one is something that's really neat for animations in the browser, which is element scoped view transitions. So you are able to basically give a view element name, something that is scoped to that element specifically. And then you can have something called a view transition group contain, and then a view transition class where you can then style things for that individual animation. Basically, with this API, you can have tightly scoped view transitions where in the past, like if you wanted to do the automatic view transition movement kind of stuff, Wes,

• 29:09Scott Tolinski?

  you're giving everything a unique name. You are giving everything a unique view transition name.

• 29:15Wes Bos?

  Oh, yeah, I did this.

• 29:18Scott Tolinski?

  Yes, you're able to have them be grouped and scoped essentially. It's very, just like one of those quality of life things. Again, a lot of people are reaching for JavaScript for animations, and this gives you the ability to really control them a bit more.

• 29:35Wes Bos?

  I did this, like if you have any sort of UI where you're adding and removing cards, like that's a very common thing to do. You know, you got like a to do list and you're adding and removing elements from it. Previously, you've had to give every single one like a unique name. And now you can simply just say anything that is like an li element, give it a view transition name. And then you can animate those in and out or reorder them or anything like that. It's true, because I remember like the first time I got into like view transitions, I was just like, ah, this is a little bit limited in terms of what I wanted to do. But now, this has been out for like a while now, I'm pretty sure.

• 30:16Scott Tolinski?

  For element scoped view transitions, it's in Chrome 147. I'm not sure about the other browsers, though.

• 30:23Wes Bos?

  Okay, so that is, this is new. Maybe I was using it in Chrome Canary for a while. And just living in La La Land. For me, but it's just a, just a fun demo. So I can hopefully soon we'll be able to use this with.

• 30:37Scott Tolinski?

  It says stable by the end of March. So I believe it is stable by the time you're listening to this in Chrome specifically. So I hope you learned something new today, got excited about something. There are so many neat stuff in CSS, stuff you can use, stuff you can't use, stuff you can progressively enhance in your codebase today. Which of these APIs are you the most excited about? Which of them has tickled your fancy? What kind of crazy stuff are you going to do with HTML and Canvas? Because this one, wow. Uh, very stoked about this. Let us know down below. What'd you think?

• 31:10Wes Bos?

  Peace.