 Hi, I'm Yuna Kravitz, a developer advocate on the Chrome team, focusing on CSS and DevTools. I'm really excited to chat with you today about what many regard as the future of web styling, CSS Houdini. Houdini is an umbrella term that describes a series of low-level browser APIs which make it easier for authors to access and extend CSS by hooking into the styling and layout process of the browser's rendering engine. This means that developers now have much more control and power over the styles they write. For example, instead of waiting for a browser to implement an angled borders feature, you can write your own paintworklet, apply it to both borders and clipping, and get in effect just as you would with a rounded border radius. Instead of waiting for a browser to implement masonry, you could implement a layout worklet to imitate this browser-based implementation, or you can use an existing one. And beyond worklets, Houdini enables more semantic CSS with the typed object model and enables developers to define advanced CSS custom properties with syntax, default values, and inheritance through the Properties and Values API. Today, I'm going to be focusing on the CSS Paint API, which is supported in all Chromium-based browsers, is partially supported in Safari, and is under consideration for Firefox. However, don't let this native support discourage you because with the CSS Paint Polyfill created by my teammate, Jason Miller, you can still get creative with the Houdini Paint API and see your styles work across all modern browsers. So let's focus on the CSS Paint API today. This API enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. In the angled corners example I just showed, it's being used as both a mask and a border to draw the border as a border image and mask the element to prevent click interaction effect overflow. There is a whole world of possibilities for how you can use CSS Paint in your own user interfaces. To make working with a Paint API and other Houdini worklets a little easier to explore and consume, my team puts together a resource called houdini.how. It's your all-in-one go-to for CSS Houdini worklets and information, a congregate library, and a reference. Let's check it out. You can learn all about CSS Houdini itself with links to further reading on the About page. Here we list all the Houdini APIs with some really great links for further reading and if you're interested in exploring these a little bit more. There's also this link from ishoudini ready yet where we have a list of all of the browsers, the W3C spec and links to both the spec drafts, recommendations for Paint API for example, it is in candidate recommendation states and also the level of support and whether it's in development under consideration. Whatever's going on with Houdini, this is a great place to check that out and get that information. On the worklets page, you can browse various Paint worklets and play around with different values to make sure they fit into your brand. So here is just an inspiration page where you can see some of the possibilities here, using it as a border, using it as a background. You can make some like really cute little confetti or you could make it really big. This is just another example of how you can use it. But I have one underline when you can have many underlines. So this is an example called extra underline. You could change the width, the spread, again, the color. There's an example of reverse border radius where instead of the border radius coming from the inside out, it's doing the opposite. It's creating this clip, which I think is cool because it reminds me of vintage stamps or like tickets. So I think that one's neat. There's also this powdered gradient. You could change the direction, the color. You could really play around with it. I like it in white because it's kind of festive. There's also the sparkles example. You could change the number of sparkles, the hue. So you can have sparkles of every color, the height and width of the sparkles. That's changing the size and the weight. So you can start to really play around with these sparkles. There's also that angled corners example. So here you could make all these corners different sizes and start to explore what that might look like and change the weight of this as well. There's the static gradients. And I think this is really fun because the more you increase the gradient size, the more you're sort of pixelating it. And it reminds me sort of like a little roaring fire, especially as it's re-rendering and animating with this randomized function. So I think that these are pretty neat. As I mentioned earlier, despite native implementation, these all work cross browser thanks to that Houdini paint polyfill. So have no fear and feel free to get creative with CSS Houdini. And when you found the right worklets that you wanna use or expand upon in your own applications, there's a few ways that you can use it and implement it into your build system. So the usage page here, we'll show you how. To quickly get started with a prototype, we recommend using unpackage. So just calling it the paint worklet directly and registering it to your application. But when you're using it in production environments, you'll likely want to manage the worklet in your file system. Here we have just in a code pen, this example with the confetti worklet. This is called extra confetti. What I'm doing is I'm directly adding it to my system with CSS.paintworklet.add module and I'm getting this CDN link. I'm also including the polyfill script and I'm using unpackage to manage that as well. This is just a really quick way to get started. And the way that you get that link is if you go to the worklets page, this right here, the CDN link, you could just copy link address and there you'll have it. So let's go back to this example. From there, we can then update the CSS. So here we have a few of the values. They will have fallbacks and defaults, but you can update them to make sure that they look like you want them to. And you could really start to play around here. Now, another thing that you can do is animate this stuff. So here is just an example of a keyframe animation in CSS that's just going to change the number of confettis from 60 to 65. And this will enable us to re-render this and create this sort of animated effect. So here, let me just quickly create an animation. We're going to call confetti, let's say 0.5 seconds. Let's say infinite and linear. And then once I do that, this will now start to animate. And we'll see just this little playful animation of confetti just kind of playing around on this page. If I wanted to change this worklet, again, I could just go and copy the CDN link. If I wanted to change it to sparkles, I could just copy that link address, bring it back here and then create this sparkle effect instead of the confetti effect. Now, when it comes to working in more production environments, you'll likely want to manage these worklets yourself. And in this case, you can install them via NPM. So if I check out this worklet page, let's see what worklets we want to use. This static gradient worklet, I think it's pretty cool, especially as I mentioned in these wider sizes. So I'm just going to copy the name here of the NPM worklet, which is the name that we have listed. And go to VS Code where I have the create, react app baseline sort of just loaded up here to play with. And now I'm going to NPM install this worklet as well as the CSS paint polyfill. And I want to make sure that I am saving it to my local dependencies. So now NPM is going to download this and register it, add it to the package.json. And from there, we'll be able to reference Houdini static gradient and CSS paint polyfill. We're also going to be using a file loader for this. This way, we'll be able to separate the worklet file and keep it individual and not mix in with the rest of the JavaScript. So if I check the package.json, we can now see that the CSS paint polyfill and Houdini static gradient have loaded. I can go to my app.js and reference them. So let's first import the CSS paint polyfill, it auto fills because it's reading it. And then let's import this worklet URL as a variable. So let's do import worklet URL from and here I use the file loader and I am calling Houdini static gradient. Now we'll be able to reference the worklet URL when we register the worklet. So I'll do CSS.paintworklet.addmodule and here I can call worklet URL. So we are now registering the worklets into our file and our application, which is great. But we're not going to see anything until we first start the app. But secondly, we have to go into the CSS and add it in our CSS. So we have this app started, it's loading here for the first time, so it takes a second and there is the react app up on the page. So let's go into the CSS and let's change this app header from just this blue background color, which we see here to having a cool static gradient background. So let's adjust this file here and we'll add the paint and we'll call static gradient and let's do a static gradient on top of the color that's no longer a background color, it's a backgrounds and let's also change the static gradient size. So this is a custom property, static gradient size, I liked that 10, I thought it looked cool. So I'm going to hit save now, I'm going to open it here and there we see that we have this static gradient background now being added to our UI, which is neat. But this is also really loud so we can open up DevTools and start playing around with this. There was another variable called static gradient color. Let's just set it to red really quickly to debug it. So now we have this whole box that pops up and here you can use all of these neat DevTools to find the right color and effect. I think something a little bit more subtle like this could be nice, I'm just going to copy this hex code, open up my VS code again and I am just going to add that variable. So static gradient size, let's update this to color and just paste the hex. So now when I open this, we see the static gradient background. I'll just refresh the page to show you that this is going to render in the custom properties that we updated. So I also wanted to quickly show you that this will work in Firefox. Here I have Firefox pulled up and in Safari. So I'm just going to open this up in Safari as well and drag this into view. And here you could see that we have this CSS Houdini Paint Worklet effect working across browsers with the CSS Paint Polyfill doing a lot of the heavy lifting. This is also a community-driven effort so we're looking to add your contributions to our Worklet Library too. If you have a Houdini Worklet that you've built or you wanna play around with Houdini, this is a great opportunity to do that. Please feel free to submit a pull request and we'll be sure to get it on our page. The contributing instructions are in the GitHub and also linked below. And Worklets aren't the only thing you can submit. You can also submit a resource. So here on the resources page, you'll find a variety of different resources like articles, editor drafts, web docs and tutorials. There's some really great examples and demo sites. So if you find a great article or write one yourself, feel free to submit it. We'd love to have those as well. Thanks for watching this video on CSS Houdini and the CSS Paint API. It truly does open up a world of possibilities and hopefully Houdini.how can help you discover some of those possibilities. If you've been inspired by something you saw in this talk, please let us know and contribute your own ideas to Houdini.how. Whether they're Worklets that you've built or great resources that you've come across, I would love to see them. Thanks again, I'm Yuna tuning out.