CSS's Future Discussed with Adam Argyle

Key Takeaways

i started this channel over four and a half years ago and despite pretty much making four and a half years of css content i still haven't run out of things to talk about and with where css is headed now it doesn't look like i'll be running out anytime soon there's just so many amazing things that are coming to css and i had none other than adam argyle join me to talk about some of the things he's most looking forward to if you don't already know adam he works over on the google chrome team as a css developer advocate and he's just up to a lot of really really awesome stuff so i've linked it to his youtube channel his gui challenges and more of the things he's up to in the description below if you'd like to check those out and he's also just an all-around awesome guy who was kind enough to join me for an interview about all of this so what i did is i took that interview that we did live over on twitch shut it down a little bit and i also added code samples and examples of what he was talking about throughout so you can help visualize a little bit of the different things we were talking about along the way and without further ado let's go and jump into it oh let's do a flat list of just all the things it's 11. i chose 11 for like this short version and i have color level 4 and 5 at nest at layer at scroll timeline at container custom at media variables at reduced data um at property aspect ratio that's funny i almost said at ratio at peck ratio just because it all started with at so far aspect ratio konic gradients and focus within so those are my 11 most of these are in the moderate to low risk so like you can get started with a lot of these and if something is high risk what i meant is like it's impossible for you to do otherwise so like something is high risk if it's like at scope you don't actually have real scoping in css everything kind of always goes all the way down but what at scope is going to allow you to do is say apply these styles two layers down and then cut off no longer will that color trick all the way down i mean i guess you get that with shadow dom but this would be a much easier way so yeah it's a high risk item because well you can't really enforce it until the browser has that feature so if something is impossible it's like there's even things like new relative units which we're not going to go into but there's new relative units coming out and you can't really simulate those right they're units coming from the internal browser engine and all the context it knows about like you just can't so it's high risk don't use until it's out and available or it's high risk because it's subject to change right it's a draft it's a proposal you could go hack against this right now and use all the latest features that it's like articulated but it might change on you and at which point you'll have to go adjust your code which is fine so it's like it's high risk but early adopters could be there if you want to it's like something early adopters are in in it for they're like oh yeah i know i like the high risk uh it's my middle name and then or it could be like it's high risk because it's unofficial and it's not blessed by the working group so that could be something like maybe a working group member ideated it and they've talked about it and they've proposed it but the rest of the group has not confirmed well then it's a high-risk item that is uh just a willy-nilly thought in someone's brain okay so then we have like moderate risk and that's a where you could start practicing something so you can use it at author time but maybe it's pre-processed away and so that's why i call that a moderate risk is it's got to be somewhat stable at least one browser or something is probably got this prototyped or done in the browser and now you're using preprocessors to author it writing as if it's available but delivering a style sheet that works for all older browsers so you'll find a lot of the ones we talked about today are moderate now these can still change so because the spec is in draft or it's in development but it shouldn't change as much like enough of it is firm often moderate things can be polyfilled right so this was something the high risk ones couldn't do they couldn't be polyfilled a moderate risk one as well it can be polyfilled like at scroll timeline is amazing it's so much fun it's really only behind flags in any browser but you can go deploy the polyfill and write in your css as if you were writing it this whole time and it just runs the client side runtime engine that fulfills the scroll um it's really cool um or it can be prototype so like you can get in a browser um and prototype it with javascript whatever this functionality that will be eventually in the browser so that's moderate and then low risk is the spec is stable it's available in at least one browser in a stable uh one browser it has a progressive enhancement path so like aspect ratio i put this as low because well you can use the padding hack until then or you can just define some and and you can use add supports to check for it and then the last thing about is like maybe there's tooling so kind of like the preprocessor path like you can do it today and just not deliver it that way until later so we do this with modules too within javascript right you've got your like uh well maybe you do but you've got like your older bundle uh that's all um ie ready and old safari ready and then you have your new modern es bundle um that's sort of much more slim uh so yeah that's the risks those are the 11 items one of the things there that you mentioned was the progressive enhancements and i do think that's you know you can even for me like on my own website i'm using um masonry grid on a grid i have just because i'm like if it doesn't work and most people it won't work but it's okay it's still functional it just doesn't look as pretty because there's a little bit the spacing's not like all glued in a gap right yeah exactly um just really quickly because i know some people who follow me are pretty advanced level and other people are newer to the the whole world of front end development um so for a polyfill do you want to explain just quickly not going in depth on how they work but maybe just how you even you know or what it is and how you would find one yeah so polyfill is intended to match a spec so there's like polyfills and shivs and something else and they all have like these slightly different things but what a polyfill is originally supposed to do is uh its goal is to be a drop-in script a javascript file usually although i think there might be css ones but mostly javascript where you uh load it onto your page and for whatever way it wants to do it like it could read your actual style sheets or could just go read attributes off your elements or whatever it's going to go simulate and create the context and the the data that's needed to perform a certain layout type so like uh we talked about at scroll timeline at scroll timeline allows you in css to say um as this page is being scrolled take that tick and animate something um as if you were playing and dragging this scrubber on like a timeline and so what you can do in javascript is well you load in the polyfill and that polyfill will go read all the styles in the style sheet look for those apps scroll time definitions read everything that you wrote in that css and then go write javascript that will watch scroll of that body and map the scroll position back into a tick for your animation so it basically tries to fulfill the goals of a spec or of a css feature or of a javascript feature so that you can use it under the assumption that the browser does have it it's almost like you're teaching the browser a new trick before it's available so that you can use the trick yeah you're like bringing the learning along with you but the bummer is yeah it's a runtime learning so you can maybe bring too many of them and now your site's getting slow because you're teaching every browser eight new tricks so that you can use the eight new latest hotnesses um but yeah that's the idea is you're teaching the browser a new trick so that you can use it um good call though on uh making sure that i don't go too advanced for too long because yeah some of this stuff is advanced like that layer like that one's pretty heavy um so um the atlas you mentioned it we transition what would i yeah what would i layer what is that layer and what would it do okay so at layer um let me outline a problem um in your style sheet the first couple things you write is probably like import reset import normalize import bootstrap and then you get into this uh dance where you're just like okay my styles need to be loaded after bootstrap so that all of mine can you know work on top of bootstrap right you have this concept of like the first file that was loaded is probably going to be squashed by something after it and so you have to be really careful about the way that you manage your your files in the loading sequence because right you also have things being loaded in the head tag maybe you have javascript that's creating style sheets that are being put into the body tag basically you have styles coming in from all these different directions whether it's imports or links or javascript and they're all sort of competing to be on the page and then be in this cascade and it's just a lot of layers to think about and so what at layer lets you do is i like to think of them like sim links or like a name space for you to insert um styles and i think sas has something of this concept but essentially be like um create a new layer so you'd say like at layer and you give it a name and let's just call it like resets and then you open up your curly brackets or whatever or you could import a file into there essentially you're saying in the first file that ever gets loaded at the very top here's a namespace another file that gets loaded 10 seconds later could say hi i'm more resets and i'm for the name space of reset and the browser engine will say well cool i loaded it way later maybe someone would have used to put it here but i'm at layer capable and it's specified that it wants to go here so it inserts it into that top spot you essentially get to name your cake all the different layers user you know libraries blah blah blah and then at any time you load any files you tell it where it goes and all of a sudden that mess that orchestration mess that you had no good way to wrangle it and get your hands on it has nice names for things to go into you're like oh yeah i know exactly where you go and you can manage your cake yeah you should have called it at cake i guess [Laughter] yeah that sounds really cool um so that when you have listed as a moderate risk so it's sort of we you know we can start testing and playing around with it but probably not ready for putting into your production sites quite yet yeah that's like a pre-processor one like you could go play around with the a very similar feature or maybe even someone has like a post css plugin that emulates the spec um and yeah you can go feel as an author that you're writing modern uh css but you don't deliver it yep yeah we'll go to a completely different one i see you have um and you were talking about it before with not getting sort of the chrome people aren't too or the engineers aren't too deep into it yet but the new color specs with the color four and color five i'm so stoked on color i was just like telling my dad about it the other day because he's like what are you doing at work and i'm like okay let me tell you something funny okay daddy remember back in the day uh when you loaded a website and they were all 800 by 600 and then our screens got bigger right not every computer was the same size that was weird right not everybody had the same big old crt monitor so what the web had to do the web had to like learn to allow things to move and flex become fluid inside the space and the browser's resolution kept getting bigger which meant our canvas it got bigger and we needed more ability to create space and utilize that space and i was like now imagine if it's been 20 years and the browser was still showing you 800 by 600 even though you had a big huge monitor you'd be really frustrated that this webpage wasn't taking advantage of the capabilities of your display enter color it's the same thing except the bummer is it's been 15 years and we still only have srgb we're still using colors and and we're talking about colors and using colors from a very big color spectrum right it's got millions of colors or whatever um but it's not taking advantage of your display your display can show more colors especially your phone and we know that looking at analytics like people are on their phone like so what i'm getting at is like in color level four you got bigger gamuts uh which means more colors to choose from given a certain way that you want to talk about color we got different gametes for different purposes and so these are things like lch uh which is lightness chroma hue lab which is lightness a and b and a and b are like this funky way talk about color because the way that's shaped anyway um so right we get bigger gamuts we get uh different color shapes so one like lab is better for gradients kind of interesting we get in color level five we get manipulation functions so this is the ability for you to say just like you do in sas but to have it at run time you could say okay take this color red and just lighten it by 10 you know and take that color over here and this ability for you to take a color chop it up perform math on it and stick it right back into css all at the same time is coming and then we have like system colors so we're like maybe you want to build a website or an app that you don't actually manage any color at all you're just sort of saying hey browser dark and light theme i just want these for free color my links color my buttons i'll just use whatever you provide and yeah i'm really excited about these because they they it's a way for you to differentiate in your browser and i think when you ask for hot pink and you ask for lime green like you want a vibrant color and you don't know right now that you aren't getting a vibrant pink until you go see a vibrant pink in your browser and so that's i have a lot of these talks and stuff where you can go or like tweets you can go see where i'm like look at the gradient in srgb that you all liked 500 times or whatever i recreated it in lab and i don't want old srgb anymore srgb looks really bad it's like wow that that old gradient looks like salmon it looks all like the sun burnt it out for like four days you know like what it is disgusting so yeah all these little color things i just want the web to be able to show color like the displays can it's like our color it just fell over on the wayside and so i'm a member of the working group i'm helping chrome push the stuff and right now safari's has safari's had the ability to just display color and display p3 for four years and it makes sense why you'll put up an iphone they want to use the colors they've spent an amazing amount of time making a retina display that shows as many colors as your eyeball is capable of and they're like css better as hell will be able to access one of those colors and so yeah that's some of the work coming in color level four and five and color level four you can pre-process your way into colors so you can start using lab and lch today and what that'd be doing is you can access colors in this bigger color space but it essentially delivers an srgb color so it's called color clamping um and it's still okay like maybe you could do your color i think it's advanced colors color is quite advanced um but that's what i meant by color level 4 and 5. uh more colors and color manipulation functions just really exciting stuff the next one on your list goes really well in there with the nest and yeah yeah we'll start just with with what well i guess you know for me being a fan of of sas nesting i think is one of but there's variables that which were i think why i started using it um and then now i've abandoned those almost completely just because we have custom properties um but nesting has always been something that i've i've thought was pretty cool and so seeing it come to css makes me wonder sort of what i guess uh we could say just what nesting is but then also sort of how it could compare to um preprocessors absolutely yeah do you want to describe what nesting is so yeah very quickly say you had a card and then you have an h2 that's in your cards so instead of doing dot card space h2 if you want like a you know you're scoping your your h2 to your card or something like that or even if it's a class of title so you have dot card space dot title instead of doing that you would have your dot card open curly brace and then on the next line you could just put h2 open curly brace or dot title open curly brace so it knows that that style is nested inside of the card so it becomes like a descendant selector effectively yep well done so yeah you're sort of co-locating um new child styles into the parent block and yeah it just feels right especially in a card right you write card one time and then all your card styles get to fit inside of that block is you sort of build out um higher specificity selectors or just like things within that card that need to be styled and it's all located in one spot i'm a huge fan of nesting too um yeah it was a big reason to start using preprocessors because building and just all the repetition if you don't have a preprocessor can get really old okay so then let's talk about at nest so recently is and where um have become very standard and available on all major browsers so a primer on is and where is is an um is a functional pseudo selector so it's kind of like not where you can say like div colon not pass it the function parameters and in there you can write a complex selector you could say like is not and you could type whatever you want in there is not body space main space article h1 you know bold tag like you could say it's not that crazy bold tag so with is you can say what it is and you can specify additional parameters that it needs to have but why it's especially powerful is it can be used in the middle in the end or the beginning of a selector so it essentially allows you to group you can take a whole concept of like multiple things because you can put a comma in that parentheses you can like open parentheses you know selector comma selector comma selector you can put that in the middle somewhere so you could say article space is and you can play h1h2h3h4h5h6 and parentheses so you basically just saved yourself a bunch of article space h1 article space h2 articles but by grouping all of the h1 through h6s into the end of that selector so at nest builds upon net like is by allowing you to build those groups in the beginning middle or end all while you're building inside of that code block and um some of the differences that you're gonna have in the you know css nesting per like reel is that it will be tokens when you're when you're building um these new selectors so you've got like article open curly brackets and then you say in this spec you have to always say and if you're building to the right so in sas you don't have to you can just sort of start a new selector and sas is really good about parsing it out in the nesting spec you just have to be explicit that you're starting it um because and is anyway whatever you always have to have it and i find that it it helps like sas was a little too loose i think in some cases and the and makes it really obvious anyway so okay so you've got article opening up your brackets then you have and space h1 and you could open up your parentheses there and nest a style for an h1 that's being found inside of an article the and essentially takes the parent token which is a live object it's a live selector object and puts it down where the and is and so it says article space h2 or h1 the difference again here is like in preprocessor land with variables they were static and they got computed away you uh would write with all the variables but the in style sheet didn't have them same thing with nesting when you write with nesting in a preprocessor you you author it but you don't deliver it everything gets squashed and flattened when we got the spec for variables they're alive and they're reactive they're run time they are right they're different they're not a static variable these are very dynamic in real time they feel almost like a state store in javascript or like this sort of like magical thing that you update it and just goes everywhere that's going to be very similar with how nesting is going to work nesting is not going to be like preprocessors where you are building strings right you can't do bem with a runtime nesting structure you can't these are real objects you can't just stick well well you can stick two selectors together right like dot food and dot bar like but the idea is at least in bem like you're always concatenating to the right which i think might be this way on video but anyway yeah you're always like building a string and you can't build a string when what you're working with aren't strings you're working with real selectors live live selectors right and so anyway that's one of the big gotchas is that you can't build a bem selector but what you could do is you could build bim in your preprocessor uh nesting style and then deliver some of the more runtime you know slim style sheet that you get from like a runtime delivered nesting so anyway those are some of the things you can nest at media queries and you can nest add supports and stuff like that you just gotta make sure the and comes in and why it's called at nest is because you can write um at okay uh let's see so and implies that you're going to be building to the right if you do at nest so if you had article open curly brackets and then you said at nest you basically could start a brand new selector and the brand new selector could say a body uh you know direct descendant main and then you can say and and it would take that article and put it at the end of a new selector and um essentially let's i think you can do this in sas as well could be like a trailing and and stuff like that but it essentially lets you put that new context anywhere in a new selector line and a good example of how we've used this is like let's say i have a card and the card i can make it uh knowledgeable of its parent using at nest so in my card styles i then at the very bottom i could say at nest container direct ascendant dot card colon and child odd so if this is an odd ends child and then i can say and and so i stick my card uh selector in there with that and i can open that up and now i know if my parent has given me the odd reference and as a in the card styles themselves i can now update my presentation and give myself a different background so now i have like alternating background cards all because at nest allowed me to nest a new selector that took the context but plus a brand new one anyway it's really cool stuff i'm sure that's like it's pretty hard to describe uh on a call but yeah is and where essentially uh are powering all of that underneath the hood so when you author nesting uh really it's just is being used to create all those little groupings um and you'll see that on the spec the spec says here's the sugar and here's what the d sugaring goes to and it'll always show you is is being used under the hood um so yeah that's at nest and the ability to deliver that at run time so your spot your style sheets will be much smaller and dev tools will show you uh that you're nesting so that's one of the other things i get to do is i get to work with the devtools team and i'm like hey nesting we're going to need a solution there it's going to need to look normal so i'm in figma designing what devtools needs to look like with nesting and stuff um that's kind of cool it is cool yeah yeah um we talked a little bit about scroll timeline when you were talking about polyfills um and that so uh for me i haven't it's one of those things there's so much new stuff coming that i'm always like i see these things coming like i gotta play with that and then i just haven't but i keep seeing people tweeting about it i've definitely seen some of your own and it gets me really excited for them yeah um so maybe we won't deep dive exactly you know or i mean i don't know let's just we can talk about school time but you've done some fun stuff with it so if you want to dive in i'm happy with that yeah it's so scroll timeline for me is the most exciting thing i've worked on for years it just the the demos that i can make are so engaging i mean scrolling telling is really fun right where you're like all these things are flying in and out during scroll it can also be really annoying so i try not to build anything that's too annoying although i am working on something that's quite extravagant anyway um but the idea is like yeah so you've got a normally a timeline has like this start and end with an amount of time between it and scroll timeline is going to leverage the amount of scrolling distance as a replacement for that and it allows you to really orchestrate an interface to where things feel very connected um and it does it at a very performant way so right if we do javascript solutions today we're going to be using request animation frame or the scroll event which means we're showing up late to the party uh and i just always like that example where it's sort of like okay um the browser is like all right i did all my rendering painting the user scrolled everything's good okay i'm gonna call this function for javascript and javascript is gonna be like hey so i need to change this over here and this needs to go over here and the browser's like we just did all that work didn't don't you know that i hear the frame after i guess okay um and so yeah it just has to show up at that time but at scroll timeline you're there uh in the engine with it at the same time and so you're there included in those passes and it becomes much more performant and then writing it is really nice although it is a little quirky so like the concept of time is gone right you're like how long does a scroll animation take well it's like how slow did you scroll [Laughter] um but you have to like right now one of the spec uh items that's under review it's like it's probably going to go away is you have to specify time right now and time is weird you're like but there is no more time like there's no duration on this why do i have to specify a duration uh for my scroll timeline um and anyway there's uh lessons to be learned inside of there but you can also do easing too so you could change the easing if you wanted like as someone scrolling it could start out slow and as they get to the bottom of the page like something whips in um i always find that i like linear like i like the scroll gesture to be directly tied with some animation in a linear fashion because then my fling like if i throw something and i get that nice browser uh resting animation like with scroll it does that to my animation too so it's just really nice when you see these things orchestrated and working together it also goes really well with scroll snap points because you can uh throw somewhere and it'll rest and the animation rests with it and they just sort of like move together and snap together and there's just a nice little harmony happening there um i see here custom media so stashing media queries into variables and this was something i think a lot of people when custom properties first came out were like wait you can't you can't have a custom property that yeah screen size what's up with that yeah it's because they're dynamic and it's annoying like css needs a couple things here um like one of them is we need a const right in css we don't actually have the ability to make a variable set as something and then never change again they're always dynamic and that's the problem here is you can't put something in the media query and then change the value of it later in like another media query like that'd be really weird or like some new block changes and just be it takes away it's like static nature and its predictability um and then so what this proposal is is this essentially lets you do it um and it has like i think there's a spec proposal for it in custom media queries level yeah i don't remember what level it is but preprocessors will let you use it now and so that's what i tend to do is all um and that you know write preprocessors you can treat it as static so it's essentially just repeated throughout the whole end thing that i deliver but at least i get to author it as if it was um i wrote it once right i get to stay dry as an author maybe i deliver something that's wet but whatever cool um reduced data yeah okay so um browsers like since opera one maybe or whatever opera version came out where they had that data saver mode where they were like browse with us and we are going to shave off all the poo poo off that page we're going to crunch the page even we're going to do it on our own servers and you can intentionally surf the web in this reduced mode and they called it like a light mode or something chrome also has a light mode so you can browse the web and it will request less images and it does like it tries to do work to sort of save you from using too much data because sometimes data is really expensive and now we have it in our operating systems so on your phone your iphone your android have this ability to be in a reduced data state where yeah you're like hey i'm camping you know don't download that video or whatever um and so css and well in java and javascript has apis for this the server has apis for this um like a server if it someone is visiting and has this data saver enabled there's little headers that the server can say well i guess i'll reply with less packets for this user javascript can look to see what the internet connection speed is of a user and do some other network assessment checks before it makes a request and can be smart and and you know mindful of a user's prefers reduced data and this is css's ability to do it and it's just like preferring reduced motion or preferring higher contrast you can prefer reduced data and so this would come back as true if the user is browsing in a browser with that light mode or if their operating system is set to reduce data and that means in css you could just say well okay that video element display hidden or display none um and save this user um from like downloading that huge asset by getting rid of it out of the dom and then the browser won't go fetch it or whatever strategy you want to use there but it's essentially like how can you be really respectful of a user who wants a reduced data set uh like just doesn't want to download a bunch of stuff and i made a demo recently where like if you on a set top box with your remote and you're on your couch and you load up the page and it's always got like title title title and then like a whole row of media and what i did is i was like okay if i'm browsing in a reduced data state i don't want to see the thumbnails i just want to know the titles so i could go through all the horror movies i could go through all the comedy movies without the thumbnail at all and like it saves the page thousands of kilobytes um and the user gets to get their goal done their goals is just like to browse some titles and and pick a movie so like if they're in a reduced data state just save them from and they get this basically like a text document that they get to move through and click an item and it's like no big deal uh anyway i'm just really excited about like how do we make these documents and these apps that we make just sort of transparently adapt to users so users are going around with all these different preferences and stuff coming with them and every time they visit a page they don't have to care or hit a switch in the page to get a certain experience the experience just sort of happens and reduced data is like one of those things that when you want reduced data it's really important and maybe you don't right now because i'm on you know phi uh well not fi anyway i have like a lot of internet right here i'm in seattle um but yeah i don't always have that and sometimes it'll be really nice so yeah i like these adaptive uh uh features coming to css they're just really cool yeah and that's also when it's giving the author like us as the author the control um instead of if you as you said like the browser will automatically make those decisions sometimes i've i've definitely had up my phone or it goes you know i'm roaming or whatever i'm not on my wi-fi and it says you know we saved you 14 megabytes loading this page and i'm like what what am i not seeing like you know yeah how did they make that decision so i don't know if they just come in with lower image quality or what but it you know being giving the author i think more control um based on the intent is i think a really a really good thing yeah okay number eight on your list was the at property and i remember yeah when i first saw it i was a little bit confused and then i played with it i'm like oh okay uh that's cool um so for anybody who you know if you're if you've used custom properties you might have been thought maybe there's things you can do with them that you don't you can't is one way to think of it and my what i wanted to do with it i'm like oh i have custom properties i know i can't animate a gradient uh because it's a background image i can't you know we come in like that so you but maybe i could animate my custom property and it wasn't letting me do it and then i saw well now i can do it with the app property because i sort of can declare more i guess you're giving the browser more information about what that property is yeah very nice i like to think about it as um you're turning like a custom property which is loose so if you're talking about like loose and strict programming uh loose it's like javascript a variable can get to to get declared put a number in it put a string in it put anything else in it later change it to a string to a number right it's like i'm just a container and i don't care what i hold versus a typed variable that says i'm a number variable and if you try to put anything other than a number in me i get really angry in fact i get so angry i crash your app um right and so what app property is essentially saying okay every customer property you make in css is willy-nilly and i mean willy-nilly you can put anything you want in between that colon and that semi-colon and custom properties go cool it's in my brain or whatever um anyway we have like a episode on custom properties in the css podcast where we cover some of this stuff but what app property does is it shows up and it types that it takes the willingness willy-nilliness away ooh that's funny see anyway and you type it and what you get from typing it is yeah okay so let's say you have a box shadow we have a gradient and essentially you build this like string with parameters right because we don't have box shadow x and box shadow y uh and box shadow size right we just have box shadow so we have to supply the whole string at once all the time same thing with a linear gradient you don't get linear gradient gradient one color as like a sub property right you just pass the whole thing together and so what you do is you can take a piece of it and i like to think of it like a scalpel and you cut out just one little part like talk about like box shadow and its size right so the ability for it to grow or not and you can take out just that one little piece make it a custom property now if you make it a custom property and it's not defined without property yet and you were to try to animate that size like go from zero pixels to 10 pixels you wouldn't get an animation yet because that that property is still willy-nilly and the browser can't rely on the fact that you won't pass it a string still because if you do pass it a string still it has to obey and it will just fail the the box shadow so appropriately says okay okay i hear you browser i hear you it's too willy-nilly let me give you some more information about this so that you can do something smart with it like i want to pass a length into my size i just want it to be a pixel value so i'm going to go say app property my shadow size and i'm going to say inherits you can specify whether it inherits you can say it's default value it's zero pixels and then you can say what type it accepts and you can say it accepts links and you can say all sorts of stuff there's like a cool interface for creating custom properties here where you're basically typing a custom property like what you would do in typescript or something you're defining it up front like a schema now the browser goes ah this custom property will not be a string sometimes if it is i reject it and i keep along with what i was doing before it has error type safety in it like just like classic css does and so then what you can do though is now if you go to animate it so if you hover and you set that app property custom property to 10 pixels the browser can intelligently go from 0 pixels to 10 pixels not just intelligently but confidently and that's how you're able to do linear gradient animations box shadow animations now uh because well just more succinct ones is because you are you're taking a piece of that typing it making it very explicit about its range of what it can be and you essentially take it out of that it can't be animated and you turn it into something that can be animated um it has other cool features like you could type every single one of your design tokens if you wanted to like you could go really really uh off the deep end with app property just out of like type safety and other just i don't know if you wanted to and the support of it's really uh pretty good right now and so yeah property you're just tightening up that definition so that you get additional superpowers uh next on your list was aspect ratio which i think is so you know now that we have it like why did we have this before seriously i use it all the time i even use like just to make boxes i'm like aspect ratio one yeah i'm like now i don't have to worry about height i'm just like yeah whatever the width was you know do it i i was doing it where i would be making if i wanted a box i'd have like a custom property for the size and then i'd put that for the width and the height just so i could just update it in one place and i'd always get it so i'm like oh i don't have to do that anymore that's nice there's a lot of dash dash sizes at the top of like certain divs exactly yeah very common um yeah what so yeah other use cases you have for i think you just put out an episode on it where you were like here's the padding hack and here's aspect ratio um i definitely looked at it quickly and yeah we're sort of comparing it to the padding hack just because for anyone who doesn't know an interesting thing with css and i'm pretty sure it's to prevent recursion from happening is padding top and bottom the same as margin top and bottom are based on the width if their percentage are based on the width of that element and not the height of the element excuse me because if they were based on the height it could cause recursion and we'd have all sorts of problems so they're based on the width so if you give something a padding top of 100 it's going to match the width of the element so you can control and there's all the different maths you can look it up and find all the different sort of maths and percentages you can use to get different aspect ratios and that used to be the only way and you'd have absolute positioning to get things to be in the right place your text could actually be on top of it and it's not just a big box of padding and yeah yeah it wasn't it worked but it was definitely not ideal yeah um so yeah now we get to say set a width aspect ratio is 12 over nine and it works it's pretty cool it is super cool and i feel like it has a good um upgrade ability like i delivered a demo recently i think it's that same media scroller where it's like all the movie titles um and i'm like if you don't have aspect ratio then all three sets of um movies they all look the same you get boxes all the way down if you do have aspect ratio though the top ones are boxes the middle ones are 16 by nine and the bottom ones are four by three it's like all i have to do is in one at supports media query is update a couple of different places with an aspect ratio and i'm done and i've like drastically upgraded the visual quality of a page which is this tiny amount of css yeah that's awesome and that's i think a really good use case there where you're progressively enhancing the page if somebody has it and if they don't it's fine they're still getting a very workable experience so yeah one thing before i let you go uh is just really quickly with all these things that are coming and um you know for me css for a long time was really stagnant and now then it sort of had this you know css3 came where we got everything at once and then it's sort of since then we've slowly been growing and it seems to be speeding up again there seems to be a lot of things just coming um and imagine for newer people it can you know you hear people like us talking about it that are all you know super excited for all these new things coming um but i could imagine for some people it's a bit over like holy moly like uh i know for myself one of the reasons i loved just html css and vanilla javascript and you know let's keep things simple you can make or even just html css you can make a nice website you don't need to use that many properties to get it done you need a few html tags um and it and it just seems that then the whole javascript world exploded with you know the different frameworks and other things and um there was sort of a level of complexity that got added to that um the whole front of the front and front of the back um worlds that you know the front end development seems to be getting more complicated and now that also seems to a certain extent to be coming to css um so i'm just curious what your thoughts are there for either for i guess it's a multi-prong question but for people that are new to css just if they do feel overwhelmed uh or just front end development in general and i guess like the pluses and minuses in your mind of of it all yeah what a lovely question i wish i had a beer to sip while i answered it um just because there's he has so many feels in so many different ways um so yeah css3 was nice and sort of tried to name a whole bunch of new stuff for us css4 is probably not going to happen although i think there is at least one or two like pivot points you could probably identify it as like here's a cutoff where css3's stuff ended and here's all the brand new stuff that css4 is bringing like logical properties ad supports app property anyway there's like all these cutoffs that you could sort of say this is modern css4 and that's css3 and back i i agree the surface area of learning css has grown immensely and it's classic like css has this unique um issue which is that it's super easy to get started with overflow or uh yeah wait yeah is it overflow yeah not overflow auto right okay so it's like i want this to be scrollable overflow auto um i don't know why i forgot that property anyway and it's like okay i have scrolling now it's like but what if i want to do this and then which naturally most people want to do they have like an idea like a design goal and then so while css was easy to get started with it's really hard to master right you're going to have to create some sort of orchestration of flex and grid to get the proper scrollable area that you want that has the proper scrollable padding that aligns with this other thing like it can get really complex really fast while also being really easy to get started with that's one of my favorite things about it though i'm still learning about it i don't want to stop learning i'm not interested in mastering css i don't think that that would bring me happiness nor coolness i really appreciate the subtleties of what it can do sometimes and it's almost like um you know like okay you have tools and you have skills you could have every single tool in your garage and have no skills and you can't build anything you could have all the skill in the world of like how to build something but not one tool and one you're not going to build anything so it's like you have to kind of like put these both together um and i'm constantly just using new css features that are like tools and then i'm building my skills to see how these things weave in with all these other scenarios and so i'm just constantly building constantly learning um the amount of complexity that css alone can have in the front end right it starts out as a box oh i get paid to put boxes on the screen hey you're a famous box placer kevin [Laughter] you're like yeah that's true it does start as one box uh but then all of a sudden your box is in a box and then we also know that like a box has like an inner box and an outer box at least that's how i think about css boxes and you're just like what each box is actually kind of two we're like yeah it's a box in a member of other boxes but it itself is a box with boxes you know it's like and so yeah i think you just kind of have to keep working on this stuff i think css is unique and that there's a feel to it it's not compute work javascript back end work you're doing a lot of compute and the front end has all these different user requirements and people have to use it so there's like a lot of feel that gets in there and so you just kind of keep hacking through all the feels keep making sure that your mom feels comfortable on it and your partner feels comfortable on it and like everyone is like and you just kind of like get this interface into this place where no one thinks about your interface anymore and now they're just getting stuff done and i just like finding that it's like you could have the coolest car in the whole world it's got the sickest engine on it but if that steering wheel and that shifter suck well then your car sucks sorry it's like odd that even like a house like you could have built an amazing house and just the stairs going up to it could be too steep and you're like sorry not buying the house like but it's just stairs you're like dude this house i can't even walk up to it so it's like this user experience the way that we feel as we're using really complex stuff is so important and i think what we're going to see over time is well css is growing really fast it's getting more features where we're letting more people see our documents and have good experiences at these documents in these apps and the i think the front end user experience side this feeling side is going to be the most complex part of application development eventually i think all the compute data flinging database scaling all this other stuff is kind of getting normalized or it's like it's just like kind of solved or whatever but like the people side is just so hard so keep hacking stay a learning mentality because css is just going to keep growing the stuff is not getting simpler we're getting more screens more colors more feature requests from users uh your job security is great and i think the amount of learning trajectory and like the runway that we have is so long like i'm just not going to get bored in css i have things to study for so many more years to come and that's what i want i don't want to go hit and end uh and need to pivot i like that there's still so much to give to me and then plus you throw a javascript in there with css and it's like well now the world is like i can do whatever i want at any time i want and it's so cool um yeah i don't know did i answer your question yes 100 that was awesome cool yeah very nice yeah i thought uh actually just one one quick quick question here yeah uh do you think some of the new features are adding complexity just for complexity's sake ooh okay so this hits me hard um so at layer is gonna add a lot of complexity i think it will solve more than it's taking here's a good way that i look at complexity because this happened in javascript for me for many many years is um how much am i let's see you have to look at how much you get back for what you put in because what you want is high return you want to barely write anything and get a really sick experience at scroll time and scroll snap points deliver barely write anything you get these gorgeous interactive 60 frames per second experiences i'm like ready i'm here for that now things like shadow dom and at scope they sound like they're going to simplify your life they do not so get ready for the concept of isolating an element as becoming your new annoying thing to deal with because well it's isolated and well now all the things that you wanted to get in there aren't getting in there you're like oh crap uh i guess there was like a bunch of stuff getting in there that i wanted i just didn't realize i wanted and now i have to explicitly go on it and it's annoying um but that one always ah so that one you have to accept that complexity for the value that you're getting which is isolation and i don't know that one is not just complexity for complexity's sake let's see if there's any that are that way in this list here use data property aspect ratio i could look at the othe