Extending CSS with Houdini

Key Takeaways

hi i'm eunich 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 paint worklet apply it to both borders and clipping and get an 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 workloads 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 paints 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 put 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 is houdini ready yet where we have a list of all of the browsers the w3c spec and links to both the spec drafts recommendations for pain api for example it is in candidate recommendation state and also the level of support and whether it's in development under consideration whatever is 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 why have one underlined when you could 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 have sparkles of every color the height and width of the sparkle so it'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 can 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 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've found the right worklets that you want to 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 will 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.ad 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 or 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 i'm 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 workloads yourself and in this case you can install them by npm so if i check out this workload page let's see what workloads we want to use um this static gradient booklet i think is 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 gradients 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 mixed 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 autofills 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.paint module and here i can call worklet url so we are now registering the worklets into our file in 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 uh 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 background and let's also change the static gradient size so this is a custom property set of gradient size i like 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 dev tools 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 little box that pops up and here you can use all of these neat dev tools 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 this 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 can see that we have this css houdini paint worklet effect working across browsers with the css paint poly fill 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 workload that you've built or you want to 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 are 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 [Music] you