CSS Custom Properties

[00:00:00]
>> Jen Kramer: What do we mean by CSS Custom Properties? Anybody wanna think about a definition for this?
>> Speaker 2: You can create variables or whatever,? You can define your own thing in CSS.
>> Jen Kramer: You can define your own thing in CSS. Yeah, they're kind of like variables, but with quirks, and that's due to inheritance.

[00:00:21]
So this is the part that concerns me about CSS Custom Properties. I think they are the coolest thing ever, but I understand inheritance and I understand the cascade. [LAUGH] And I know that a lot of people don't. So this is where the power comes in. If you can leverage the cascade and you can leverage inheritance this stuff becomes amazing, okay?

[00:00:42]
So you're gonna declare your custom field within a CSS property. So the part that's gonna be most unusual for you guys that are used to working with variables, whether it's in SAS, JavaScript or anywhere else, is the way that you're gonna declare these variables. It's a little weird, okay?

[00:00:57]
Cuz it's still CSS, so you gotta put it inside of something. The values are gonna inherit, but it's CSS inheritance. Yeah, which means that there's scoping involved, depending on where you declare your variable. It's gonna drive what gets inherited, yeah? We're gonna spend a lot of time on this today.

[00:01:17]
And you can use these things with JavaScript, so JavaScript can manipulate a CSS variable. And that's literally all I know about it, okay? Cuz I am not a JavaScript person. So there are articles out there, and I'll refer you to those articles about how you can manipulate CSS Custom Properties with JavaScript.

[00:01:35]
So here is the can I used, again I took the screenshot on August 9th, and you can see here what the support looks like, in other words none for Internet Explorer. Sorry, okay? The other places where it's none is IE, so basically IE is just the thing, right?

[00:01:51]
And Blackberry, that's the other one, and Opera Mini. Opera Mini tends to not support anything, it seems like. So those are your problem areas, okay? And otherwise it's 92.5% support on Custom Properties. When I started talking about this, I did my first talk about Custom Properties back in November, and at that point in time it was at 87%, so this is growing really, really quickly.

[00:02:18]
>> Jen Kramer: Okay, very, very new area here. So this is the way that we're gonna wind up declaring our variables, variables, okay? Anyone ever seen this selector before, root? Yes, you have.
>> Speaker 2: I've written it.
>> Jen Kramer: You've written it? What do we mean by root?
>> Jen Kramer: I'm looking at a bunch of programmers who don't know what root is?

[00:02:47]
>> Speaker 3: The root to the dom.
>> Jen Kramer: Yes, it's the root of the dom, okay? Effectively in HTML and CSS, it's the HTML tag, right? But as JavaScript developers, you know that there's actually a little bit beyond that, right? So when we say root, we do mean root. Okay, the very root of the document, think of that declaration as global variables, okay?

[00:03:10]
So now you've scoped your glut your variables globally, so here we've got a primary color and color the primary color cuz that's I think required by law now right? And in your in your styling, you have a primary color. Here's a gap, okay? So you can't call them whatever you want, you're going to start declaring them with the double dash, that's gonna indicate that this is a variable, all right?

[00:03:32]
Then when you refer to it in your code as you go down here, you're gonna use the word var, parentheses, and then call your variable inside of it, okay? Not difficult, the syntax is not difficult, the hard part is the inheritance and the cascade. You can do math with it, as you'll see here in my last example, so there I am using cap.

[00:03:53]
So now I'm pulling in a gap with a value and I'm multiplying it by 5 pixels, I don't know why I'm doing it but hey, there it is. You can declare all kinds of various things as variables, okay? So here I've got colors, widths, URLs, multiple values. The cubic bezier, again that's an animation thing, okay?

[00:04:12]
So all kinds of wild and crazy things. CSS will do zero error checking for you just as you've come to expect. So if you want the say the color is one rem, you go do that, okay? The color should not be one rem, but CSS will be perfectly happy to go on ahead and run that for you, okay?

[00:04:32]
So you're going to have to check to make sure that things make sense.