Next-generation web styling (Chrome Dev Summit 2019)

Key Takeaways

[Music] so we're here to talk to you about next generation web styling and we've got oh wait hold on I was here to help twelve well I had the little Raptor anyway yes going well I'm a developer advocate on Chrome doing CSS and I'm a developer advocate for material design on the web and you can follow us online here as well as follow us in this journey into the future of web code so all of our demos that you're gonna see they are live screen captures so there's no trickery happening and we have links to all the demos which you can see right there a nerdy dev CSS a tedious and we're gonna start with some of the most well supported features and then go into things that are definitely coming in the future I'm gonna start us off with AA scroll snap notice that we have a little bar chart there under there tells you the amount of support that we have and we're gonna start with things that have great support and by the end we're gonna find things that have no support so Oscar I'll stab one of my favorite things here is that the support is great it's touch enabled 60 frames per second native scrolling for every platform there's no synthetic scrolling with scroll snap points and it's all organic it's not okay anyway whatever it's mobile and desktop for free and my pro tip with a scroll snap is make sure that you try to keep it horizontal because when you do it vertically it kind of feels like scroll hijacking so let's look a little diagram we've got our viewport is in the center each dot represents a snap point item and this is basically a carousel where the items snap to the inline start and let's see guess we will have animations so we have a horizontal snap point demo here this feels like a carousel we're looking at shirts by 10 huh NORAD Seattle artist and we have a scroll X so we have overflow container on the section we're snap starting we're throwing and we're allowing skipping so scroll snap stop or you can tell it to stop at one at a time in case you don't want to let them throw and it always settles perfectly so it gotta love that and did you know well I'm sure you did cuz I mentioned earlier you can do it vertically so here I'm doing vertically same CSS I've pretty much just flipped the X for a Y and I've told it to align Center because that just looks so good mmm I like it and here's the kicker did you know you can do both directions matrix's nap and basically you just say overflow and you know scroll snap type both and a line in the center and I want to call out to that over scroll behavior contain dots so if somebody hits the end and they keep swiping they won't the scroll event won't leak outside and go into the next item kind of cool all right so now we're going to talk about focus within which solves a lot of accessibility elements when you're focusing within those elements so if you wanted to create a menu bar often times we see menu bars with dropdowns or fly outs that occur within those list items so you could have a list that's inside of your navigation you could have some markup like this where you have let's say I'm one less item to inside that list item you have this unearth list with more items we see this pattern a lot and if we want that submenu here to appear or be displayed when you hover over its parent element we can apply some CSS to style it so it could look like this we're on hover or unfocused that elements because you always want to have a focus tile when you are creating hover styles we want to make sure that inside lists becomes visible and it has a display in theory we could then write code like this where we save visibility:visible with a pasty one display block but as we're tabbing through here we're actually not able to see the elements inside of that second list item which we've applied that sub list within and that's because we're using focus when you style with focus when you're tapping into the parents using that focus style you will have those children visibly appear but when you tab to the next tab Abul elements they disappear because we're no longer focusing on the parent so you lose that style now if you use focus within it solves those problems because you're actually telling the browser to apply that style when you're focusing within a parent element so that could look like this all we have to do is swap focus to focus within and when we tap through these over here you see that sub navigation appear and we've solved that accessibility problem cool demo I like it these are all the cool new media queries we have and I've said prefers star because we're we have a lot of preferences that we can bring to the table now we can consider our users preferences and adapt our UI UX to lean into those I also think these are kind of design surfaces new design opportunities these contexts and use cases the way that they work for all of us web heads is the browser is our proxy for all this the system and our platform sets these settings they trickle down into our browser and come in the form of a media query here's a quick overview of some of the device preferences you might see on Mac OS Windows iOS and Android these things get as cool as adjust contrast and font size and theme personalization right I love it super cool so here's our first one this one's pretty popular look at the support it's pretty good it's a hook to pacify movement for folks that are sensitive to movement and you have the option or no preference or to reduce the motion supports killer and have a fun demo that I want to show you real quick so we have an animation that's pretty wobbly we have mixing of colors happening but if the user prefers reduced instead of removing the animation I crossfade this is an important thing I want to share with you all that a reduced motion does that mean no motion anyway I thought that was a cool demo and so dev tools it's got your back in case you want to test it so just pop it open go to the rendering tab which you can get there from the like snowman that's on the left of console there and you can change the properties and tests your work it's super cool another one that's pretty popular which you might have noticed on the chrome dev summit site is for first color scheme light or dark so you can adapt your UI for your users preference on their eyes it's really hot right now my mom is on dark mode hi mom you're in my talk now and here it is again we have a little bit of code here we have a little demo CSS or CBS site is a good example of this and I have a hot tip which is to follow some of the the HSL patterns that we've seen with units demos so we'll have a code pen demo and that link that we shared and there you can just sort of flip a couple custom properties and watch the whole site pretty much invert super rad and again dev tools it's got your back and in here you can simulate both of those that you don't have to go into your operating system and click a checkbox and go back to Chrome and do it all right inside of here I'm showing that inside of Chrome Canary so make sure you're in Canary when you're checking right now so here's a bunch of media queries just a little fast pass for ones that are coming down the pipe and look at all these design opportunities for first contrast for first reduced motion forced colors and light level dim and now we hit can have users that say something like this I prefer a high contrast dark mode when in dim lit environments and we can do that with CSS we can handle that it's kind of cool anyway I love that browsers become so much more personalized to our needs and us as developers we can now create styles that work with our brand but also work for all those different preferences it's super cool so logical properties are another thing that allows for really speaking to your users in creating dynamic directional spacing within and around elements this is really important to maintain layout integrity across translations and writing modes right now in a left-to-right based and top-to-bottom based language like English we think like this we think about height and width and we think of top and bottom left and right it's kind of like this compass rose aesthetic here when we think about layout on the web both logical properties that sort of changes height becomes heightened with become block size and in line size left and right become the inline start and inline end and top and bottom become block start and block end you may be familiar with some of these concepts if you use logical properties within CSS grid but instead of thinking about layout like this top right bottom left with height and width we think of it like this in this new mental model and when we do this we actually get a lot back from the browser with these logical properties when we use them to write code the browser actually creates adjustments for us based on the writing mode and the direction of the language so when a left-to-right language like English margin inline start would refer to margin left in a right to left language that would be marching right in some Japanese typography that might be a margin top in a vertical right left language so we don't have to make all these calculations ourselves the browser's actually doing it for us so for something like a block start that would refer to the block flow on the page instead of the inline documents in the page and for here for both left to right and right to left languages the margin block start reversed to the margin top and for a vertical right to left language that would start at the margin right because the block flow would go from right to left without logical properties as you change the direction and writing mode the layout integrity falls apart our boxes collapse that border top comes misplaced the text is overlapping and it starts to look a little bit like a mess but with logical properties we can have the browser do that work for us when we're using logical properties in this layout instead of using height we've used block size and it says of using with we've used in line size and this allows for the boxes to not collapse when we're creating a vertical layout instead of the margin left we're using a margin inline start here on those headers and paragraphs so as we swap directions we still have the style of that layout maintained and finally in this main section here for the border we are using border block start and margin block start instead of a border top and margin top and that's what's making that border retain its spacing so you can write code like this or you can write code like this and it's the same amount of code same number of lines it's just changing the mental model of how you write it and the browser does all that great work for you to make that website more internationalized logical plot props y'all I there was a little hack I found it's not a hack it's just good shortcut if you do border block you can do borders on just the tops and bottoms can't really do that shorthand any other way so if you want a little sneaky way to get started with apps start there I made a tweet about it anyway this is about sticky situations this is a CSS sticky a really fun property that I like here's a sweet diagram and one of my favorite things about sticky as you can see that as we scroll so there's paper in a viewport there the item is in flow with the document but as soon as it reaches the point in which I've told it to stick with CSS sticky it gets locked into the viewport the page can keep scrolling until it comes back to the position at which was in flow and it becomes back and as a member of the page here's a nice little demo I call this one the sticky stack this is a classic sticky there's nothing tricky with the sticky just set in the top to zero anyway the HTML for this ends up being what's more interesting so I just have position sticky top zero there let's check on the HTML I chose to use the definition list for this group list and notice how the DT elements are siblings so definition list goes DL DT and then DDS or all the different artists there and this is why they share the same sticky space they're actually have the same parent so let's look at an example where they're cousins we get the sticky slide and the sticky slide is where one appears to go out while the other one comes in and the only difference this is the same CSS is that we have a different parent so our cousins aren't that's former cousins now and this is my favorite example this is sticky desperado and that's because the sticky element looks really desperate to hang out with its friends I'm like oh just go away real anyway only difference here is the HTML I got a display grid went sideways and it's still the sticky slide as we saw before I love those demos and they're all gonna be available at the link that we share so you can go there and use them for your navigations I'm really excited to also talk about backdrop filter this allows you to a style adjust behind an element not just on an element when you want to apply filters to that elements right now you can apply CSS filters they're great they're super dynamic they allow for a non-destructive layer transformation on top of any applied elements and often we see filters used on images but you can also use them on hover effects and transformations on icons links menu bars and even video if you wanted to a cool feature that I recently discovered in dev tools is that all of these values for the filters are actually prefilled so you can see what they do and what input arguments they take so I thought that was awesome hat tip the dev tools now when you're creating a backdrop filter it allows for you to apply those filter styles behind an element so here we're applying the backdrop filter of blur on top of a text element this aesthetic here previously was not possible that a bunch of weird CSS and JavaScript hacks to make this really work but now you can do it in one line of CSS so here I have a video where I'm applying this blur backdrop filter to that bottom left header and you can see that you can apply different properties to it you can use this for a blur or lightness or contrast or any of those filter types and so this can be used to increase legibility of a piece of text on top of an image and so many more things that were just starting to discover because we just got two semesters I'm so excited about it I do love backdrop filter it's all over viz bug looks good is selector so this is a modern new respect version of what we've had for many years any matches in fact it's ten plus years old it's super handy I'm a big fan and I'm just gonna show you a video because it pretty much sells the whole back yeah love it right here it's a what it's like BAM Oh BAM watch right away ah is I like you Hey what were you before it was great it was great still before right oh and now we have gap it's not just great gap its gap it's coming to flexbox that means this is the spacing between your children your kid your children don't have to have your kids I'm a dad your chin don't have shake we start calling nodes kids that'd be funny no don't do that yeah I agree I shouldn't do that and so on the Left we see what margin is doing and margin is where each child owns its facing and on the right we see gap where the container owns the spacing and we've all felt the pain of what it's like when children or imagine their spacing so I made this demo this is in the awesome Firefox dev tools we have a grid on top a flex box on bottom both of them are just using the same gap in the same definition and we see them competing for a better layout strategy here and one of the best things about this is is we see flexbox gap being an amazing amazing feature for us this is one spacing declaration instead of whatever might have been many so lobotomized owl I don't think we need you anymore you were great though until then this is a good demo here where we have the spacing between this matches the diagram that we saw displays flex flicks wrap and gap hey wrap and gap room and we can end the debate if our button when our buttons have icon left icon right and all these different members in the child button here we can end a debate by just putting a gap on it there's so many times I've hacked around gap that I'm stoked to see that in browsers I'm also super excited about CSS Houdini ating browsers whoa yes shout out to Houdini CSS Houdini is a low-level API for CSS that gives developers the ability to tell the browser how they want it to read and understand custom CSS this is what that looks like it provides developers access to CSS object model in a much more consumable way previously if you wanted to style anything on a web page that didn't currently exist by using properties and CSS you had to write a JavaScript polyfill for it which not only convoluted your logic and your styling code but it also was way slower because you'd have to wait for the website to read your DOM and the CSS object model and go through the whole Cascade layout paint composite step and then you'd have to reapply whatever JavaScript at whatever point update your page to have that repaint and to have it recompose it and so we don't want that with Houdini you can now tell the browser from the CSS level how you want it to draw your page so it gets that from the very start and that means more performance powerful and extensible styling on the web Houdini is the intersection of work done to improve browser performance give developers and designers more power to translate their visions onto the web and to extend what's possible and the set of CSS properties that we have today it's really this umbrella term that covers a few different API s and those api's are the layout API the paints API the parser api the properties and values api the animation worklet the type object model and the font metrics api if you want more info about any of these is Houdini ready yet is a great resource created by Surma that shows you all of these specs their current place in time and when they're covering today we'll be covering the paint properties and values api the type object model and animation because they are the most supported now so let start with properties and values these allow you to extend custom properties extend the capabilities that we have today when we're creating custom properties or CSS variables on the web right now you can write a custom property about giving a name and a value but that value is string based with registered custom property is this Houdini custom property you can give that a syntax initial value so you have fallback values and say if it inherits from its parent or not this allows for a lot of really cool things like error checking and creating visuals that previously were not possible on the web without writers or custom properties if you try to animate a gradient for example it just doesn't work whether you're trying to animate that gradient inside the gradient itself or using this custom property here to try to do it the browser can't comprehend what you're trying to tell it to do in this example I'm trying to animate from a red to pink to a blue to pink gradient on hover with a one second smooth transition but the browser has trouble interpolating these values in this texts now if we register a custom property and call it gradient and start we can set a syntax step property so that the browser knows what to expect so here we're setting uh syntax of color and there's is the exact same code that we saw before but we are seeing that smooth one-second transition because we've now told the browser that gradient started as a color and to look out for that and it knows how to interpolate now between those color values custom properties are great for design systems they're great for type checking your CSS in this example we have a custom property called color primary that we've given an initial value of the pink when we have some code here I don't necessarily have to say what color primary is I don't have to specify it in either the global or in the element level it just knows from deep pink because we've registered it on the CSS interface we can still override that value very easily using the Cascade so here I'm overriding color primary as blue but if we have something that's invalid like a number here this will fall back to deep pink without a registered custom property the CSS will just ignore that line and it would appear like a blank box we would just see white background so having this really allows for type checking in CSS what I think is really cool also I think this is even more exciting the feature syntax for this is all going to be in CSS so just like you can write custom properties in the root now you can write all of your property declarations in your CSS to keep them all in the same file and it's going to be great it's just this vision of the future that I see tier logical property sweet all right typed om so this is where you you need to ask the Dom for a value that's like what's the currency assess value and right now you get a string and it's kind of hard if you want to add something to it or remove something from it and so what do we have upcoming blue type bill and we're gonna get object yeah super cool so anyway here's a good example I've pulled up the chrome dev summit website I have a little gift of me typing the old way so I'm gonna stash this selector for an h1 I'm gonna ask the window to get a computed style of this h1 and then after that I'll say I need a computed property and it's gonna want the font size and it says 34 pixels and that's what design tools have been deal with for all these years but what they're gonna get here is I can ask the h1 directly for a style map and to get the font size back and I get the value in the unit broken out super neat this book is really gonna love this any design tool is really gonna let it and really doing any JavaScript computation it can be really nice so on the Left we have what we used to do which is string based regex parsing and you'd have to disassemble and reassemble would type 2 whim you ask you Matthew set that's super rad here's the JavaScript of today just so in case you need to copy pasted screenshot it right we're asking the window for a computed style of an h1 and its font size but tomorrow we can just ask the h1 for a style map and a get call for its font size and you get more here too you get conversion clamping air handling and more so you can't really mess that one up as much as it you could the previous one I love this semantics CSS is happening on the web it's so exciting the paint API is also something that's super exciting because you cannot create your own paint functions using a canvas like syntax before we get into the paint API which to talk briefly about worklets because the paint API is one such worklet work let's live in a separate thread from your main thread meaning they don't take up page resources or slow down your site to apply styling changes like this paint work that would do there's similar to web workers like service workers they're registered to your page and they contain all the instructions that live it outside the main thread and can be acted upon when called so Houdini worklets worked in very much the same way to get a Houdini worklet into your codebase you do the following you first would write and register your work let definition in javascript so here because i'm showcasing a paint worklet I would say register paints give it a name and then have all the paint code being pulled inside there then we want to invoke that worklet file by using add module on the CSS interface inside of say the HTML here so here we have script CSS paint work click the add module and then the name that we gave it and then finally we can use that worklets by that name so I call it fun here we can say background paint the type of worklet that we're pulling in here and then the name so it could look like this this is an example of a pixal are sort of rainbow top-to-bottom example that's just painting colors on an element's first I'm checking for support by saying if typeof register ping is not equal to undefined then I'm going to write out the worklet saying register paint give it a name and then inside of that and pulling in the context in size of the elements for which I'm applying the worklet to so I can set a size that height and width from that elements and then I could fill the context there then in the HTML we have the class box we're gonna apply this to and we're going to add that worklet to the CSS interface and finally in CSS all we have to do is write background image paint and in rainbow ties that's the name that I gave this worklet but doesn't only have to be a background image you can use these worklets anywhere so i can also use this as a border image that exact same worklet logic but instead of a background I'm playing it as a border and you get a very different effect for a few other examples of what you can do with the paint API I created this website this library called extra dot CSS and what this showcases is just to prop the power of custom properties and paint worklets and what you can do with them you could change all these different values inside of your code for sparkles or if you wanted to create a scalloped border inside of your code with one line of code changing different properties like color and width why have one underlined when you have many underlines so here it's just it's no cases how much power and fun you could have when you can tell the browser how you wanted to understand the code that you're writing especially the styling code which we previously didn't have that much access to and finally let's end with some confetti the talks not over yet just as part for a more practical example I played with recreating angled corners on the web using Houdini this currently isn't possible on the web but it is possible in other platforms like Android and iOS and so in the material spec we have angled corners but it's not saying that we can do in hard platform and I wanted art platform to have nice things too so I had a few requirements the first was that I wanted to make sure I could set each corner individually just like you can with border radius and I wanted to make sure this was a truly cut element which meant that the ripple wouldn't extend past the element itself I wanted the frame to end those corners so I used a mix of custom properties and input arguments for this here is that worklet itself so I'm registering the paint's giving it a name angled corners and then I'm pulling in these input properties these custom properties I'm telling the work that to look out for values that I'm going to then use inside the worklet itself you can also pass custom input arguments so here I'm doing static get input arguments and I'm setting the syntax for these input arguments in this case the syntax is a custom identifier and so here I'm looking for that custom identifier to be a string field your outline to show two different modes of using this worklet then I can use the contacts the size of properties and arguments to build out this worklet and so what I'm doing here is I'm building this canvas angled shape and I'm getting the properties the size and using that actually determine where I'm placing those points and finally here I'm calling for the argument of outline checking for that string if it's an outline mode then I'm going to use a stroke to apply the style if not I'm gonna fill it so that's because for these angled buttons I first set the corner radius and then I want to create a mask on all the buttons to make sure that nothing goes outside of the end of those buttons so that's where this WebKit mask paint angle corners in a filled mode comes from there's other types of buns material and one of those is the outline button so here I'm using the outlined argument I'm setting a couple of more properties here the paint color in the stroke weight and I'm using the exact same worklet to apply a border image that's then painting this on top so for the outline button I'm using a mask and a border image with the same worklet so altogether it looks like this you can also use these as a CDN so you could include this as a CDN in your file and then set your custom properties and include that line of code that says I want angled corners and it's just really exciting time but I know this hug feature CSS I still get this question a lot but what does it look like an unsupported browsers well it looks like this here's what looks like an IE 11 this is emulated on browser stack you don't get the angled corners but these buttons still function well and you still have your UI there I think this is a great example of progressive enhancements you can have great UX across browsers but you don't have to have pixel perfect identical interfaces I want to free you of that construct of that burden I think that you can use Houdini today in a way that is decorative and can enhance your UIs without making it a core part of your UI so when you do have things fallback check make sure they work but don't be afraid of using these future thinking properties it turned to you I love that use the same worklet across multiple use cases it was a border image it was a mask because a border is a background it's all so rad let's talk about the animation were clip this is off the main thread animation this is where your first party animation you're not going to be chasing something with a requestanimationframe you are included at the core this is so different and what I've built is a demo that kind of brings all of this stuff together that we've been talking about today so really quick just like a paint work clip we create a class which implements the Houdini animation interface which really just means it has a function called animation then we add the module to the CSS object model and since ours is an animation we don't really do much in the CSS draft at that point so let's see a demo just so kind of what I'm talking about I built a tabs component which might not be that exciting but notice our little indicator on the bottom it's always in sync with the scroll zone I can click to go to my different tabs I can use tab and spacebar to navigate with accessibility and whether it's on a responsive desktop or on mobile I have touched I have everything and this is really exciting to me so how did I get there what this is this is Houdini plus a scroll timeline and so the we can pass a new tick to Houdini and what that means is usually your tick is usually the screen refresh rate but now we can send it to scroll position of something else so since I created a CSS grid layout that had scrolling snap points I create a keyframe effect I'd create a scroll timeline that points to that scrolling space and I pass in some options for initial state like how many tabs there are and what's the maximum scroll and I give that to the animation worklet and then we get a gorgeous 60 frames per second scrolling and in sync tab component so here's one keyframe effect looks like the keyframe effect is kinda like if you make the a key frames animation but you only take one little piece out of it you can kind of make many little and then assemble them later it's really cool if you haven't heard of a Keefe roommate and in fact the scroll timeline is also cool so this is new this is where I'm creating a scroll timeline and notice it's scroll there's going to be other timelines in the future so what we're gonna be able to do is not just rely on one type of tick we can specify many and create our animations that are like reactive to different things so this one is reactive to the scroll source which is called section and I give it a width like how I clamped a length there and I created a worklet called tabs the constructor takes in some initial props and sets state I have the animate function that's going to get called on tick and it does the math which is going to calculate the position altogether now this is my tab dock controller so I'm going to create a new animation that's spinning up my worklet I'm gonna name it well I'm gonna reference it by name my pass on my keyframe effect I'm gonna pass on my school timeline there's my initial state that we were talking about earlier and then I say animation dot play and nothing happens why because the tick is not the screen refresh rate it's my scroll position you have to scroll to make it go and I think that's really cool so we got everything in here we have touched we have a mouse we have keyboard everything's ready to go this is on a glitch for Kate and check it out it's super rad and this is something that I got really inspired by once I made that demo my brain started going nuts about the reactive animations I could create and I saw this gif and I was like I could do that with Houdini in school timeline we've got a vertical scroll snap and a horizontal scroll snap and all we're doing is reacting to the position of those things and we're letting them snap and we want people to be able to touch and push those things any way that they want I'm starting to talk fast and that's because it's time for okay here we go so we got sighs this lets you set height and width in one fell swoop we've got aspect ratio which allows for your media to retain its dimensions meaning you can avoid those awkward stretch or swished images or when you're trying to use a web page and the web page starts move around because images are loading in this prevents that aspect ratio allows for those images to actually have their own aspect ratio yes we got min max and clamp and this is the ability for us to set constraints on any CSS property they want we don't have to do min width and max width and width we can just specify them in in a max and clamp it lists don't have to be boring anymore with the upgraded list style capabilities in chrome 79 you can have Fiji and emoji and if you wanted to play with smile again maybe animated SVG I don't know do your thing animated a little arrow sweet where we have display can take two parameters now you can specify how it's fitting in the outer scope of the block level and how its inner should work regions and CSS allow us to fill a region an area with content so you might be familiar with this concept if you ever used InDesign to lay out books or brochures essentially you can create areas of code that flow into and out of different boxes and your code doesn't have to be just rectangular this works really great for grids where you can define your various regions and have that text float into and out of those regions nailed it easy assess modules so now we've got JavaScript can ask for a module whether it's from remote or local and it gets a rich object back super nice we can't forget so great wait that one's amazing I know this is coming in Firefox 71 and this allows for you to create micro layouts along with macro layouts that use CSS grid stoked Wow we did a 20-mile D there that was 2022 said in 30 anyway we made it deep breath you've made it with us thank you for joining us in this journey check out that URL for all the resources for links to all of our demos also if you're here come and talk to us we'll be outside in the sandbox is for biz bug and from material design if you're watching this online feel free to tweet at us we love talking about this stuff I think that's all we have for you today we're definitely out of time so thank you again thank you nailed it [Applause] [Music]