Subtitles section Play video
-
(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)
