996: 10 New CSS and HTML APIs  🔗 **Source:** [996: 10 New CSS and HTML APIs](https://share.snipd.com/episode/033728dd-3c19-4825-b14d-a44d25b249b3) ## Highlights - **Native Masonry With CSS Grid Lanes** - CSS Grid Lanes brings native masonry layouts to CSS with a simple display:grid-lanes declaration. - It fills items in a Pinterest-style flow (left-to-right or configurable axes) using familiar grid properties like grid-template-columns and gap. Transcript: Scott Tolinski 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 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 one, two, three 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 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? Wes Bos It is really super cool that's it there's nothing to learn here it's simply just display grid lanes and now you can have multiple like like a pinterest style layout which is something That we have been trying to do forever and we've had like in we had what like box pack fit in css grid but it never was perfect and it didn't go the way you wanted and how did it 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. Scott Tolinski Yeah, yeah, super cool stuff. So we will link up a web kit post. ([Time 0:00:57](https://share.snipd.com/snip/f25201a9-03b2-4b76-a10a-842e8acf5e2a)) - **Render Real HTML Inside Canvas For Next‑Gen Effects** - HTML in Canvas lets you place real DOM elements inside a canvas and paint them, enabling advanced pixel effects while preserving accessibility. - Demos show pixelation, magnifiers, frosted-wipe effects, and live inputs that remain inspectable and interactive behind canvas shaders. Transcript: Wes 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 it might not ever come. But it sort of solves one problem we have with Canvas, which is you cannot draw 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 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 dev tools open right here this is literally A canvas element. 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 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? Scott Tolinski Like this demo is totally unreadable for people who are not watching this. Wes Bos Uh it's a completely pixelated form input 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 Scott Tolinski Bit that kind of looks kind of cool right 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 uh tell it to render Wes Bos The html 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. Scott Tolinski Yeah. I need some hand-holding sometimes in these demos. I look through them and I'm like, what is required here? And what is not required? Wes Bos Yeah. So here's another example where I made a magnifying glass for a website. And because the HTML is being drawn to it, right? Like you can see I'm just typing into this input here. But 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. Can you describe what you're doing, Wes, for the audio? Scott Tolinski Oh, yeah. Sorry. Wes Bos This is creating like a frosted effect on a window. You know, if you're blowing 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 he's, look at this, zoom. And if you pause it really quickly, you'll see. Scott Tolinski What is happening now, Wes, for the. Wes 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, this 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. 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. 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 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. Yeah.'s i don't know if this will make it or not it's so cool though it's so cool yeah this jelly slider right here like we saw this demo on on twitter a couple years ago or a couple weeks ago Yeah a couple it feels like years ago at this point yeah If I inspect element on this jelly slider, it is simply just an input, right? Scott 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 it's really just what a what a powerhouse of an API this is. Wes Bos So here's another one from Jake Archibald, where like, if you wanted like, like an old CRT TV, where things are slightly, do you call that shape that the crt tv has you know where it's it's Not perfectly square but there's a bit of an arch to it yeah it's a con con uh that convex something like that whoo so cool and like again this is just regular old html i can inspect element On it. I can change some ([Time 0:03:26](https://share.snipd.com/snip/e0db7b9c-441f-432d-ad9d-e37ecf677c91)) - **Scope Styles With Name Only Container Queries** - Use name-only container queries to scope styles by container name instead of writing unique selectors everywhere. - Assign container-name on a wrapper then write @container <name> to apply scoped CSS inside that region. Transcript: Scott Tolinski Nice. I have one that you might not have seen here. And this one kind of flew underneath the radar. Firefox 149, Chrome 148, and the same version of Safari that brings, was it 26.4 that brought grid lanes, 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 at container sidebar. And that would scope the CSS to that container specifically, giving you basically another way of doing scoped CSS that is baked into the platform. Because right now all the scope 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 typically with container queries, you're specifying like a style query, okay, apply this CSS, when this value is equal to this, or apply the CSS when the container with their Size is this or this. But this is basically just saying, apply this CSS inside of this container, but it does scope it. So that way you could use more generic specifiers inside of that and scope it to that container itself. Wes Bos Oh, man. I think that that is awesome. Because 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. Scott Tolinski Really? Wes Bos And you can at scope, you can give it a selector. But, and then you can also donut 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 widely supported as well. But the ability to make 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. ([Time 0:11:30](https://share.snipd.com/snip/668dd64d-50cf-4385-bedb-56399c368a9b)) - **Use CSS random() For Built‑In Randomized Styles** - CSS gained a native random() function to generate values like random(0,100,2) for even-numbered ranges directly in styles. - This removes frequent workarounds of injecting random CSS variables from JS or dealing with seeded randomness for SSR hydration. Transcript: Scott Tolinski Yeah. Wes Bos A couple other ones. Safari, again, cranking on all of these things. First of all, a couple 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 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 turn a switch on and off, it would do a little vibration. So people figured out that you can programm 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 in the WebKit docs. 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 Scott Tolinski Feedback on the web so thanks safari but it's one of those apis that like the navigator dot vibrate like safari it's just one of those ones that like adds more fuel to the fire that uh apple Intentionally like limits the browser apis because what they don't want come on like abusing it but it is so nice but you're not gonna tell that to the native developers we don't want Wes Bos You abusing it like come on yeah because they don't have 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 i see why but that shouldn't that shouldn't stop us you should be able to turn it off like like webcam access or anything else right do you want this page to be able to vibrate 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, 100, 2, we'll 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. 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 going to be great for. ([Time 0:15:33](https://share.snipd.com/snip/0ec80619-6ba0-42b3-a640-bc9dc44d37ca)) - **Style Browser Find Matches With ::search-text And :current** - ::search-text and :current let you style in-page find highlights and the currently focused match with full CSS control. - You can theme find-in-page highlights and make the 'current' match visually distinct beyond the default yellow. Transcript: Scott Tolinski Neat. I have 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. Wes Bos That's just stacking pseudo classes, right? That's no different than doing active and hover. Scott Tolinski 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 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 colon current on here because you can, you know, when you do like next or next and Next to find the current iteration, you can now style that however the heck you want. Which is really super neat. So you could have some really to really match the theme of your site to make the current one look interesting. You know, I think there's all kinds of different ways you could make that look nicer than just putting a stupid highlight on it, right? That's great. Wes Bos I like that a lot because, yeah, how does a 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. ([Time 0:18:50](https://share.snipd.com/snip/776bbcf5-c318-4ca0-877d-ec8399f839e5)) - **Sticky Position Works In Both Axes** - Sticky positioning now supports sticking on both axes so elements can remain fixed while scrolling horizontally and vertically. - This improves complex UIs like wide tables or conference/tournament layouts where both directions matter. Transcript: Wes Bos Sticky both ways uh 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 access, meaning that you can scroll left to right or top to bottom. And now they work in both directions, which is awesome specifically for conference layouts. Or if you've got a big tournament where there's three different places that people are playing, you want to figure out where they are. Tables is one of the hardest things to do well on mobile, and this will certainly improve that. ([Time 0:21:44](https://share.snipd.com/snip/7cb02db5-2fec-42a3-af38-bb96e8f3ca5d)) - **Multi‑Column Wrap Fixes Make Columns Practical** - New multi-column wrapping and column-height fixes let long paragraphs wrap into new rows when columns overflow. - This finally makes CSS multi-column usable for flowing a single paragraph into N columns that wrap like lines, useful for publishing layouts. Transcript: Scott 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 flex box is because this is breaking up a single like paragraph full of text instead of 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. ([Time 0:22:43](https://share.snipd.com/snip/76d250e6-9a09-4140-a589-e842151b6737)) - **Border Shape Adds Real Shapeable Borders** - Border-shape now supports inset and outset shapes (squircle, scoop, bevel, notch, super ellipse) that the border will follow. - Use it to create complex UI like chevron breadcrumbs or ticket cutouts without mask images or SVG hacks. Transcript: Wes Bos BorderShape, another one from Una. BorderShape can handle both insets and outsets so you can do this is so cool um you can make like breadcrumbs that are like chevrons and then the focus wrap will follow that along which Is super cool the border shape stuff has been so fun to work with on On the MadCSS website, I used it for both for these ones right here. You see these little cutouts on the tickets? So I replicated what a ticket would look like. And then I used border shape to cut out the corners. And that's been doable before with, you could use like a mask image, right? And that's what I'm falling back to 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 it and now you can simply Scott Tolinski Just use regular css borders and it will just bite right into them yeah there's so many cool things about this api can just man and not everybody when it first came out everybody's like It's squircles and i was one of those people it's squircles but it's more than squircles we got all kinds of uh what's it scoop i we did one of these for our live. We did a live CSS show, and I had a fake corner-shaped property in there just to be a little devious. Can we name them all right now? Let me try. Let me try. Let me try. Okay. I'm not going to look at your screen. Squircle, super ellipse. My God, scoop. I'm like blanking whether or not the one that I had in there was fake or not. Bevel. Yep. Am I missing one? Yeah. 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. Wes 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. ([Time 0:24:40](https://share.snipd.com/snip/d8d875fe-a24b-4e29-982f-b5701746a767)) - **Animate List Changes With Element Scoped View Transitions** - Use element-scoped view transitions to group and animate additions, removals, and reorders without unique global names. - Mark elements with view transition names and use view transition group/contain to tightly scope enter/leave animations for lists and cards. Transcript: Scott 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, you're Giving everything a unique name. You are giving everything a unique view transition name, but here you're able to have it. Yes. You're able to have them be grouped and in 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. Wes 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 to 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 it's 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 for element scope view transitions it's in chrome 147 i'm not sure about the other browsers though okay so that it this is new maybe i was using it in in chrome Canary for a while just living in la la land worked for me but it's just a just a fun demo so i can hopefully soon we'll be able to use this with it ([Time 0:28:24](https://share.snipd.com/snip/bcd82830-a7ae-49aa-a4a3-67d372aa60b5))