10 New CSS and HTML APIs

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 Tolinsky. I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes? I can't wait to talk about the HTML and canvas thing. Honestly, I didn't even know that this was going to be a thing. I didn't even know this was an option. And now the world has opened up to me. Yeah. Yeah. 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 going to 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. though. 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, and 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. Uh, 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 uh links to have the footer links all shuffled correctly. This is kind of the 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 uh in the past we had CSS columns that where things went like 1 2 3 down a 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 and you can actually do it right to left or uh up to down, left to right. You could you can change all of that as well. But I 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. 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 had like in we had what like box pack fit in CSS grid but it never was perfect and and it it didn't go the way you wanted and it had to have a fixed height. There was always gotas 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. Yeah. Yeah. Super cool stuff. So, we we'll we'll link up a WebKit post. This is available right now in the uh as of Safari version 26.4 and it it's behind a flag in Chrome and Firefox. So, not long off here. Really stoked about this one. 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 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'm 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 you can put a canvas in front of HTML. Um, 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 Synhax 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? Like this demo is totally unreadable for people who are not watching this. Uh it's completely pixelated form input HTML in here. Yeah, it's it's obviously a stupid example, but it's just showing how like this is live HTML and like I don't know like if you backed it off a little 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 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 I assume it would probably fall back, but maybe not. Um because maybe that's not what you want. 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? Yeah. So, here here's another example where I made a magnifying glass for a website. Um, 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 and I'm I'm using a magnifying glass to to make that bigger and and slightly distort it, right? Um, another one is frosted. Um, so here you can see like this is just text. I'm Can you describe what you're doing, Wes? For the audio. Sorry. This is uh creating like a a frosted effect on a window. you know, if you're blow on a window on like a a cold warm day and then use your finger to wipe the frost away. Um, I'm I'm doing that. And in 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 um 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. is 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. And if you pause it really quickly, you'll see what is happening now, Wes, for the Oh my gosh, I'm so sorry audio listeners. He has a 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. Um, 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. Um, 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 the wording is getting slightly stretched and blurred as it's being wiped off. Um, 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 um 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 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. So, it's I don't know if this will make it or not. 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 a years ago at this point. Yeah. If I inspect element on this jelly slider, it is simply just an input, right? Input. 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 you're having to write so much uh 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. So, here's another one from Jake Archerald where like if you wanted like like a old CRT TV where things are slightly what 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 con kind of 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 and it's just updated any any effects you have. So, I'm going to I'm building out some more demos with this because this is right down my alley. Yeah, it 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. Uh yes. Yeah. Really stoked. 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 align center or or what is it? Text wrap balance, you know. Absolutely. 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 in. 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 nextg interfaces. 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 before that brought grid lanes 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 at@ container sidebar 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 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 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 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. Oh man, I think that that is awesome because like we have at scope in CSS now and I I ended up I tried using this for uh a project I was working on the other day and like it just didn't feel right um really. 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 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 then there's style queries as well coming to container queries. I am in that that is awesome. So that's just called name only container queries. Yeah, it's hard to actually find anything about this. I saw it because Chris Koyer had a tweet and then um uh front-end masters had a post on it and then I'm start looking for what the support is and I could only find it in GitHub issues and stuff. So, uh, 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 or 26.4, 24.6, one of the 26.4. Yes, there we go. Okay. And if you want to see all of the errors in your application, you'll want to check out Sentry at centry.io/sintax. 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 centry.io/sax. Again, we've been using this tool for a long time and it totally rules. All right, man. I am in. There's so much of CSS that doesn't get the like props that it needs to. Um, 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. 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 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 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 in in the WebKit docs. Apparently, it was only ever supposed to be associated with a user interaction. Like, same thing like opening up a popup 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. Sorry. 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 uh Apple intentionally like limits the browser APIs because what they don't want people abusing they don't want people abusing it. But you're not going to tell that to the native developers. We don't want you abusing it. Like come on. Instagram abuses it. If you scroll through people's stories every time like a friend likes that story as well. It goes 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 10 1002 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. Um, and then I also have to make something seated random because if you're doing server client rehydration, it needs to be the same amount of random um on the server and on the client. So then you have to get into seated random. So it's, you know, it's 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 awesome. I don't know it 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. Yeah. Yeah. Neat. I have a one here which is search text which is a new pseudo selector. So colon search text or there's a what do they call it when there's a double uh pseudo selector cuz you can do colon search text colon current as well. So it's like a second layer to it. I guess that's pseudo class. Those are just that's just stacking pseudo classes, right? That's no different than active and hover. Yeah. 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 in 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 can now style that however the heck you want. Oh, which is really 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 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? That's great. I like that a lot because yeah, how 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. 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 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. I wish that the browser would say ah I have changed the markup on the page therefore I will rehighlight what is going on on the page. Do you think it's a just a virtualization issue or is it like always just the DOM not having the 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 to the thing. So you need to be like live searching every single time the DOM updates. Yeah. Word sticky both ways. Uh Una had a post the other day where Chrome 148 sticky positioning now works on a peraxis basis. So sticky headers in CSS, when you scroll, you're able to stick them to the top or or offset them certain amount, but it previously has only worked in one access, meaning that like you can scroll left to right or top to bottom. Um, and now they work in in both directions, which is awesome for specifically for uh like conference layouts. Uh 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, tables is one of the hardest things to do well on mobile and this will certainly improve that. Yeah. Yeah. I I think this is dope. Again, just more more stuff that we uh more stuff that we need here. It's just little paper cuts that are are being paper cuts. Yeah. Uh, another one with little paper cuts here is this multicolumn fixes. So, we all know multicolumn CSS sucks. U, 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 okay having divs where you're se uh segmenting the text into different divs. So this would be long 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. Uh this is an API again that I I I pretty much avoid using uh but it definitely has its use case and and happy to see that it does in fact uh exist uh and and like working in a way that probably should have worked from the start. Yeah. Yeah, I agree. the columns has always been like kind of not great. You know, it it works okay, but here and there. And you have to think like a lot 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 I guarantee there's somebody who is like, "Oh, I work in publishing and we lay everything out in HTML and CSS and uh we need like this weird print stylesheet hack to make it work and like finally this is going to going to 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. Border shape. Another one from Una. Border shape 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 the Mad CSS website, I used it for both for these ones right here. You see these little cutouts? On the the tickets. So, I like I replicated like what a ticket would look like and then I used border shape to cut out the corners. And and that's been doable before with um 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 just use regular CSS borders and it will just bite right into them. Yeah, there's so many cool things about this API Gest Man. Not everybody when it first came out, everybody's like, "It's Squirles." And I was one of those people. It's Squirles. But it's more than squirles. 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 shape property in there. Uh just to be a little small right now. Uh let me try. Let me try. Let me try. Okay. I'm not going to look at your screen. Uh, squirle 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? Super. Squirrel. Bevel. Oh, I am missing one. I just saw it. I'm missing notch and round. But although I think round's the default one, which probably the default. scoop, bevel, notch, square, squirle, and super ellipse. So, all of these values, bevel, scoop, whatever, or whatever, those are just like nice short hands, and then you can literally make anything with a super ellipse. So, it has a squirle is just a super ellipse with custom values preset on them. Big fan, man. One thing about MDN is they got to make their demos look cooler. Yeah, 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 I don't think I've any 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 look like see that maybe is one good. But that's not even that's not even the API. It's not even good. I 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. This is the cool one that I did find. So this guy on CSS tricks made a Oh yeah. Right here. Oh yeah. Yeah. Paper scroll tombstone. Yeah. Video game style repeating border images. So this next one is something that's really neat for animations in the browser, which is element scoped view transitions. So you uh you are able to basically give a view element name something that uh is scoped to that element specifically. And then you can have something called a view transition group contain and then a uh 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 yes you're able to have them be grouped and and scoped essentially it's very just like one of those quality of life things. Uh again, a lot of people are reaching for JavaScript for animations and this gives you the ability to really control them a bit more. I did this like if you have any sort of UI where you are adding and removing cards like that's a very common thing to do. You know, you got a like a 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. Um, and now you can simply just say anything that is like an LI element, give it a view transition name. Um, and then you can animate those in and out or or reorder them or anything like that. It's it's true cuz 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 is this is new. Maybe I was using it in in Chrome Canary for a while and just living in La La Land for me, but it was just a just a fun demo. So I hopefully soon we'll be able to use this with it says stable by the end of March. Um 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 and 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 you think. Peace.