CSS [Variable] Secrets

before I start speaking about CSS variable secrets I feel I should introduce myself a bit so hola soy Aliyah this is pretty much all the Spanish I know so the rest of the talk is gonna be in English sorry about that and here's a little-known fact about me I'm originally from Greece and specifically from the island of Lesbos which technically makes me geographically lesbian one of the very few you ever made you might have used some of my stuff I like making them I'm an invited expert in the CSS working group so if you have any questions about standards and the CSS working group and all that you can either ask me after the talk or find me anywhere at the conference I'll be here the whole day my day job is a little odd for the last three years I've been exploring academia I'm a researcher at MIT we're trying to make web programming easier and more accessible to more people you might have heard about our project Malvo which is extending HTML to describe web applications and I wrote a book if you have it I can sign it just don't be afraid to speak to me to come find me I'll sign it so CSS variables when many people when they hear of CSS variables they wonder what is there to talk about I mean there isn't that much really and that's because when they think of CSS variables they imagine of something like they think of something like this how many of you have think of have used sass or less variables almost everybody excellent this talk is not about them nope this talk is about something much better something that's available in all your browsers and that can do so much more than preprocessor variables so probably the very first variable a little history here probably the very first variable we ever got in CSS was current color and it came from SVG a long time ago it's supported everywhere even 99 how many of you have heard of current color most of you excellent so as you might know current color always corresponds to the value of the color property so you can change the color and it chases everywhere so I'm using it in the CSS gradient here it changes in the gradient as well it's useful but a bit limited so CSS variables also called custom properties are a generalization of this concept they are defined with a double dash in the beginning you might think that this is very weird and kind of clumsy I agree with you the double dash actually comes from the idea that these custom properties are like a prefixed property with an empty prefix remember those - WebKit - so here the prefix is empty there is no WebKit or most part it's just an empty prefix and you use them with the VAR function like this and I can do this here too and I can keep changing it and it works the same way as it did before you might be wondering so okay works the same way as it did before so what did we do here what's what's the point but this is not just about colors I can take this 20 pixels here and turn it into another variable corner size or corner for short and I can give it a value of 20 and you can see it here I can now change this property individually I don't need to change the entire gradient and you might be thinking especially those of you that have used less and sass okay what's the point I can do that in Lesson sass but can you do this in Lesson sass the CSS variables can be used anywhere you could even change this with JavaScript and we're gonna see some examples of this at the end so this is the main difference of CSS variables over pre-processors they're dynamic they're live you can change them at any point even after your page loads you might have noticed that when I cop when I cut and copied when I cut and paste this corner declaration I lost my corners and that's because I have not defined a default value I can't however I can do it as the second argument of the VAR function and now if I have no corner property to find it uses that default value I can still define my own and this second argument is called the fallback so our first takeaway is that CSS variables work just like normal CSS properties take a look for a bit at this small HTML structure it's two dips a one has a class of block one the other one has a class of block two and they each have a div inside them we're going to be using the structure to demonstrate various things throughout the talk so notice that here have defined the outline function property as the value of the outline variable everywhere on every element and I've only defined a value for the outline variable on block 1 do you notice anything you might expect that only block 1 should get an outline because that's the only one with an outline property defined let me remind you this is the structure however its child also gets an outline the div inside it also gets an outline why is that it's because custom properties also inherit by default you can check however to change this if you go to the universal selector and you define your variable as initial that cancels inheritance why does that why does that work because when you target an element directly even with us even with a rule that has zero specificity like the star selector it still has higher precedence than something inherited so we're basically saying here that if if an element doesn't have a value for the outline variable directly then just set it to initial initial is a keyword by the way that works in every CSS property including custom ones and it just means the initial value that this has if if there was no rule setting it of course I can still explicitly inherit on a case-by-case basis I could go here and say inherit and I still get the same behavior but when I changed this to block two I don't so the second takeaway is that CSS variables are inherited properties not just any property not just like any properties but you can change that so we get the best of both worlds so some of you might be thinking at this point of like things you could do with CSS variables possibly things you did with sass or less in the past that maybe you can move to CSS variables or even things that you couldn't do with less and sass that you could do with CSS variables so you might consider okay so I have this folder with all my images it would be kind of cool if I could just store the file name of the image in a variable and just use that so you might try to do something like this let's say an image variable like that and we might be thinking how can we put them next to each other ah we've seen something like that in the content property so we try something like this like putting the strings next to each other it doesn't work why doesn't it work it doesn't work because CSS doesn't really have concatenation you cannot really put two strings together we can only do that in the content property and that's because the content property is defined like that it's not a CSS wide thing eventually we're gonna get away to do to do string concatenation probably through a function or something but we don't right now there is no way to put two strings together so I'm our next attempt it might be just because we're trying things out to do this and it should work right we've seen CSS variables used inside a function like in the very beginning of this talk I used one in radial gradient so why is this not working this doesn't make sense and you would be right if you're puzzled it doesn't make sense it's a CSS bug it's only in this function where variables are not supported only in the URL function the reason is that the URL function is the first function we ever got in CSS so it has some really weird parsing rules you can use it with or without quotes and since you can use it both with and without quotes it has to try to parse everything inside it a URL if you're not using quotes so it basically considers all of this until the first parentheses a URL and since it doesn't make sense as the URL and doesn't resolve to anything you get nothing so our first attempt our third attempt might be to also include the URL function just because we're desperate at this point and of course this will work but it's kind of useless so to sum up we cannot concatenate because that's a CSS limitation we cannot use variables in URL because that's a CSS bug that also means no generating data your eyes like a really cool use case for variables would be generating like dáil SVG data your eyes via variables I think that would enable so many things sadly we can't do it in the third case which works is if you use the entire URL in a variable as a variable it didn't work until recently we couldn't decide how to resolve the URL if they're in separate style sheets but now it does so the third takeaway is that CSS variables plus URL function equals chocolate ice cream some more WTF because this is CSS after all so you expect them I imagine so if you use an empty value like if if you're if the value of your CSS variables empty that's invalid no surprises there right however if the value of your CSS variable is an is a space character that's valid and the value of the variable is a space character which is unlike any other CSS property also upper case pool and lower case for different variables which is also unlike every other CSS property but there you have it so I showed you quickly in the beginning that the second argument of the VAR function is the fallback and I know that some of you must have been wondering why do we need a space a special fallback mechanism we have a fallback mechanism you know the C in CSS it means cascade why can't we just use the Cascade as a fallback you know how we usually just have two declarations and if the browser doesn't understand the second one we get the first or if the second one is invalid we get the first and so on and this this works in in CSS variables as well it works just fine if the browser doesn't understand variables so in this case if the browser doesn't understand variables what do you expect to get read write and read we get and so the purpose of this fallback is not to define what happens if the browser doesn't understand variables because then it wouldn't understand the full but either it's to define what happens if the variable is not set if you've defined your style and it uses variables and there is no value like these variables are set to their initial value and in that case if accent color is not set you get orange which is our fallback here and of course if accent color is set to a specific color you get that color so here's a question what do you expect to get if accent color is indeed set but it's set to something that doesn't make sense for background like 42 degrees raise your hands if you expect to get red very few hands good by the time we get there the Browse browser has thrown away any previous declarations it doesn't even know there was ever a red there all it has is our second VAR declaration raise your hands if you think it's gonna be orange a lot more hands this is a reasonable assumption but no orange is this fallback is only if the variable has not been set if it has been set then we then the fallback is not used what else do you think it might be shout it if you have an idea of what like what color it could be someone said transparent and yes that is correct it's gonna be transparent and the reason is that when we defined variables we introduced this new concept in CSS that didn't exist before called invalided computed value time so what does this mean it means that when since when we get there we cannot fall back to any previous declarations like we can't for any other invalid value we needed to come up with something different to make variables possible we couldn't just say we couldn't just say okay the browser has to reparse the entire CSS again that wouldn't work that would be extremely slow so we had to come up with some other kind of behavior and invalid that computed value times this behavior it means if if this computed value doesn't make sense after you substituted all the variables just fall back to your initial value and for background this is none non transparent and stuff so you basically get a transparent background you would you get the same thing that you would get if you use background initial so the first takeaway is that invalided computed value time is initial and you might even though this concept was introduced for variables you might start seeing it in other places in CSS like calc for example could benefit from it we'll see how shortly another thing about these fall backs is that you can daisy-chain them you don't just have to provide the fixed value you could provide another variable as a fallback and another variable here the fallback of color one is color 2 and the fallback of color 2 is color 3 in the fallback of color 3 is red so how many of you have used like Java Script or any other programming language that has like an order of operations a few hands I would say about 30% maybe so those of you especially those of you that are familiar with these languages you might think that in this case for example you have two divs the first one that says CSS is awesome the second one is the one that's inverted and it has the class of declarative I can actually show you the HTML it's here and let's say we want the second one to be 1m taller than the first one so here we've decided a size for both depths and we've set the height to the size and you might be thinking okay so if I want the second one to be a 1 I'm taller than the first one I could do something like this we can get the value of size and add 1m and then to our surprise nothing works anymore it's the same as if we didn't have a height at a height property at all see if I comment the Scheldt the height and the black div doesn't change why why is that why did that happen the reason is that CSS is the clarity just like the black Dave tells you it's it's not imperative like other programming languages with which have an order of operations where size could have this value and then you add one to it and it has a different value there is no time there's no time line there's no it has this variable used to have this value but now it has this one the only the only such thing could be if you change it with a pseudo class or something but for the same rule for the same selector it always has the same value so this wouldn't work what would work of course would be if you did this so the fifth takeaway is that cycles make variables at invalided computed value time this is what's happening there the reason that height reset the reason that that height basically became as if we weren't setting it to anything is because height basically became equivalent to initial to its initial value because it became invalid the computed value time and it's it's basically a domino of invalid at computed value time because we have this value size but because we have a cycle here size refers to itself and we can also have cycles if like a refers to B and B refers to a there can be cycles of all sizes so size becomes equivalent to initial so because we're using we're setting height based on size that also becomes its initial value because size doesn't have the size doesn't have a value at this point so here is a little bit a little question again it's very very similar to what I asked you before except I've inserted a line the line I've inserted is this this did not exist before the rest of it is exactly the same as the previous question accent color is set to 42 degrees and then background red and background var accent color orange so what do you expect to happen here what color do you expect to get I here transparent anyone else any other ideas so those of you that said orange are correct it is orange so can you think why it's orange so the reason is at this point this is a red this is a red herring it's it doesn't exist very defining accent color we can't we can't just fall back to this similarly with background red we can't just fall back to back to background red this is what we're stuck with and this is what we have to use so because accent color is defined with a cycle it becomes equivalent to accent color initial and since exit color is set to initial it's the same as if it has never been defined the second the second argument fallback is not just used if the variable has literally never been used anywhere it's also used when the variable is explicitly set to initial value because it's the same thing as far as CSS is concerned of course if we remove that useless declaration now we get transparent so I know that I'm speaking about variables and some of you might be thinking this is cool but what somebody please think of browsers like I couldn't use this in my project my client will kill me like surely this is not supported anywhere right you might be surprised so CSS variables are actually supported everywhere admittedly you might not be able to depend on edge 15 but support is on every major browser and for those of you that need to support slightly older browsers there are ways to get around it for example the ad supports rule the app supports rule is like the native version of moderniser how many of you have heard of supports a few hands up there how many of you have heard of moderniser way more hands okay you don't need moderniser anymore you can just use that supports it's not just for CSS variables if you wanted for example to experiment with CSS grid and you obviously you can't depend on CSS grid now you can use something like this and then put all the grid rules inside here and for CSS variables you can put any pair of since every value is valid you can put any value and any CSS variable so I choose to use - - CSS colon variables just because it look it reads kind of nicely so any rules you put inside here will only be used in browsers that support CSS variables you can also do the inverse you can put not here and now if all the rules inside here will only be used in browsers that don't support variables I would strongly advise you not to do that because if you do that it's the the rules that will actually be used are those are in browsers that don't support variables and support that supports which is kind of a smaller set like I ate wouldn't get these rules but if you do it in this way every browser that supports variables also supports app supports so you're not limiting browser support in any way and you could do all sorts of fall backs that way and for those of you that really like a not cannot depend on fallbacks like you maybe like a 60% of your user base is on iaith or something you could still use variables in smaller ways like let's say you have some social media icons on the footer and you want and you want like the color to change when you hover over them which is so much easier to do with variables like that would be okay to fall back to gray in ia like no nobody would blame you for it this is the support for app supports this is why I told you don't use not always writes app supports queries in a positive way so those of you that are familiar with LA with pre-processors like sass and less might try to do something like this so here notice that we have 33 in both of these so that this div has the same proportions as our viewport here 33% of the viewport width and 33% of the viewport height and let's say we want to abstract away this percentage to a variable so we do this and then how are we gonna use this percentage here you might try to do something like this and notice that it's not working and those of you that have used three processors will be like what the hell why is this not working so the reason it's not working is that the browser sees this basically as this it sees the the the variable as a separate token you cannot compose one token from a vary from two variables or a variable and something like variables are always separate separate tokens you cannot have a color for example where half of the color is in a variable unless it's a separate token unless it's in a function so does that mean we cannot do what we wanted no we can do what we wanted but it will is very common with CSS it will just be very long so to do what we wanted we will need to use calc and then we multiply our variable with 1vw I'm sorry and here with 1vh it's terrible but it works notice that if I change this it updates just fine so some of you might wonder especially those of you Larry that are especially allergic to duplication good for you so you might wonder okay what if I said 30 VW here so that I can at least save one calc and do this and then here surely I can divide by one VH so you might try something like this it should work right you can see it's not working however you would be right to be confused it should work the reason it doesn't is that when we defined calc calc came before CSS variables and that means it also came before the invalid that computed value time concept that didn't that was not a thing back then so since we couldn't say there are some cases where this becomes invalid at computed value time everything had to make sense at parse time so when we divide by a length we don't necessarily know if it's zero and that might result in us dividing by zero in some cases so what we did was we said you cannot divide by lengths period you just can't you can only divide by numbers so as a result when when your variable is a length you cannot go to anything else you cannot do anything else with it if you have a number like a pure number you can go to any unit by just multiplying with one in that unit if you have something with a unit you cannot go to the number you just can't there's no way to do that in CSS right now so that takes us to our 6 take away use variables for pure data not CSS values even if you think you never gonna need the pure number chances are you'll be proven wrong so guard against it some of you might be wondering at this point how many of you have used CSS animations excellent most of you how many of you have wondered how these two work together during this talk okay I expected a few more anyway even if you hadn't wondered about this now maybe you are so there are two ways to use variables in keyframe in in CSS animations the first one the first question would be does the VAR function work in key frames so let's try to do that we can have a color one which is our first color and the color two which is our second color and we can go here and replace color one and then we can go here and replace color two and you can notice that it still works just fine so the VAR function works just fine in animations but if you wondered at all about variables and CSS animations you probably weren't wondering about this you were wondering what would happen if I try to animate a variable like what if I use a variable in multiple places and then I just run a CSS animation over the value of that variable what would happen then so I'm gonna refresh to the slide okay to reset it and then I'm gonna define a background the background color is the value of the color variable and then I'm gonna go here and change this to a dash dash color notice anything where's the animation there's no animation anymore where did that happen so if we look at the spec it says CSS variables can even be transitioned or animated yay but since the UA has no way to interpret their contents meaning the UA doesn't know what you really have there could do you have a color do you have the length like what could you possibly have in those variables they always use the at 50% behavior that is used for any other pair of values that can't be intelligently interpolated meaning if the browser cannot figure out how to go from value a to value B this is what you get and with variables the browser can never figure out because it doesn't know what you plan for these properties so the seventh takeaway is that CSS variables plus animations equals chocolate ice cream but wait there is a solution in the near future sadly the solution is in JavaScript which is not ideal like it controls the CSS thing why would it have to be in JavaScript but that's how it is so you can register your own properties and you can say what the syntax is what values you expect where in this case color values and you can also say like the initial what's the initial value whether it inherits so you don't have to use that trick so let's run this and let's see what happens see now it works now it's just as smooth as it was when I was animating background color so yeah it's in the future it's not quite here yet but you can experiment with it in Chrome it's behind the flag so actually CSS variables plus animations equals love but in the future some common use cases so the most basic of components is probably a button but everything I say applies to pretty much any kind of component whether it's defined via web components or some sort of framework or you're just including some library some CSS basically this applies to any component you can imagine so here we have a button and we have a themed version of the button with a class of pink and this is the CSS for it this is the CSS defining the styling of the component and this is the CSS defining the pink theme now that there's a lot of repetition here how can CSS variables help us let's see so I can define a color variable and then set color based on that and I can replace all instances of black with that you can see it still works the same when I hover I wanted the background to be the to become the border color and the text color to be white still works the same but you might be wondering okay so how did variables help us here okay we can change it one place but we have the same amount of code not in the themes though the good thing is that now we can delete this replace this with dusters collar and delete this entire rule and any other pseudo classes or special cases anything like we can just delete it this becomes the only thing needed to theme our component and it still works the same but the best thing is not the reduction of code it's not the reduction of duplication the best thing is encapsulation it's weak I can change how this very house this component is styled and you that cups that have used it and themed it don't need to know anything you can just update your CSS file for that component and you get the new styling you don't need to change the single thing in your code let's say I decided instead of this abrupt background change I want to do a transition so I specify a transition one second book shadow cuz I'm gonna do this with box shadow and instead of background I use box shadow 0 offset 0 blur 1 M spread and in sets so that it's inside the element and now I get this styling and notice that I also get it in the themed component and I also get it in any theme component I won't like I could even style one like this and it still works just fine and I don't need to know anything about this change so the nice takeaways that CSS variables and enable theming independent of CSS structure which I think is hugely important and it also works with web components by the way CSS variables peers inside shadow Dom Brown boundary you might have noticed so here I have to set the value of color to a default black in this case but I out there in the wild you wouldn't want to do that because your selector would not just be button your selector might be some complicated string of classes or something and then anybody seaming your component would have to use higher specificity than that you don't want that so ideally you want to use the fallback parameter but notice that when I do that there's a lot of duplication like I had to repeat this three times and probably way more in a real component of course I could do something like this and then I could go here and do this but it's kind of horrible right so what can I do instead I can define my entire this entire thing in a variable like let's call it color D or something ugly like that and then here I just use color D and here as well and here as well and I just don't tell anybody about it I just don't mention color D anywhere in my documentation I just say if you want to style this component use - - color and color D is based basically becomes private by convention which might make your skin crawl especially developers but this is how we had private variables in JavaScript for many many years so CSS finally got there so a fantastic way is that the fault default values are possible yes I just coined the term default default values and you do it like that another huge benefit of variables is responsive design you don't have to override the ton of rules you can just define a few crucial variables and they just change let me get out of full screen mode and I'll show you that if I change this resize this window yes finally so you can see that if I go beyond like less than a thousand it just changes automatically so obviously in a real use case you wouldn't just have one declaration because here it's less there's there's less of a point but you could you could use gutter in tons of places for padding for margins for even line height all sorts of things and you just don't need to override it in one place and it just changes so xi takeaway is that CSS variables make responsive design easier too now after some common use cases let's go to the cool ones so clip path is a really cool property it comes from SVG but in CSS it got a much nicer syntax however it still needs a prefix in WebKit and in the past we used tools like prefix tree on autoprefixer I even wrote prefix free but these days you don't need these tools you don't have that many prefixes to use we're moving away from prefixes but there's still some leftovers so WebKit clip path is one of those leftovers sonic if since we only need like a very like very few prefix properties we could do this trick we could we could use a variable instead of the property and then set both properties to that variable so only when that variable is set will we actually get a clip path notice this so I'll try to do a diamond here so 0 % horizontally 50% very claim and then 50% horizontally 0% vertically 100% horizontally 50% vertically it's getting there and 50% horizontally 100% vertically yay it's there I always worry at that point so and I could use this anywhere I could use it in all divs but only used on the inner divs I could say block one look one day like I can just use it like a normal like like pretty much the same as the clip path property actually that's a bit of a lie I can almost use it like the clip path property except in one case I cannot animate it there's even with CSS not registered property there's no way to declare syntaxes this complicates it so there's no way to animate this variable but if you don't need animation that could be a good alternative so the twelfth takeaway is CSS variables enable you to set multiple properties at once you can also subset CSS properties and pre fill some of their arguments for example here I want to have a property that there's the same thing as box-shadow but I don't have to specify a color it just it pretty fills Rebecca purple as the color and notice that I can use this exactly the same as box shadow it has only all the arguments work the X offset the y offset the blur they all work but the color is prefilled it's always purple in fact I can't even override it I cannot say right here just becomes invalid because now it has two colors so the thirteenth takeaway is that CSS variables let you create single property make sense sadly you can create multi property make sense which is what we really want but it's a step there programmers might be familiar with the term function carrying it's kind of like that also we could create our own lunkheads in a way so here it looks it like a lot of code but you might notice that most of it is repetitive I'm setting a lot of variables for different components of box-shadow and then I'm setting box shadow to the values of these variables and if I have to leave one of them without a fallback in this case blur because otherwise every element would basically have a shadow so to get the shadow I need to define box shadow blur at the very least I'll set it so maybe 10 pixels something bigger and then I can define a color let's say blue and now I can say block 1 hover and I can only override the color notice that when I'm hovering the color is red I didn't have to repeat any part of the box shadow it functions like a long hand like a short hand so the 5th 14th takeaways that CSS variables enable you to create custom long hands and in some cases you can even create your own properties in a way so here I've set the the before pseudo element of every element to the value of the prepend variable which will only which will only have a result if the prepend very variable has a name and since variables inherit they also inherit inside their pseudo elements so I can do things like this and I can apply this to anything or just the inside ones and so on it works like a normal CSS property no need to type an entire pseudo element so CSS variables also enable you to define your own properties in some cases I mean it's a that's a little bit of limited so CSS variables since they are native part of the web platform they interoperate well with every other web platform technology like SVG or JavaScript let's look at an example in SVG how many of you can't code SVG even a little bit so quite a few ok so I don't expect you to understand tire SVG here this is the important part the two irises in the two eyes so I have some CSS here and notice that if I change the CX here from about 25 to about 75 I can get the eyes to look in different directions but 25 pixels and 75 pixels that are a little arbitrary so it would be nice to have a variable that actually means something like a variable that ranges from 0 to 1 for example so I could do that like I could have a calc function with 25 pixels which is the minimum plus 50 pixels which is the difference multiplied by the value of our variable and now I can just change the variable from 0 to 1 which is much more easier to understand so CSS variables plus SVG equals love now see my favorite part CSS variables plus JavaScript the good thing is that we already have JavaScript methods for getting and setting CSS properties and since since CSS variables are just CSS properties we can use these existing methods so we can use get property value on an element style those of you who don't write JavaScript don't worry I'll go through like I don't have a lot of JavaScript code and I'll go through the entire thing so there's get property value to get the value of the property on the inline style you can also get the you can also get use the same function on what get computed style returns to get the computed style so you can get the value regardless of where it comes from it doesn't always need to be in the inline style and you can also set it on the inline style via a set property same the same methods we would use for any other CSS property they work with variables too so our first example we are setting to CSS variables to the value of of the mouth of the cursor basically to a percentage of the of how much the the cursor is moved horizontally and vertically so we get the coordinates and with the we divide by the width of the viewport inside a mousemove event listener similarly with the vertical one and then we set two properties if we if you're using my word it can even be as small as that and be just in the HTML and let's use this mouse x and Mouse Y property so here I have a fixed radial gradient it's fixed in the center but I could do something like this I have a hundred percent x mouse X and now I move my mouse and it changes and I could also do the same vertically and I move my mouse and the center of the gradient changes and I could even go and change how this gradient looks and I don't need to change anything in the JavaScript this is especially when you have separate teams writing the JavaScript and separate teams writing the CSS this means that you don't have to go to the JavaScript developers and pester them every time say can you change this and they're like oh I can't stand your designers we always change your mind well now you don't have to you just tell them to code the they you write some JavaScript to set the variables for the like pure data that you need and then you can do whatever you want in the CSS in fact these variables don't even need to be purpose specific remember this we could change this and use this mouse X variable and now it changes as I move my mouse I didn't even have to think of this use case when I coded that when I wrote the JavaScript that sets Mouse X it just works for because it's it's generic enough that it works for any use case something I've often wondered wanted was to be able to set the value of to style and input based on its value you can do that with a little bit of JavaScript here we're going over all the inputs we're setting a CSS variable to their current value then we also add an event listener that says when they change update this variable called - - value so here we have a very basic slider just an input type it goes range with some basic styling and this gradient is fixed but we want it to change when we change the variable so we can change this the static 50% to something more dynamic like 1% multiplied by the value and now I can I can move the slider and the styling changes obviously many most of you can make it much prettier but you get the idea also it's very common to have these days especially to have different styling as you scroll the container and you can't do that with pure CSS so with the help of variables you can do it with the minimum amount of JavaScript just basically these five lines you go over all the elements that have a given class scrolling in this case and then you attach an event listener that says every time this element is scrolled date this - the scroll variable - the percentage that it scrolled so here I'm getting the maximum scroll and the current scroll and I'm getting the ratio and setting it as that variable so here I'm gonna change this to be dynamic instead of 20% I'm gonna make it depend on the scrolling so I'm gonna do calc again a hundred percent multiplied by the scroll variable and Oh multiplied and now when I scroll you can see what I get and again the good thing is that I can now change the styling and I don't need to change the JavaScript let's say I just want the progress bar in the top now like this let's say I want to change the colors make maybe make this red in this white I don't need to change anything I could even I could even radically change the styling I could go here let me take this so I don't have to type it again and let's set the background color to and HSL color something like this and then I'm gonna modify the hue to 360 x scroll now when I scroll I get different colors it's super silly it's the it's the most ridiculous demo ever but I love it so yeah you could even do that so what is our last takeaway CSS variables are a revolution for separation of style and behavior there is a very big movement these days for moving CSS the JavaScript just because there are so many JavaScript developers that don't want to deal with any other language so they're trying to like move everything to JavaScript and sometimes you ask them for arguments and they tell you well JavaScript just gives you more computation like some calculations you just can't do in CSS like sometimes you're styling depends on your data or like you wanna do a square root of something so now you have all the computation of JavaScript you can use to have a to set variables and then all your styling can be where it belongs in your CSS and you don't need to do it no no more generating gradients in CSS no more generating like long lists of declarations in CSS in sorry in JavaScript you don't need to do that anymore just set a variable and then move everything else to the CSS so these are the the the two versions of the spec the first one is the stable version second one is the most current version always this applies to pretty much every spec you have a URL like the TR which is the most stable version you have the draft dot CSS WG or GUI or URL which is like the most current draft and that's all I had thank you I have stickers by the way just find me and ask don't be afraid to talk I I love it when people come and ask me questions and like talk like don't don't be afraid I don't bite so gracias thank you very much [Applause]

Channel: Coding Tech

Views: 40,646

Rating: 4.9405117 out of 5

Keywords: css, css variables, web design, web development, front-end

Id: UQRSaG1hQ20

Length: 49min 57sec (2997 seconds)

Published: Sat Jan 13 2018