Less Cruft, More Power: Leverage the Power of the Web Platform

I'm here to talk about the web. I saw that a lot of you were React developers when you raised your hand earlier. Who else here is a web developer or designer? Raise your hand. All right, my people. You're in the right place. So I'm here to talk to you about a few really powerful features that will level up your developer skills, and those are CSS and HTML, which I truly believe are the underdogs of web technologies.

And because they're so underrated, I thought it would be fun to make a little trailer for the web platform and CSS. So enjoy my little trailer. Can I get some audio? I'm a master of the universe. I am Adam. Developer. And defender of the secrets of my code base. This is my app. My fearless friend. Fabulous secret powers were revealed to me the day I held aloft my magic CSS. By the power of the platform. I have come. My app became the mighty battle. My app. And I became He-Man. The most powerful developer in the universe. So my voiceover career is a work in progress. But this, too, can be you if you master the powers of CSS and HTML. And specifically, CSS is getting a lot more powerful and a lot more declarative. So I think that the best way to level up your developer skillset is to take advantage of modern UI capabilities. And I think that this is very much true, but hopefully, by the end of this talk, you will also be a true believer.

So why care about CSS? The first reason is that it lets you separate your logic from your styling. You don't have to mix all of that styling capability in your scripting where it doesn't make sense for it to live. The second is to reduce third-party dependencies. So a lot of these features that I'm going to talk about, right now, we either have to hack around or it's so hard to hack around that we just have a third-party module that we have to pull in and then manage that. And if that breaks or moves forward, it's just more cruft. The third is reducing maintenance, cost, and complexity. Again, with your code, whether you wrote it yourself, or with the third-party dependencies, which make it easier, also, to just build stuff, make your life easier, build things faster. But number four, which I think is a really important point, is it makes it easier to build accessible interfaces which I know is a big challenge. It's really important to care about web UI for all these reasons.

So today, I'm going to cover three features that I think are awesome examples of how you can make your life easier and reduce complexity in your codebases by leveraging modern UI. And the first is scroll-driven animations. I'll also be talking about the popover API, anchor positioning, and I'll do a time check. If we have time, I'll talk about select. If not, come find me after. But there's a lot of cool stuff on the platform. So let's start with interactions. Scroll-driven animations are a really cool new feature that has landed in Chromium and is currently available behind a flag in Firefox. It is a little bit more of an experimental feature right now, but I think it's a great progressive enhancement. So, as an example, here's a little demo that I created which uses scroll-driven animations to create this kind of round display with a little bit of a on-snap animation as you scroll through. You can also do things like this, where as you're scrolling this text is just kind of popping in this little block quote right here. You can have images appear using a clip mask. You can have things unfade from maybe a grayscale into color. And there's a ton of things that you can do with just a few lines of code using scroll-driven animations. So take the example of this block quote here. What I'm doing is, instead of having additional dependency, writing JavaScript to do this, I'm writing a CSS keyframe. It's a keyframe called fly-in where I'm just updating the opacity and the translation from negative 100 pixels off to the left, back to the center here. So that's all that this is doing. We would write this like a CSS animation where you say animation, fly-in, you call it, you set the timing of it, and it's a linear duration, and then the differences start here where I set the animation timeline to the view, so where this element intersects with the scroll port, so in this case, it is the view port. And then I can also set an animation range. So I want this to start at zero and then go to 50%.

And at the 50% point right there, it's finished. So that's all it takes to create this kind of interaction. And here's another example with just these little boxes kind of popping in. So this one is animating scale and opacity. Same thing, just a couple lines of code. And I'm doing this towards the bottom of the screen. So I see these all over the web, and this is a website that might be familiar here. I notice there's a lot of scroll triggered animations on this site. So right here is one example.

We also have these photos popping in, and right now they use scripting to do so, and there's a bunch of transforms that happen in the web page. But you can recreate this effect with this technique where I have these key frames that update opacity and transforms, and as I scroll down, you see all of these nicely popping in, all the little tags here, just towards the bottom of the screen. So we can do things like this really fluidly now by leveraging the power of the web platform. And I talk about progressive enhancement because in non-supported browsers, you'll just get the existing experience where things scroll into view without the extra animation. But with this, you could just add a little flare. And you can also wrap this in a user preference query for prefers reduced motion, so you're not adding a bunch of animation for people who don't want it. So that would look like this, where you have add supports, animation timelines, scroll, and then you could have all of your content.

So another example of some things you can do is this effect, where have you ever created this scroll to top button? So this uses a technique where I'm actually setting a timeline name. That's another thing that you can do. So on the HTML, scroll timeline name, a root scroller. Then I'm calling the animation timeline right here by the animation name, and I'm animating it using opacity and display. You can now animate things from display none to display block. That's pretty cool. There's nothing that exists here. Once the animation starts, it will start to appear up here. You see my cursor kind of changes here where it's going from display none to display block. So that appears, and it also updates the opacity, and we can do all these animations, have it actually existing on the page, and create this sort of scroll to top button, no JavaScript required, which I think is pretty cool. I love talking about using less JavaScript. Some other cool things that you can do are overflow and scroll detection. This is where you can use scroll-driven animations as a hack, and I've seen some really cool examples of this. My colleague Bramice has a blog post all about this.

Roma Komaro does some really cool demos all around using techniques like this too, so check those out. But essentially what we're doing here is we're using the key frames to create a Boolean value. And here we're basically saying that you want the initial can scroll value to be zero, and then if there is a scroll, if there is a scroll that will then trigger this animation, update can scroll to one. So the scroller is itself. You're setting this animation up to detect scroll, and you're updating the Boolean value from zero to one which you can then use in your styling.

So you can do things like this now where you have this can scroll variable, you've set it all up, and then you have this line of code that's styling the visibility of these little indicator arrows. So they appear or disappear depending on if there's scroll or not. And what's really cool is I can show you this is all dynamic. This is all just dynamic in the browser. And as I run out of space here and there's more space, those arrows will appear. So all of this can be done with no JavaScript whatsoever using this technique which we are calling space toggles generally in the community. These Boolean values that can now be used in CSS using some of these capabilities, no JavaScript needed. Super, super cool.

Another benefit of scroll-driven animations is that there is a performance boost if you're animating values that can be composited like opacities and transforms. So rather than using JavaScript to create some kind of scroll animation, using these new APIs, whether it's CSS or JavaScript, is a lot more performant. And we've seen this from partners that we've worked with. Some really big updates. We've managed to reduce up to 80% of our lines of code compared to using the conventional JavaScript scroll events and observed that the average CPU usage reduced from 50% to 2% while scrolling. This is a quote that comes from Tokopedia from a senior engineer, Andy, which is wild, like, the amount of up changes this has allowed by leveraging the power of CSS. Yeah, pretty cool, pretty cool.

So rather than using JavaScript to create some kind of scroll animation, using these new APIs, whether it's CSS or JavaScript, is a lot more performant. And we've seen this from partners that we've worked with. Some really big updates. We've managed to reduce up to 80% of our lines of code compared to using the conventional JavaScript scroll events and observed that the average CPU usage reduced from 50% to 2% while scrolling. This is a quote that comes from Tokopedia from a senior engineer, Andy, which is wild, like, the amount of up changes this has allowed by leveraging the power of CSS. Yeah, pretty cool, pretty cool.

So UI components is the next section that I want to talk about. And has anyone here heard of the popover API? Raise your hand. Okay. A couple of you have, which is awesome, because it is now available cross-browser. Every single modern browser engine now has implemented the popover API so it is pretty much available for us to use. This feature gives us a ton of awesome features like built-in accessibility, optionally like this, and I'm going to go over those in a second. So now we have popovers on the web. I'm kidding. But really, this is what we're trying to create. We see these everywhere. They're in every UI. I call this layered UI because it's a layer on top of the rest of your page. Just even styling drop-downs shouldn't be this hard.

But we see this everywhere. So with popover, this is an attribute that you can put on an element. You get something called promotion to the top layer, which is a separate layer above the rest of your page. It sits next to your body so you don't have to fuss around with the Z index any more, which is awesome. You get light-dismiss functionality if you're using popover equals auto, which gives you that click away to close functionality for popover, and it also returns focus. You get default focus management. So you can have your popover be a separate component in another part of your UI, and when you tab into it, the next tab stop will be in that popover. So that's super, super useful for accessibility just in terms of tab focus management, and as you're building components, you often might have it as a separate element that you're using to connect to a button or something like that. We have keyboard accessibility that's also built in. So hitting escape or double-toggling will close the popover and return focus. And, finally, default component bindings that connect a popover to its trigger semantically.

And, yes, you get all of this with just one HTML attribute. I love the web. So we no longer need React portals! Yay! So dialogue is another element that's really useful here. I'll also talk about that in a minute. But with dialogue and popover, we pretty much don't need to have another special effect that has the ability to trickle up your components to your DOM. Like, this is built into the browser.

So to build a popover, super, super easy. Essentially, you need a button. Then you set a popover target to the element that you're using to open that to the popover. And you have a popover with the popover attribute and an ID. So that's it, really. You just have something that you're using for the popover. You give it a popover. You give it an ID. And then you're connecting it with popover target. Very declarative. I love that syntax. And then you get this, the ability to click away, dismiss. You can tab in. I can hit spacebar. I can hit spacebar again to close it. And all of that is built in. You don't have to manage all of those states. It's a lot of management to do this yourself. There's also manual popovers where clicking away is not going to close it. There's a button that I click here. And that gets a popover target action, and a popover target. So you can do a lot of stuff with popover. It's really flexible, this API. And you might already be using popovers, because one of the most popular developer websites, GitHub, is already using them in production.

Here's one example of it, which is in the new menu. Also in the PR review, a little opening, a little dialogue, that's also a popover. And they're using it with the polyfills. So that's how they're leveraging this feature, but also targeting older browsers, by using the odd bird polyfills. So check that out if you're interested in using this API today and making it work for your browser support matrix.

So we have popovers now. But animating popovers is a separate feature. And there's a few capabilities that have landed to support this. With varied browser support. Currently they're available in Chromium for a while, since last summer. They just landed in Safari, most of these features, like last week, in the latest version. And they're not yet available in Firefox. But this allows you to do things like have these animation states in and out for popovers. Which also wasn't possible before, because essentially you have to teach the browser what the styles are before they come into the page.

So it looks a little complicated. I think the best way to think about this is, OK, you need this before open state. So that happens when the popover is open. You're styling on popover open. But you have to have the starting style. So your starting style is, in this case, coming in from the bottom up. So it's going to be translated 20 pixels and going up. And the opacity is zero. Then you have your open state, which is sort of the resting, or default, state. And the exit state, which is going to be on this popover, which is going upwards, negative 50 pixels. So you write all of this. And then you use this allow discrete keyword, which lets you animate display. That was one of those things that was also new for this, animating the display to and from display none. So you use this keyword to enter this new animation mode and create this capability. You can do things like this now without any JavaScript at all, which is the menu navigation that we see very often, which you can also tab into, hit escape to exit. And this is all done also by just using a translation.

We're translating this layer on top of the rest of the page. This is a popover menu. You can tab through it. One thing to note is that popover won't trap focus. So that's just something to keep in mind. This will cycle back into the rest of the page and then go over into the next element.

So there's a couple of things that are nuances for popover. Popover also works really well with anchor positioning. Anchor positioning is an API that lets you connect two elements together. And that's a super, super powerful feature. Before I get into anchor positioning, though, I will say with popover too, it's important to add semantics yourself. So in this case, you want to make sure that you're adding semantic roles for it to be a menu. You want to make sure that you understand what is happening in terms of how it's connecting to your user and managing focus.

It's not focus trapping. If you want to focus trap, it's best to use a dialogue, which will inert the rest of the page, make it so that users can't interact with the rest of the page and force interaction with that dialogue first. With popover, this is great for things like non-disruptive content, drop-downs, tool tips, menu navigation, things like that, but there's also the dialogue element, which is great for anything that you want to trap that focus into. So, anchor positioning is a little bit more of an experimental API, but it recently landed in Chrome and I'm really excited to see commits from Safari and Firefox happening in the browser. I'm eagerly watching those commit logs. This is such a useful feature, and it allows for you to essentially tether these elements to each other without any additional scripting. So if you use popper.js or other APIs, you no longer will require that additional dependency to do this really complicated math to essentially create these effects.

So the way to create anchors is to set up an anchor name. So you set up an anchor name on this button, and then you use position anchor to connect it to your popover or to another element that you want to anchor. It does not have to be a popover. Then you can position it with positioning like bottom and right. So here we're setting the bottom of that anchored element to the top of the button, and then the right of it is lying to the right of the button. So you could do it like that. And you can do a lot more with it too. So one cool thing is you can layer these. Have you built menus? Who here has built a menu? Raise your hand. Okay, that's a lot of us.

I'm sorry. I have also. It's really easy to create these menus and submenu navigation too like this by using anchor positioning. And this is one way that you can really show the power of this feature because, so, say I have a submenu. I have it anchored to this menu. I can now use something called position try to reposition it based on the viewport and available space. So if I resize this, without any JavaScript, I'm actually having viewport detection built in here where I've essentially said that I want to initially position this to the left and at the top of that popover, and then I want to use position try options. If there's not enough space in that direction, then I want to change this to be at the bottom, so I'm essentially moving the top of it to the bottom of that popover. I can change the margin.

Here I'm adjusting some of the margin. And all of this can be done in CSS, no JavaScript needed, with anchor positioning APIs. So cool to see. So there's a few other features here where you can use position try options like I showed. There's a feature called position try order where you can tell the browser how to order these options, but there's also a few keywords that you don't even have to set up yourself to. Another neat thing with anchors is multiple anchors. So you can actually anchor to multiple elements. So in this case, I'm using the anchor function to anchor the top left to the bottom right of the anchor of this element, element number one, or anchor number one, which is right here, and then the bottom right to the second one, so anchor number two here at the bottom right. So all of this is like another way to use anchors. I've seen people create SVG effects to create little diagrams, dialogues, and tree views using anchored elements. So just one example here of a non-popover anchor.

But with popover, it's so great because you're in the top layer, so trying to get back to it is a pain. And there's a new layout feature that landed with anchor 2, which is called inset area. Inset area is super, super powerful. You can essentially just use English to say, I want to position this at the top and then span left. So I created this tool called AnchorTool.com that shows you how to use inset area, and I plan to expand upon this. You can also do this with logical properties if you wanted to use different languages and show how this works across different reading modes, too. So all of that can be shown. You can just copy and paste this for inset area positioning. And I also am showing here the inset modified containing block. I'm not going to go into too much detail here, but essentially, when you're working with anchors and inset area, you're using something called the inset modified containing block to position these things.

You can visualize it here with this tool. So you can see how there's a difference here from this block, start center, or from top center to top, which is also top span all. So it makes positioning really, really, really straightforward. And in this case, instead of using those bottoms and the margins and the calcs, you can just say inset area, top span left and have all of this work really clearly.

I mentioned those autoflip keywords. Position try options is something that you can either write yourself, so using the position try at rule, or you can use these defaults of flip inline, flip block, flip block, flip inline. So to create a fully functional responsive to the page popover, oh, I think my demo broke here, this is all the code you need. You just position it at the anchor. So you can just position anchor top at the bottom. And then you have position try options, flip block. And you can just justify it and have all of that logic work and the anchor sort of work and resize and flip. And then you can combine these with other features.

So in this case, I'm using trigonometric functions, I'm using transitions, I'm using all of these cool features that CSS provides us to create this sort of menu that trickles open. And it looks like this right here, where I'm anchoring it to these elements. And essentially, I'm able to now style things on a radial plane instead of a linear plane in the web. And this was really hard to do before. But with trigonometric functions, with the ability to calculate things using math in a way that we never had before, like this is a Pinterest menu that I wanted to create, and it's totally possible with just a couple lines of code, thinking about things outside of just linear math.

Like this is the way that I see the future of UIs, thinking more organically, in a way that sort of excites users for the first time in a long time. I'm kind of tired of seeing the flat design stuff, but we have the tools now to make it accessible, to make it usable, to make it interesting, to bring back some organic styles to the web platform. So what's next for popovers and dialogues? One is invokeTarget. This is a way to create declarative invokers. So as you saw with popover, you can just say popover target equals and then connect those two values. You can't do this for other elements like dialogues yet, or things like inputs for color, but that is a feature that is being discussed and worked on to just give that sort of declarative functionality across the web. InterestTarget is another one. If you've ever used GitHub or Twitter, you know that there's this cool effect where you hover over like an icon and it shows you a preview of the profile or other things. This is something that's really, really hard to do accessibly, really hard to implement, so we want to make it easier for web authors is sort of showing interest on hover or focus to open something like that. Like Wikipedia, they do this on links. You currently have to use a button for a popover, but with InterestTarget you would be able to use links as well.

Like Wikipedia, they do this on links. You currently have to use a button for a popover, but with InterestTarget you would be able to use links as well. And there's more things that we've been talking about. We know that this solves a lot of use cases, but not everything, so we want to make it easy for you to style that little arrow connector. We want to make it easy to sort of slide into the page, breaking out of the inset modified containing block. There's a lot of work to still be done for anchoring, but I'm really excited with where this is going.

So I definitely don't have time to get into select, but come and talk to me about it later. Styling selects is a huge need for the platform, so I'd love to talk to you about it.

But another cool thing that I want to highlight is that this entire presentation was built with just CSS and HTML, no JavaScript in this entire framework for the whole deck. And this is fully possible. I'm using just content editable styles here, so I can change the background to hot pink if I wanted to of this page.

I can go through, and this is literally just a content editable code block. I can change all the code to font family, fantasy, and then all of that automatically updates, and you can see it trickle throughout the entire presentation. You can see scroll snap here is now in fantasy font. My favorite programming font. I'm using scroll snapping and scroll behavior to just make this effect look nice. Essentially just a really long scroller, and there's a lot of cool stuff I'm doing, too.

So access key is just some HTML that I can use with control option, you know, one, two, to kind of go to different parts of my page. This is all built into the browser. These are things that I think people just aren't aware of, and they're super, super useful when you're building UIs to get creative. And another cool thing is that CSS and HTML work in every framework, so you don't have to worry about making decisions that are relevant today versus tomorrow. This is always going to be relevant, always going to be backwards compatible, and even if your company uses multiple frameworks or you're thinking about weighing one or two, you can always use these core platform features no matter how you're building. Without any dependencies, that's always a plus one. One less dependency, and it really makes it easier to build on the web.

So I say leverage the power of the browser. That'll help you reduce complexity and improve your developer velocity, improve your creativity. And if you want to stay in the know about all of these things as they land, check out these two publications. It's where our team writes about new platform features, web.dev and developer.chrome.com. Thank you so much for your time. You can find me on the internet here. I appreciate you. I can't wait to see what you build. Thank you. I have a question, because I really enjoy the fact that when you use CSS, when you use some of these things which are just in the browser already, you can just decrease the amount of JavaScript you need to write, and you can actually do some things without necessarily affecting performance. Yes. But my question is, how do you decide which things should be handled by JavaScript, which things should be handled by CSS? Is there a way to make that choice? I think that's a really good question.

For me, my question that I will ask is, is this presentational, or is it something that is content-related? So if you're doing any kind of destructive action, editing on the page, any kind of user action, that feels like it should be in scripting, because it's logic. If it's simply presentational, like a way to make something appear or scroll or style a color or a button, that should be in your styles. Separating logic from styling I think is a big goal of all of this initiative in pushing the web forward.

No, for sure. And this is really, really cool, because I think you practice what you preach when it comes to your slides. Your slides actually use the tools you're talking about. So really, really cool.

All right, questions have come in. So the top-rated question is, what are some of the wishlist features you'd love to see land on the web platform? That's a good question. First of all, I would love wider browser support for anchoring. That's a big one. We just saw Firefox land at properties, so we now have semantic custom property values across browser, which is awesome. Another one I would like to see that I've recently been talking about is sibling index, so the ability to know what child you are within a list and be able to style things based on that. You could do staggered animations, staggered color themes, things like that. That one would be really cool. But there's a lot of features I could talk for days, but really, styling form controls is a big one. Styling drop-downs. We need that.

Well, I mean, this just bounces off of that features question really nicely. Because you work in Google, so you kind of have an insider's view, and since you do this, this was Hazem's question, thank you. How hard or easy is it to push new web platform features across browsers? So I think there's kind of two parts. How hard is it to get the new ones into Chrome and then get other browsers to adopt them as well? Wow. It depends. It depends on the feature. Very heavily. It really depends on how complex the feature. So with anchoring, that one is really complex because you have to think about how does this interact with scrollers? What about sub-scrollers? If you have a sub-scroller within the page, how do you manage presentational view? With HTML, you also have to think about user-agent styling. So what is the default style? Do you spec it? Do different user agents like Safari and Firefox have different presentational views? So there's a lot of complexity with some of these features. Container queries is another one that has a lot of complexity to implement. You can't have cyclical dependencies. That's something that you run into often. But really, it depends on the feature. Some of them are easier to implement than others. Sometimes, we have syntactic sugar. Like the HasSelector seems very complex. It's a very powerful selector, but it's essentially a syntactic sugar over is and where with the IsSelector. So some things are harder than others.

For sure. There's no great answer. I understand. All right.

We are out of time, but people really want to be able to copy your slides. I'm amazed. Where can we find a repo for them? On GitHub, I do have a repo of these slides. Awesome. If you come find her at the Q&A chat, you can ask her.

Give her a massive round of applause, ladies and gentlemen. Thank you, everyone. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.