 One of the very few you will ever meet probably apart from that. I like making stuff. You might have used some of my work It's all in GitHub I'm invited expert in the CSS working group My day job is doing research at MIT in HCI, which is the fancy academic term for usability And as Claudina said I've written a book you should totally buy it shameless plug there. Oh Okay Now I can see my screen though Okay, hopefully you can hear them better now So on to CSS variables So the first ever CSS variable actually came way before the CSS variable spec and it was called a current caller It came from SVG It's been supported in browsers for a very long time even I9 and the way it works is It automatically gets the value of the color property So if I change my color property here, not only the text color updates, but my gradient as well because I've used current color here So CSS variables are kind of like current color on steroids. They allow us to extend this concept to pretty much anything we want So let's specify a color variable here So CSS variables are declared with this weird dash dash syntax. They're essentially they're essentially custom properties They work exactly the same way as any other CSS property The dash-dash comes from so many people ask me why didn't we use a dollar or something like that? The reason we didn't use a dollar is that we want people to be able to use both SAS variables like preprocessor variables and CSS variables they do different things They accomplish different goals There are things you can do with CSS variables that you absolutely cannot do with SAS And there are things you can do with SAS variables that you cannot do with CSS variables So we want people to be able to use both of them on the same style sheet So you can imagine the dash dash syntax as like a prefix property with an empty prefix You know how we have like WebKit dash properties So CSS variables are like properties with an empty prefix So you call them you call their value with the var function and I can use that everywhere Almost everywhere you cannot use that in selectors You cannot use that in property names only in property values and you cannot use it in the query part of a media query But you can use them pretty much in every property value with very few exceptions that I will discuss soon So as you can see now if I change the value of The dash-dash color property it changes everywhere You might not be very impressed because you might be thinking well I can do the same thing with current color and it's supported in more browsers The thing is with cold with with CSS variables We can do way more things than just colors. So let's say I want to parameterize The size of these corners with another variable called corners and then I go here and instead of 90% I Say a hundred percent minus the value of this variable Which I have to call with the corners property Sorry the var function I always make this mistake I just type the name of the property because it's kind of what I'm used from sass But you have to remember to use the the var function to call it So now I've created my custom property And I can change the size of the corner of the corners by just adjusting The corners property and you might still not be very impressed because you might be like okay That was just one place in your style sheet. Why not just go there and specify? 20 pixels right in the color stop So the thing is just because CSS variables work just like any other CSS property You can use them everywhere for even own inline styles and It still works just the same So the first takeaway from this talk is that the CSS variables work exactly like normal CSS properties the actual name for the spec is called Custom properties not CSS variables and Another thing to keep in mind is that they inherit so here I have a simple structure of three divs which and each of them contains another div and I have applied I Have said that on every div on this page I want the outline property to take its value from the outline variable and then on block one Which is this first white div I've specified that dash dash outline is equal to this outline point two m solid But you can see that the inner div also gets the same outline Because the first declaration applies to it and it gets the dash dash outline value from its parent Of course, I can target it explicitly if I want But by default all CSS variables inherit I can specify I can cancel this inheritance by using the universal selector and And giving it a value of initial and as you can see this cancels inheritance I can still target it specifically and of course I Can use the inherit keyword If I do want it to inherit So Like this Sorry inherit not initial So then I can explicitly make it inherit what I actually wanted to inherit But by default it I've made it so that it doesn't inherit anymore And the way this works is that this takes advantage of the fact that CSS Properties applied directly on an element have higher precedence than values being inherited and the universal selector applies to every element Directly and yes, it has a specificity of zero, but it still has higher precedence than values that have been inherited So the second takeaway is that CSS variables are inherited properties. Not just they don't just work like any property They're also inherited But you can change that with the trick we saw So a third thing is So here we're using This the sad dot jpeg background in a folder called in an image folder, which has other images presumably So it's a reasonable thing to think about that Why not make a variable with the name of the file and then build the URL here So that I can change the name of the file without having to type the the whole the whole path However, as you can see this doesn't really work So my second my second thought might be hmm, okay, I can try to put the entire path in there It's not great, but maybe that will work Let's try it out So as you can see this doesn't work either and last attempt We might think Let's put the URL function in there as well at this point The variable doesn't even help us very much, but we're just experimenting so Let's see. Does that work? Nope This doesn't work either. However, this is a Chrome bug. It works in Firefox this This version this version should work the previous versions do not work And that's because and that's due to a bug in CSS. That's not due to a bug in the browser It's due to a bug in CSS. The reason is that the URL function has very weird parsing rules Because it can be used with both an unquoted URL and the quoted URL so The URL function is the only place where variables do not work in any other function as we've shown earlier for in there Earlier we saw in the radial gradient function variables work just fine in the URL function. Nope in the future We're talking about adding like an alias a function that works exactly the same as URL But has a different name and you can use variables in it and the concat function or a way to concatenate So that you can concatenate different parts and slowly build up a URL or an SVG path or a ton of other things, but right now nope by the way This is kind of funny. So In Chrome that has this weird bug the bug is not with URLs in general The bug is with relative URLs if I specify an absolute URL Suddenly it starts working. I Don't know. So the takeaway Is CSS variables plus URL equals chocolate ice cream the more WTFs because CSS after all So does this foo with an empty value is invalid That is not quite surprising if I asked you how many do you think this is invalid? You would probably all raise your hands, right? The WTF is that this is valid and the value of the variable here is an empty space a Space I mean all spaces are empty Also unlike any other CSS property variables are case sensitive So you can provide full box two variables By using the second argument of the var function So it actually supports a second argument and you might be wondering but I can provide full box in CSS by just using a Normal declaration before it like I've done here with the red collar The thing is these two full box work a bit differently So as you can imagine and you have to use both of them as you can imagine If if variables are not supported this code snippet would produce a background of red That's pretty normal. The var function is and it would be considered invalid the browser will be like a I don't understand this We'll throw away the whole declaration The the the place where the orange becomes useful is when a browser supports variables But there's no accent color set So if there is if accent color has not been set, then it will you will use orange? If Fox if accent color is set to yellow green, it will use yellow green. Of course, that's not surprising Now what will happen if accent color is set to something that doesn't make sense in background? Like five or something think orange. How many think red? It's actually transparent. It goes to the initial value So these fallbacks can be daisy chained So you can have color one whose fallback if there's no color one set is the value of color two Whose fallback is the value of color three whose fallback is red? You can daisy chain them as much as you want Also, you can combine variables with the app supports rule and apply completely different CSS Depending on whether variables are supported or not which could be useful in some cases So in this case if variables are not supported Then this entire rule will become and will not be applied You can also apply specific CSS to browsers that don't support CSS variables by using the not operator Obviously, they need to support at supports as well So I'm sure many of you at this point and probably earlier on will be thinking, okay These variables are nice and all that but once someone please think of browser support Like surely these things are not supported everywhere anywhere yet, right? Maybe maybe just Chrome How many of you had thoughts about browser support while I was explaining variables Yeah, most of you so you might be surprised to find that actually CSS variables are supported everywhere with one small exception and To be fair to edge Because they've actually changed their ways and they're now putting a lot of effort into supporting standards They're putting a lot of resources into it. So they have announced that they're working on it It's in development and 99% will be on the next version of edge So that's good news Something that will trip up people coming from the SAS world is that they're used to you They're used to using variables everywhere, and it doesn't matter. You can use them in selectors You can use them in property values. You can use them in I don't know everywhere you can concatenate them with other things and slowly build out build your CSS because That's the SAS compiler just spits out CSS and that's sent to the browser and the browser never even knew what variables he had However, that's not quite true with CSS variables mostly for the better because they're very dynamic, but there are a few gotchas here So let's say in this case So we had we have this div Who's with some height are a m's and we specified that so we can size it based on the font size and its scales Along as our font size does But what if we want to change the proportion of the sides and the font size? So we want to reduce the size relative to the font size So as you can see, I'm making every change twice, which is not good. It's It's it's against dry coding You should try to write your CSS in such a way that you can change things in one place Otherwise, they're bound to get out of sync eventually especially as more and more people work on the code base so we had the idea that okay, we're gonna make a variable and and We might be trying to take dry to its absolute extreme and say yeah, I don't want to repeat M either So I'm just gonna use six and This is something that is very common in sauce but if we try to do this in CSS as You can see it's just not working It's exactly the same as if we haven't specified a width and height at all and the reason is that this isn't valid because These variable values are not seen as just random strings. They cannot be anything. There's this is seen as a number It's the number six the browser knows it's the number six and If what you when you try to put it next to the M it doesn't see a length It doesn't see six M It sees a number next to an identifier and it doesn't even know what the M identifier is So just and how to deal with all this How do you deal with a value that is a number and an identifier basically the browser sees this as equivalent to this? So it doesn't know how to deal with it and it just throws it away Of course, you can put M's here and Then it will just work and If you want to have six as well because you might want to use it another in another place, too You can specify a second variable. Let's say side and then If you have six here, you can convert it to M's with calc so You call your variable inside calc and Then you multiply it by 1m and Let's change the variable we're referring to here And as you can see this works and I can change it here and it just works And if I want to use the six in another place where I don't need M's but I need something else It will work. So you might be wondering now, okay? Why do this? Why not to specify six M's and even if I if I needed somewhere else? I can just divide it by 1m instead of multiplying it by 1m. However, you cannot divide by lengths You can only divide by numbers Calc is actually invalid if you try to do something like this So even though you can convert from a number to a unit by using calc You cannot convert from a unit to a number if you have Like something like 10 pixels you cannot convert it to 10 in with with CSS There's just no way to do that right now there probably will be in the future But right now there's no way you can do this So it's always better to use variables for pure data not just CSS values not CSS values Unless you're like absolutely a hundred percent sure that you will only need it that you will only need this variable as a length Then then then set it to a number because you can do anything with a number, but you cannot do anything with a length and Even in cases what I thought I would only need the length Eventually it turned out that actually I didn't So it's it's always better to plan ahead and use in and set variables only to pure data and only to numbers So how many of you have worked with CSS animations? Not necessarily at work If you if it's a personal experimenting that counts, too Okay, most of you great So I think many of you might be wondering right now. Okay, the CSS variables are cool, but you know what's even cooler Animating them and I agree, but there are some problems with that because CSS So let's say instead of animating background color. I Wanted to set background color to a variable say BG and Let's test that this works by setting BG to orange and We need to cancel the animation first. Yeah, that works okay, so Let's go inside our animation and Change these to be animating BG instead of background color fail as You can see this doesn't work and the reason that doesn't work is both a Limitation of CSS variables and the browser bug Working together to make us pull our hair out The spec reason is that this is a quote from the spec CSS variables can even be transitioned or animated. Yay, but Since the UA has no way to interpret their contents They always use the flips at 50% behavior that is used for any other pair of values that cannot be intelligently interpolated so what this means is Because the browser doesn't know exactly what type these variables are or at least it pretends to don't know because they're tokens So they should know but anyway The browser pretends that it doesn't know what type they are So it doesn't know how to interpolate them So what should be happening here is that it should be flipping from yellow to turquoise without any transition The part that chrome is dropping these Completely that's a browser bug So Yeah, CSS variables and animations equals chocolate ice cream. There is some hope a in the future We'll be able to set what type our variables are For example, this is the syntax. It's JavaScript We'll be able to use this to say for example this custom property is a color and its initial value is black Why do you have to use JavaScript to set the type of a custom property that you defined in your CSS? To use it in a CSS animation in your CSS That is beyond me. There is some hope So You cannot animate these custom properties, but you can use var references in animations so let's say you have color one which is yellow and Color two which is turquoise and Inside here, we don't need this anymore. I want to say animate background color from color one to color two and That will actually work as you can see So it's only that you cannot animate the actual variables, but you can use their values in animations also Transitions kind of work Not exactly. I will explain so in this case. I have this slide and When I'm clicking on it It switches to turquoise You can see the code here just changing the background from yellow to turquoise and I have a transition So it transitions smoothly so if I did the same thing and I was trying to animate a variable to transition a variable, let's say Background is PG So you can see that now this happens smoothly Even though what I'm changing when I'm clicking on the what What I'm changing when I click on the slide is the variable not background So why why is this happening? Does it mean I can transition variables, but I can't animate them That doesn't make a lot of sense, right? So this tripped me up at first and I actually tweeted Huh, you can animate you cannot animate variables But you can transition them and then tab replied to me who's the editor of the spec and he was like actually What is happening there is not that BG is animated is being transitioned It's that background is being transitioned as a result of BG changing So if I restrict my transition here to BG It doesn't work. There's no transition because that transition doesn't actually happen on BG It happens on background There's hope. Let's go to some more Frequently encountered use cases. I will not mention any use cases of things you can do with SAS variables as well Because I don't think they're particularly interesting Yeah, you can you can set your main fonts on a route and then you can use them throughout your style sheets Just like you can do with SAS you can set your main colors on route And then you can use them throughout your style sheet just like with SAS But I think the most interesting use cases are the things you cannot really do with SAS so Or less I don't discriminate or any other pre-processor Let's just assume that when I say SAS I mean any pre-processor So a very common case is having components with their own styling and then creating variations of them This is a very very simple component just a button You can imagine how the same thing extrapolates to way more complex components So I have my base styling which uses a black Text color in a black border and when I hover over it it changes to a black background and a white color so The tech that I have the same color for the text on the border and then for the background on hover and Everything else stays the same in the two variations So I have a pink variation here, but I had to create it explicitly I had to add I had to support the pink class in my CSS And basically repeat most of the CSS to override the colors. I said in the base class. So how do variables simplify this? So variables simplify this in in two ways Let's say I set a Color variable And I set it to black and then I use it here and I use it here and I use it here and Then I can create a variation Just by setting the value of the variable I can get rid of this entire rule I only need one line of CSS to create a theme for my component and it works exactly the same way I can even get rid of this class and Specify it in line like say color blue and now I created the blue component I don't I don't need to have predefined variations anymore. I have infinite variations suddenly Well near infinite if there are any mathematicians in the room They would kind of be annoyed if I said infinite another good thing is not just that it reduces code It's also that it lets you style components without having to care about their Internal styling. I don't have to care whether the hover effect is done with a background or some other way let's say I Wanted instead of a background on hover To do it with a box shadow An inset box shadow And I need to add a transition and you can see the effect and I changed this effect without Affecting anyone's code that is using my component and theming my component People can still use exactly the same code to set the color of the component. They're using Without having to care whether I'm using a box shadow or a background So you've seen I'm using a pattern here. I'm setting dash dash color to black and then overriding it This is kind of flimsy because it means that people steaming my component need to use higher specificity than Than what I have in my component The the proper way to do this is to not to not have a color declaration at all and then provide a fallback here As we've shown in the second argument So this works exactly the same way Except people don't have to care about the specificity of their co of the rule to be able to theme my component And you might be thinking so variables are all about reducing code, but this is a lot of repetition I have to repeat this fallback in a ton of places so You can set a variable with it Or my favorite solution is what I call default default values CC copyright lia veroo default default values. Let's make this a thing So let's define another another variable with That actually calls color and gives it It's default value and then Inside in the rest of my code. I just used that variable and not the actual user variable Did I do it everywhere? Yeah, you can see it still works the same and I can now we can change the fallback in One place Now the fallback is Rebecca purple So the six take away CSS variables enable theming completely independent of CSS structure People theming your component don't need to know how you wrote your CSS, which I think is very important for sharing components And the full default values are possible by using another variable and just not exposing it Like people don't have to know that I mean that I have a cold variable here I just tell them if you want this to theme this component you use dash-dash color Unless they if unless they read my CSS They don't even know that dash-dash color exists. And if they read my CSS Well, they're free to do whatever they want anyway Another big use case for variables is responsive design instead of having to put code inside media queries You can just set a variable So in here, I don't have to specify a different margin depending on the width of My window I just I just set the gutter variable and I can use the gutter variable everyone in my CSS So let's try to get off off full screen and see how this works You can see that now that I've reduced the size of my window I'm getting the smaller gutter size and this is not a particularly fancy example because it's just one place But you can use as you as you know in layouts you use this gutter size in many places So CSS variables make responsive design much easier and these are some of the basic like Cool case interesting use cases that variables were made for but there are also some more interesting cooler use cases that I wanted to show so If you take advantage of the trick I described earlier about canceling inheritance You can basically create your own custom properties that set multiple other properties at once So here because until very recently you needed and still probably for Safari you needed the webkit prefix to use clip path instead of having to use like auto prefix error prefix free or something like that I Defined the CSS variable and now I Can use dash dash clip path Instead of having to use two versions of the same property and because I've defined that on every element It's initial unless I actually explicitly said it then both webkit clip path and clip path will be set to their own Initial values, which is no clipping unless I of course use them explicitly. So it's not like it breaks any existing code So let me try to demonstrate this it's kind of hard to write clip paths on stage, but I will try and If I if it fails Please don't judge me So we're trying to do a diamond. Okay, that seems to be working and then 0.50% Okay, that worked Thank you. I always worry. I will like screw this up every time I'm writing a polygon So as you can see it doesn't inherit It's not it like many people when they see this this trick They're like but but clip path will inherit and the into the children No, it doesn't because we have that that clip path in initial in the universal selector. That's the trick if we didn't Then yes, it would inherit So and we can apply this to anything as you can see Clip paths everywhere So we can basically use that does clip path as an alias and when eventually we stop needing webkit anymore We just remove that declaration We we just remove this So CSS variables enable you to set multiple properties at once It's it. I think it's pretty cool Another cool use case is that you can make your own properties that are short-hunt Shortcuts to other properties with some values pre-filled. So let's say I'm using a lot of purple shadows for some reason Like let's say I really like purple shadows. Don't don't wonder why just just go with it So I'm using the same trick here to cancel inheritance And then I'm defining that box shadow is the value of purple shadow plus Rebecca purple And this is not causing a box shadow on every element because you cannot have a box shadow that is just Rebecca purple You need to provide at least an X and Y offset So if I'm not if I'm not setting purple shadow Then box shadow computes to it's already to twitch initial value and no shadow gets generated So here I can I can just use the purple shadow property and customize the offsets as You can see and make it an even more horrible shadow and I can use purple shadow in a ton of places without having to repeat the color anywhere Can even provide a spread radius or make it inset So 10th take away CSS variables enable you to create property shortcuts with values pre-filled in What programmers would call function carrying in a way Function carrying is what lets you create a function with some of the arguments already filled in So another cool use case is how you can create your own short longhands with CSS variables So this is a bit too much code for a slide, but it's actually pretty repetitive. I'm defining six CSS variables one for every aspect of box shadow and then I'm setting box shadow to All of them concatenated and I'm specifying default values for all of them except blur an interesting case is Is the last one note that it's default value is a space that is perfectly valid Because you either have the inset keyword or you don't so What would you set the insets default value to? Because by default they're not inset so you can set it to a space and then I can use Box shadow blur for example and set it to 10 pixels and box shadow color set it to Rebecca purple and so on and Say I want to set it to a different color When I hover actually let's set the offset so that it's a more visible shadow It will look horrible, but or the spread Yeah, that's more visible Yes, it looks horrible. I know but It will be more visible and now let's say on hover Come on on hover I want to set the color to Something else like red and As you can see this works. I don't have to repeat any of the other properties So essentially we took a property that takes a lot of values and it's not a shorthand and we created our own longhands for it So CSS variables enable you to create custom longhands. That's something to remember And lastly CSS variables allow you to create your own entirely custom properties in in some ways Let's say I I kind of always wanted to have a prepend Property that lets you prepend some text without having to write a CSS rule So you can do it in line. You can do it. Yeah anywhere without having an extra rule So with CSS variables you can do that as long as you have Universal rule that sets that property to initial again to cancel inheritance and then the Before pseudo element on every element there is an implied asterisk here That I didn't have to write but it's implied and it sets the content property to prepend and you might be wondering Doesn't this generate pseudo element boxes for every element? Isn't that kind of horrible actually? It doesn't because if you haven't set the prepend property to a value then it computes to it to its initial value which is none So it doesn't generate a pseudo element box So we can use it like this You can use it to the only in line element on the Descendant element you can use it on every element everywhere you want and even better You can use it In line as well Let's say That seems a good place Anywhere so I thought that was quite interesting So CSS variables enable you to define your own properties So SVG variables can also be used in SVG Not just HTML and you can do many cool things with that So here we have two eyes. Here's the SVG for them. It's a lot. It's a bit much, but you don't have to really process it Basically, these are the eye whites And these are the irises The blue and black are just a stroke in the fill a blue stroke and a black fill And I'm also using the eye white path on a clip path so that The irises actually clipped by the eye because it would be very creepy if the iris was like overflowing the eye and here I'm setting the the horizontal center value of the iris remember these are the elements that have the iris class here class equals iris and also here class equals iris so then I can Change this and it looks to different places Do you feel watched right now and let's see it's it's 75 pixels to get to get it to look this way or Actually that way on the projection. It's this way on my laptop. That's weird And it's 25 pixels to get it to look this way So I kind of want to set where it looks without having to care about the how the SVG is thrown so I can set a look variable which is Which goes from 0 to 1 let's say it has default let's set it to 0.5 for now or something or 0.2 or something and Then we have a calc. I remember it's 25 to 75 pixels. By the way, these are not real pixels. These are these are based on the coordinate system of the SVG which is defined here in the viewbox So I can scale it and the meaning of those pixels changes It's relative to the SVG and in the SVG itself. I can just say 25 I don't have to say 25 pixels because it doesn't really make sense that it's pixels But Chrome is a bit buggy if I don't use If I don't use the the the pixel unit like I can set it to 20 But I cannot do calc 25 and 50 just doesn't work for some reason if I specify pixels here. It works I think that's a bit odd, but I've learned to live with these bugs and Then I can call look here and now I Can change this and that's all I need to know I don't need to care whether it's 25 pixels or 30 pixels or 150 pixels I just change a look variable that that defines Whether it's looking left or right you can also Combine CSS variables with JavaScript and that's actually some those are actually some of the most interesting cases. How many of you? Do write JavaScript or do know some JavaScript? Okay, great great I'll keep it vanilla and it's only like a few lines on each example So hopefully it shouldn't be too overwhelming So first off to get a variable from the inline style of an element you use element dot style dot get property value It's exactly the same syntax that you use for any other property Actually, except we don't use it very much for any other property because we have a nicer syntax Like we don't say element dot style get property value font size We just say element dot style dot font size in camel case But because CSS variables don't really have a camel case version we have to use this generic function Also, this will only take the value from the inline style You have to use get computed style instead if you want to get the value regardless of whether it's inherited Whether it's set in the style sheet whether it's set in line that covers all use all these use cases all these cases and To set it you use element dot style dot set property and that sets it in line but you don't usually care that's usually fine and Some of you might be wondering why is it get property value but set property Why is it like get property? I? Don't know It's another API design mistake of the CSS om of which there are many so the first example I want to show you has to do with Writing CSS that varies depending on mouse movement, which is something all of us had to do at some point or many of us And usually the way you do it is you set the CSS in the JavaScript And you generate it there so with CSS variables You don't have to write any actual CSS in your JavaScript except setting these variables like here I have a mouse move event listener on the document And I'm setting two variables mouse x and mouse y on whose values are the the percentage of How much the my cursor is moved horizontally and vertically and why and it's a number from 0 to 1? And why is why is that the case? Why do I not set them to pixels because if there are numbers like this? I can convert them to pixels, but I can't do the other I can't do the opposite and If if I want to convert them to like measurements based on the viewport I can always multiply them by a hundred VH or a hundred VW you so Here I have a radial gradient. It's a eight center. It's fixed at the center And I want its center to vary depending on my mouse movement, so I use calc and a hundred percent multiplied by var mouse x and You can see now it moves horizontally based on my mouse pointer and I can do the same with the y-coordinate and now it moves based on my mouse pointer and I can I can change the CSS without if it's different people writing the JavaScript and different people writing The CSS I don't have to go and contact the developer if I want to change the CSS and say hey Actually, I decided that the color stop would be like closer together and please change this Sorry and the developers like you always change things. I am so fed up with you Can you just please learn some JavaScript and do it yourself? No more friction like this anymore you tell the developer to set your CSS variables You use your CSS variables in your CSS to do exactly what you want and you can change it and tweak it as often as you want without having to bother Anybody it's actually I think CSS variables are kind of the answer to all these react people saying that you should put CSS in JavaScript because then you can you can have computed CSS and you can vary your CSS based on JavaScript things Actually, you don't you just set a variable and then you use you put your styling where it belongs in the CSS Thank you SVG demo So what if I wanted these eyes to actually move based on my mouse I Could define I could actually use mouse x here. I think I don't have to do any calculations, right? Yep, I can just use mouse x here. I can even remove this and They just work. I didn't have to set another variable for this I can just reuse the mouse x I already have I can just use this one event listener and Set this variable on the root element and then I can use it in anything that varies based on the mouse These are completely different demos and I both of them work with exactly the same variable so there Also another thing I often wanted was to be able to access a value of an input in Java in CSS and sadly you can't But if you write a little bit of JavaScript You can set a value variable on the input So here we're going over all the inputs in the page and we're setting a Variable of value on them and also we're setting an event listener on the document For the input event and then we're setting the we're resetting the value on the input This is generic. This will work even if you add more inputs Even if some script adds more inputs on your page because it's using event delegation So now I have a slider here It's I have already applied appearance none to it so that it doesn't have the default value the default look and I wanted this gradient to move Let's apply a border. I don't like how this looks Okay. Yeah Anyway, I'm not gonna be tweaking design now So I wanted this gradient to move with the slider right now it's fixed at 50% But I can use calc and use the the the value Variable and the value variable goes from 0 to 100 so I need to multiply it by 1% and as you can see Now works now it changes based on the value It looks kind of horrible, but that was the simplest demo I could come up with Anything else would have like a lot of CSS properties just for styling and I didn't want to clutter the actual the demo Another in effect I talked about in some of my talks a few years ago was doing a typing effect a typing simulation with With CSS how you could use animations for that So the main idea was you had two animations one for for emulating the current Which made it blink from a border color of transparent to a border color of the of current color Which is the default for borders And you can see how this works on the current It's already applied because it's kind of unrelated to this demo and the actual typing was done by animating width from zero to The number of characters you had with the ch unit and because this is a monospace font The ch unit is which is the width of the zero character actually corresponds to the width of every character. So Let's try to show how this works at this point. There are no variables are in this demo yet So let's try to animate from zero to the current width I'm applying the typing animation the two keyframe is automatically computed by the current state and let's say ten seconds and now If I apply it and unapply it if I apply it again You can see that it doesn't quite work yet because we need the steps timing function And we need to set that to the number of characters as well So now it works However, it's not very maintainable. You can do it for like the heading of the of each page But you have to do it individually and you can still you can set it with an inline style, but it's really messy So the good thing is that with JavaScript You can go all over all these elements that have a class of typing and you can set a CSS variable of length to the length of their contents and now I Can I can use that variable here to make this effect? work Regardless of how many characters my heading has or my paragraph in this case so here Okay, and now you might be thinking this looks exactly the same as before. How do I know you're not like messing with us? So let's change the text to CSS variables all and apply it again and You can see that That's a bit too slow But it works and the reason it's slower It seems slower than before is because the duration is 10 seconds regardless of how many characters I have So I need to also vary the duration So I use calc again With length and I multiply it by the number the duration I want for every keystroke Let's say point two seconds because I'm kind of running late so you can see the Now it works regardless of how much text I have I can even reduce it to CSS and if I Apply it again the keystroke every keystroke has the same duration whoops And last demo because I'm running late Is so it's pretty popular these days to vary CSS depending on the scroll position of Either the whole page or a specific element and you can do that with CSS variables as well So here I'm getting all these I'm getting all the elements with a class of scrolling I'm adding an event scroll event listener on them and every time they're scrolled. I'm calculating. What's the maximum scroll? It's this it's the whole height of their content minus the height of the element and then I'm calculating how How much are they scrolled compared to the maximum scroll so that I get a number again? From zero to one and then I can do a lot of things with that number So and I'm setting that I'm setting a CSS variable or with of scroll to that value So now I have a gradient here that is hard coded to 20% regardless of how I scroll so I'm gonna use my trusty calc and multiply 100% by the value of scroll and now as I'm scrolling the gradient varies and Just like all the other demos I can change the presentation without having to do anything with the JavaScript if I want instead of this Instead of this kind of gradient to have a progress bar at the top and I want to set like background size to Something like this and I want to make this Red and I want to make the background not transparent but white I can do that No need to change the JavaScript. No need to bother any developer if I'm not writing my JavaScript It just works so I think CSS variables are a revolution for separation of style and behavior and they're coming at exactly the right time but exactly the Time that there is all this about Let's move all our CSS to the JavaScript and let's move all our HTML to the JavaScript And let's move everything to the JavaScript and let's just have JavaScript like consume the entire web and everything So There are no answer to that These are the the specs The first one is the stable spec the last the second one is the the editor's draft, which is like the most updated one and One last thing very very quickly So CSS variables are the present not the future. What is the future? There are many discussions about Custom app rules custom functions all sorts of things one thing that is a bit more near future than the others is the Ataply rule because it's already supported in Chrome behind the flag, but still Which lets you do native mix ins. So for example, I can have like a border Here like I have two declarations and I'm saying at the ply this Dash-dash PG and dash-dash PG is a set of declarations now and I'm applying all of them By using the other play rule Sadly if I use a variable in here, let's say foo you would expect that This would work right and you would get a red background so you could have mix ins with parameters Sadly, it doesn't work what works is if I if I put foo here So variables are resolved based on the defining scope and not the calling scope, which I think is very unfortunate Thankfully, this is pretty early stage. So maybe it will change in the future. I don't know Anyway, that's all I had for you today. Thank you very much That's how we are great talk Leah we I won't even worry about sitting down over there because we're we are short on time But I do have one question that came up. What are the what's like the performance implications of Handling CSS variables and JavaScript and have you done any like performance work? So I haven't I haven't measured performance, but I've been using them extensively and I haven't noticed any slowdown or anything So pretty pretty perform it. Yeah, are you using them at like a massive sort of scale of completely Like rewriting all of your code where you're for your components and doing it in this way Are you using it just some smaller examples? Mostly smaller things. I'm kind of dipping my toes in it For now, do you have any projects that down the line that might be bigger that are that you're working on? Yeah, yep, but I can't talk about that yet. Oh exciting good. Well, we look forward to that. Thank you so much great talk