(electronic intro chime)
- [Instructor] Custom properties introduce
a new level of configuration and customization to CSS
and being able to hook into
and manipulate these custom properties using JavaScript,
opens up a whole new dimension of possibilities.
In this example, I've used custom properties
to set the color and background color
of each of the link items.
You'll notice here, I'm setting up the color
to use the custom property color,
and then there's a fallback value, black,
if we don't have color defined,
and the same thing for background color.
There's a variable or a custom property called BG color
and then a fallback call for transparent
if there is no custom property defined.
I'm using these fallbacks because in the main style sheet,
there is no custom properties to find.
These two colors here,
the color and background color are never defined.
There are some other custom properties
defined at the very top.
If we go look, we have max width and white space,
but there's no color and no BG color.
This is one example of how we can use custom properties
to do really advanced styling for individual items
because although color and BG color are not defined
in the style sheet,
they are defined in line on one of the elements.
You can see it here.
We have the element, then a style attribute,
and then we have color and BG color defined
and as a result,
these custom properties kick in for this one element here.
So that means we can define
how the styling is going to happen in our style sheet
and then use custom properties only where necessary
in line in the elements themselves,
which is really cool
and we can see how this could easily be extended
using JavaScript by injecting custom property values
into elements when needed.
So this begs the obvious question,
how do we access custom properties using JavaScript?
The answer is the same way we've been doing it so far.
So here's an example of how to access
the in line custom properties for that element.
We first go grab the element itself,
and then we say console.log(listItem), so the element,
style, and then use getPropertyValue
and call for the property value.
Run this in the browser and you see in the console,
we have the value for that property.
And this is the value of the custom property
defined in line.
We can go back and look at it.
It's this value right here.
You'll also notice I'm using get property value here
because the custom property name starts with two dashes
and as we've now learned,
two dashes as a JavaScript property name does not work.
If we try to say listItemstyle.--color,
it simply wouldn't work.
It would be a syntax error,
so here we have to use get property value.
It also means we can't do some of this traversing
that we've been doing previously
because the custom properties are just different.
So that's in line styles and it makes sense.
What about style sheets?
You'll remember in my style sheet,
I've defined some custom properties here at the very top.
So this is the first rule.
That means if I go and say document.styleSheets[0],
I get the first style sheet.
Then I can go in and grab the CSS rules
on the first element from that.
So I'll say console.log(styleSheet).
That gives me the current style sheet
and then I'll say cssRules.
And here I want the first rule
so that has index number zero.
And then I want to know about the custom properties.
So here I have max width and white space.
So let's say style.getPropertyValue and --max=width.
Save, back in the browser, 70 VW.
And that's really all there is to it.
Custom properties behave exactly the same way
as any other CSS property.
The only thing you need to keep in mind is that
there are no JavaScript defined property names for these.
So these camel case property names,
because the custom properties always start with dash dash.
So here you have to use getPropertyValue
to get at the property value.
(upbeat electronic music)