Filtering with CSS

[00:00:00]
>> Kevin Powell: With all that out of the way, we're gonna get into more complex things and start growing both our JavaScript and our CSS a little bit. And so we wanna stay organized with what we're doing. We're gonna start by filtering the guide. And I'm gonna copy this selector here just to show you how it works, instead of writing it out, cuz I'd probably make a mistake, because it's kind of complex.

[00:00:18]
But I just wanna show you that it's possible to create filters using CSS only, and then caution against doing it, because there's lots of CSS-only solutions out there that do work. Since I'm not gonna keep this, I'm not gonna put it in a layer, I'm just gonna put it at the bottom here.

[00:00:33]
And I'll explain what this is doing. This is actually one selector on multiple lines, but I broke it down because it's really long. And this is using has, which is CSS. So I'm looking at my mushroom guide, if my mushroom guide has the ID of season. So if we come look here in our guide, the guide is up higher, I didn't put the IDs on them, on this select, I will add the ID=season.

[00:01:06]
And on this select, we can add an ID= edible. And so, I can say if the mushroom guide has a season and the value of the season that is spring is the checked one, so it's actually the selected one. So we can go and do that, we'll scroll up to our list, talking about scrolling a lot.

[00:01:26]
That's our spring. So I can select my spring, and then we can say that the card, so a child that's a card, that's not has data season spring, and we can filter it that way. And it doesn't look like it actually worked right now. Did I save my file?

[00:01:43]
I didn't, there we go. It's filtered and I only have my two spring ones. And I'm just saying that it's a display none in that situation. And so I could actually copy this and paste it and then do the same thing for summer and summer. And it's going to work.

[00:02:00]
But nobody's gonna understand what the selector's doing. And it's one of those things, like, I like playing with this stuff cuz I like playing with weird selectors and seeing what you can do. And there is value in learning how these things work and understanding how this works, and it just gives you a deeper understanding of has and a little bit more of CSS.

[00:02:18]
But nobody's really gonna like what you're doing here. We're doing DOM manipulation with CSS, where you start having to ask is this really simpler than writing a few lines of JavaScript? JavaScript tends to be really good at making changes to the DOM. So it's like I could do it this way, but this is a really complex way to do it.

[00:02:38]
And it actually limits some of the things that I'm going to be able to do as well. If we wanna do animations or do other things. I've actually spent a lot of time playing with, trying to animate this, and it just becomes a time suck. And when you start doing that, that's like the red flag that you should throw when you're coming up these ridiculous selectors.

[00:02:58]
Again for learning purposes, fantastic. If you're just experimenting, go for it. But if you're pushing it to production and you're just coming up with these crazy things and you're breaking your head and you're having to go through these really complex solutions to get something to work, that's probably a red flag that there's an easier way to do it somehow else.

[00:03:14]
And with CSS-only solutions also, in this situation it probably would be okay for an accessibility standpoint, but you want to be really careful when there's user interaction with something. We saw that with our navigation that we were opening and closing where we had to change our area expanded.

[00:03:29]
There's ways of doing that type of thing with CSS only. There's the checkbox hack that was very popular for that type of thing for a while, but there's accessibility concerns with that. And when you're trying to deal with User interaction with CSS only, usually you're missing something along the way in terms of being able to pass the extra information that's required.

[00:03:47]
So as much as I love CSS and I wish I could only do CSS all the time, in this case, I won't suggest doing the CSS only solution. I would instead suggest doing a little bit of Javascript to do the filtering instead.