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 gonna be sharing with you today.

I didn't even know that this was gonna be a thing. I didn't even know this was an option. And now It showed up out of nowhere. Was opened up to me. Yeah. Yeah.

Scott, my brain has been opened up by some of these demos for this, so I 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 so the very first one I wanna 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 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 warp 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 and you can actually do it right to left or up to down, left to right. You could 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. 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 in we had what? Like, box pack fit in CSS grid, but it never was perfect, and and it didn't go the way you wanted, and it had to have a fixed height. There's 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 gonna 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 Wes kit post. This is available right now in the, as of Safari version 26.4, and it is behind a flag in Chrome and Firefox. So

Scott long off here. Really stoked about this one. Alright. 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 wanna, 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's some JavaScript APIs that will allow you to paint that HTML to the Sanity. 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.

You can use SVG Wes 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 Deno, this is totally unreadable for people who are not watching this.

It's a completely 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 kinda looks kinda cool. Right? I 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?

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, because maybe that's not what you want.

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

So here here's another example where I made a magnifying glass for a website. This. 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. Uh-huh. But and I'm I'm using a magnifying glass to to make that bigger and and slightly distort it. Right? Another one is frosted.

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, 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, I'm I'm doing that. And and this, again, you could have kind of done this before Wes 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.

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 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 in some work, but I think it's a a lot easier now. And then the other thing is that when you submit it, there's, like, scan ESLint 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.

And I thought that was such a cool effect. Even, like you Node, on iOS, when you bring up, like, Siri on Bos, where you Mhmm.

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 wanna simply push that Vercel, 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. So It's I don't know if Sony make it or not. It's so cool, though.

It's so cool. Yeah.

The just jelly slider right here? Like, we saw this demo on on Twitter a couple years ago or a couple weeks ago. Yeah. 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? 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, 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 Archibald

Wes like, if you wanted, like like, a old CRT TV Wes things are slightly what do you call that shape that the 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, Scott

kinda

that's Convex. Something like that.

Whew.

So cool. And, like, the 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 gonna 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, the stuff that we wanted to do with Houdini Node now you could kind of do. You could do all kinds of custom rendering.

Yes. Yeah. Really stoked about this. A lot of the Houdini stuff, like, never panned out. We and pnpm ended up making its way via things like like text align center or or no. What is it? Text wrap balance. You know? App wrap balance. 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 could 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 Node. So, obviously, you can't use this on any website, but everybody who saw this is like, yes. I absolutely need this thing for, making next gen interfaces.

Nice. I have one that you might not have seen here, and this one kinda flew underneath the radar. Firefox Node forty nine, Chrome one forty eight, and, the same version of Safari that brings was it 26.4 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, 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, 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 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 Node, and I 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.

Mhmm. 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 Scott, 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 their style queries JS welcome into 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 Coyier had a tweet, and then Yeah.

Front end masters had a post on it. And then I'm Scott looking for what the support is, and I can 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 one forty nine, Chrome one forty eight, 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 Sanity 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 to century.io/syntax.

Again, we've been using this tool for a long time, and it totally rules. Alright.

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, lot of this new stuff is not supported in Tailwind at all. So it's kinda hard, but there's so much cool stuff added to CSS that is super powerful.

Yeah. 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 Wes if you have an input type of checkbox and you give it a switch attribute, which is only supported in Safari Mhmm. 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 and 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 feedback on the web. So

thanks, Safari. Fuck. Safari. But, yeah, 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? They don't want people, like

abusing it. People abusing it. Node.

But you're not gonna tell that to the native developers. We don't want you abusing it. Like, come on. Yeah. Because they don't have to be 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 zero one hundred two will choose an even number between zero and one hundred. 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 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 Awesome. I don't know. It 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 Node here which is search text, which is a new pseudo selector.

So colon colon search hyphen text. Or there's a what 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 a second layer to it. I guess that's pseudo class. So those are just that's just stacking pseudo classes. Right? That's not Oh, yeah. Right. You're right. 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, 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, 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? 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 back space, and then it, 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. In that way, you can you can find it. But in many cases, like, Twitter doesn't wanna 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.

Oh. Una had a post the other day where Chrome one forty eight 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 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.

And now they work in 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 and you wanna 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,

more stuff that we need here. It's just little paper cuts that are are being solved. Paper cuts. Yeah.

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 Node, 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 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 say, 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 gonna wrap onto another line. So just giving you that flexibility and freedom.

This is an API again that I I I pretty much avoid using, but it definitely has its use case, and and happy to see that it does in fact, ESLint, and 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, kinda not great. You know? It it works okay, but here and there. And you 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 wanna 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. Border shape, another one from Oona. Border shape can handle both insets and outsets, 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 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 Yeah. 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, 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. That's not really something you could have done previously unless you, like, have, 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.

Congest. Man. Scott 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, 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. And, just to be a little devious right now? 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.

I'm, like, blanking whether or not the one that I had in there was fake or not. A Vercel?

Yep.

Am I missing one? Yeah. Super Licks, squircle, bevel.

Oh, I'm missing one. I just saw it. I'm missing notch and round, but although it's round, it's a default one. Which is probably the default. Scoop Yeah. Bevel, notch, square,

squircle, and super ellipse. So Yep. All of these values, bevel, scoop, whatever or whatever, those are just, like, nice shorthands, and then you can literally make anything with a super ellipse. So it has a squircle is just a super ellipse with custom values preset on them. Big fan. Van, one thing about MDN is they gotta make their demos look cooler. I Yeah. It's so hard to make a cool demo and not add a bunch of CSS that is unrelated.

But still That's probably what they need to do. But then also, like, I was looking at 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. That'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 JS, the cool one that I did find. So this guy on CSS tricks made a Oh, yeah. Like, right here. Like, one of these Oh, yeah. Yeah. Paper Scott, two of these stuff. Yeah. 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, 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 Wes 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 and scoped, essentially. It 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. 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 a, like, a a to do list, and you're adding and removing elements from it. Previously, you had to give every single one, like, a unique name.

And now you can simply just say anything that is, like, an l I element, give it a view transition name, and then you can animate those in and out or or reorder them or anything like that. It's 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 I this has been out for,

like, a while Node, I'm pretty sure. For element scope view transitions, it's in Chrome

one forty seven. 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. Mhmm. Just living in La La Land.

Work work for me, but it's just a just a fun demo. So like, hopefully, soon, we'll be able to use this with It says stable by the 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 code Bos today. Which of these APIs are you the most excited about? Which of them has tickled your fancy? What kinda crazy stuff are you gonna do with HTML and Canvas? Because this one, wow.

Very stoked about this. Let us know down below what you think.