Background & Overflow: Scrollbar

[00:00:00]
>> So, the magic here, we have a bottom browser scrollbar here. And notice that, yeah, we can scroll all the way over here on the page, that's kind of ugly. The magic to make this work is, overflow: auto. And that will put a scrollbar on the wrapper as opposed to a scrollbar on the browser window, make sense?

[00:00:29]
So there's our scrollbar on the wrapper. And now we can get back and forth to each of our items, okay? And then the last thing I added here was it gap of 2 rem, give us a little breathing room between the cards.
>> Is gap a grid method?

[00:00:50]
>> It is also a flexbox method, yep. Gap can be used on both flexbox and grid.
>> Understood, last time it was column gap, this time it's gap, and maybe it would also apply if we had rows here?
>> And there's a row gap, yep. So gap would be columns and rows, in which case, we only have one row, so it doesn't matter.

[00:01:08]
Or you can call column gap which, of course, is just the columns or row gap. And I think gap has two numbers for that same reason or can have two numbers, okay?
>> And there's overflow also, a grid, or is that flexbox as well?
>> No, that is just a property, it's been around forever.

[00:01:28]
So there's a couple of values for this overflow, one is scroll. And notice that also gives you a horizontal or a vertical scrollbar. Cuz it will turn on scrollbars all the time. So auto is what you prefer [LAUGH], because then, it will only put on the scrollbar that you need,
>> And then you have some styling for that scrollbar too?

[00:01:55]
>> Yeah, then we have styling for the scrollbar too, okay? So we've got our styling there, blah, blah, blah, blah blah. Okay, so then I gave you a link to this article here, which talks about custom scrollbars in CSS. And it will talk you through all the ways that you can make custom scrollbars.

[00:02:14]
I'm not gonna go through it all, I am just going to steal shamelessly. So, there is a difference for this between WebKit browsers and Firefox. So, let's put in WebKit. We'll start with that. We have a 4R wrapper, let's see, -webkit- scrollbar. And you can set a width of 10 px.

[00:02:46]
>> Can you quickly touch upon what WebKit is?
>> WebKit is the engine behind browsers like Chrome and Safari, notably.
>> Okay.
>> Yeah.
>> So if you provide WebKit, it will be applicable to both the browsers?
>> Both of those browsers.
>> Not to Firefox.
>> But not to Firefox, correct, yep.

[00:03:06]
Did I get that right? Wrapper:: -webkit -scrollbar{ width: 10 px}. I think I did, it looks like it disappeared, have faith. Wrapper ::-webkit -scrollbar -track. Background-color: var (--tan);, okay? So we've set the width to 10 px, we couldn't see it there for a moment because it was the same color as the background.

[00:03:40]
Now we have our track, which is sort of that, what was white before, now we have it as tan. And then we can add .wrapper:: -webkit -scrollbar -thumb. And this, of course, is the little doohickey [LAUGH] that you move back and forth. And box-shadow: inset 0 0 6px rgba(0, 0, 0, 1).

[00:04:13]
That came straight out of this article. And basically, what that does is, it just puts a shadow on the little thingy, the thumb, I guess. I don't even know what you call that. What would you call that normally?
>> Handle?
>> The handle for the scrollbar, I don't know.

[00:04:38]
Anyway, so that's gonna style that. Yes?
>> How does the double colon modify the wrapper, and is there a difference between a double colon and a single colon?
>> Yes, absolutely, there is a difference between double colons and single colons. Double colons are pseudo-elements, single colons are pseudo-classes.

[00:04:56]
And a pseudo-element is things like before, after. First line, first letter are all pseudo elements. So basically we're modifying the properties of that particular item. Whereas a pseudo class often has to do with states. So hover, for example, hover, visited link, that kind of thing. We're modifying states of the link in that particular situation.

[00:05:22]
So I am just putting in what the article told me to do. Anything that starts with a -webkit is webkit specific. These are not actually W3C supported properties, okay? So that's the WebKit way of doing this. You're gonna love this for Firefox. HTML [LAUGH] {scrollbar-color: var (--coffee) var(--tan); and scrollbar-width: thin;, okay?

[00:06:03]
So you won't see anything happen here on my screen because I am using Chrome. But if you wanna save your CodePen and then open it up in Firefox real quick, you will see that that has a tan background with the thumb, the handle, whatever, will be brown. And you can move that back and forth, okay?

[00:06:27]
And true to Firefox's form, those are the actual properties that are probably in preparation for support by the W3C. So it could be this WebKit stuff will disappear, but this is how we do it at the moment.