[00:00:52] Or if we want to get the value of foo from wherever, even if it comes from a style sheet, we get the computed style of the element and then we use the same method name. And most importantly, this is what we're gonna be doing a lot when we want to set a custom property on the inline style.
[00:01:16] We just do element.style.setProperty and we set the custom property to whatever we want. And that sets it on the inline style, but that's usually what we want, we don't usually want to be actually modifying style sheets. So what can we do with this? Let's look at a few examples.
[00:01:34] So here we have a radial gradient whose center is hard coded to the center of the page. We wanted to, instead, do a spotlight effect that follows the mouse, we want its center to change to follow our mouse pointer. So how can we do that? In the past, we would need to use an event listener for mouse move and recreate the gradient every time.
[00:01:59] However, today we can just set two custom properties So we're going to set --mouse-x and --mouse-y to evt.clientX and evt.clientY. And then, We can go here and use, well, we can't get just to use mouse x directly, we need to transform it first, cuz right now we just have a number.
[00:02:35] So we multiply it by 1 pixel. Right, and we also need to provide a fallback. Let's say zero. And now, as I move my mouse pointer, the gradient does adapt horizontally. We can do the same vertically. Oops, calc. And now it adapts in both directions. However, this is not ideal.
[00:03:24] Even though this already gives us a big advantage over what we would have to do before custom properties, it's not sufficiently usable. And let's see why. So let's go back to this SVG example. Let's say we wanted to set this look variable, remember it goes from 0 to 1, in terms of the mouse pointer so that we could move our mouse pointer and have the eyes appear to follow it, wouldn't that be cool?
[00:03:55] But how do you convert this number of pixels to a 0 to 1 range? Even though what we said is a pure number, it's actually a fake pure number because it essentially corresponds to pixels and we can't really do much with it. So what can we do instead?
[00:04:19] Instead of having a number of pixels, we could actually divide the number of pixels with the maximum number of pixels we could have. Which is given by innerwidth or window.innerwidth as we might have seen it, it's the same thing. So what does this give us? This gives us the percentage of the screen of the viewport that the mouse pointer has moved horizontally and dividing by inner height.
[00:04:48] Gives us the percentage that the mouse pointer has moved across the viewport vertically. And that means we can use it just the same in everything that needs to use the mouse pointer, so here we can just set look based on that. Let's default it as well, in fact, let's give it a fullback of 0.5, and look at that.
[00:07:14] So how could we do that? And this is a summary of how we can do reusable pointer coordinates. So you should prefer abstract 0 to 1 percentages rather than absolute pixel lengths. 0 to 1 can be converted to a length, if you want, you can always multiply it by viewport units, for example.
[00:07:39] But the reverse isn't possible if you have pixels even if you have pixels as a pure number, you can't do anything with them. So what about local coordinates? While having coordinates that apply to the percentage of the viewport that the mouse coordinate design is useful. Often we wanna do things that depend on the percentage of an element itself that the pointer is over.
[00:08:10] It's relatively easy to get local pointer coordinates, all we need to do is get the bounding rectangle of the element. And then subtracted from client y and client x, and then we get local coordinates for the element itself. And in the same spirit has previously, instead of having pixels cuz that's what top and left would give us, we wanna divide by the width and height of the actual elements.
[00:08:34] So we could get a 0 to 1 percentage that we could actually use for calculations in our CSS.