Transcription

I'm incredibly excited about the HASS pseudo class or the parent selector as we like to call it. It's coming to CSS very soon, it's already supported in Safari and it's in Chrome behind the flag. Other browsers will probably follow fairly soon and in previous video I've explained how it works. In this video I want to give you a couple of practical hands-on tips on how you can utilize it, how you can make it work for you. I hope you found them helpful and I hope it gives you an idea and prepares you for when you can use it in production. Let's begin. All right, I have prepared three demos on CodePen and you're going to find all links in the description if you want to play with the code and the first demo is going to be the form validation. HASS is very useful when you have a complex set of elements in a form and you want to validate those elements using CSS. You can use invalid pseudo class to figure out which elements are not properly filled out and then you can style them accordingly but it still doesn't give you an option to style parent elements for example or previous elements. Here in HTML I have a label and after label comes an input or a text area like in this case and if I want to style this based on the invalid pseudo class in CSS and I've prepared this here, elements that are invalid will be highlighted with a red border. Let's try this out. I'm going to improperly fill out the email and URL fields and now you see that my field set is highlighted with the red and also fields here are highlighted with the red color to show that they are actually not properly filled out, the user has to do something to fix this. Ideally, I also want to style my text here, email and URL with the red color to additionally highlight those problematic fields and I can't do this without JavaScript if I'm not using HASS of course because I cannot select previous element in HTML. I know that this one is invalid but I cannot select the label which is a previous element. Using HASS of course I can. So let's do this. If I select a label that has the next element which is going to be input in invalid state, I can style the label and I'm going to use the same color I have here, this is going to be a red color and you see that I have styled my label here and label here based on the invalid state of my input. Let's look at the HTML again and you're going to see that we're styling label based on the state of my input element here. Without HASS selector, this wouldn't be possible and this can be very helpful not only in situations like this but also when you have more complex DOM structure. Now in this particular example, what I would like to do is I would like to highlight these fields even more by connecting those lines here with the field set line. This way I would give user an additional hint where the problem is because if this line extends and it's connected to the red of my entire form, I can maybe even more easily figure out which fields I need to work on. So let's try to do that. In this case, we're going to style before element of our label and there you go. Now we have connected those fields and again this wouldn't be possible here without the HASS pseudo class to select previous element and style the pseudo before element based on that. And if we were to fill out this field properly now, you're going to see that it's no longer highlighted as invalid. So that's one typical use case that I think you're going to find very, very helpful to give more hints to your users when they're filling out forms on what they need to work on, what elements are not filled out properly, or even maybe what elements are filled out properly and which are in the valid state. And our next example is going to be highlighting elements. Now HASS is very powerful because you can style parent elements, obviously, based on the state of the children. And for example, this could be very, very helpful when you have a list of certain elements, you have a list of certain items like I have in this case, and you want to highlight a single one. And this is the only thing that you can do without HASS pseudo class is highlight only the active element. Or like here, I'm highlighting the element that is currently hovered. But ideally, what if I could also, at the same time this is highlighted, de-emphasize other elements? Like all the other elements could be a little bit maybe darker, and maybe they would have a little less opacity, maybe a little less color or something like that. This would be really helpful to de-emphasize and to draw attention to active or hovered element. And this tip is heavily inspired by Michelle Barker and her fantastic article on animating grid tracks using HASS. Make sure to check it out. The link is going to be in the description. And now let's see how we can de-emphasize elements that are not currently hovered using HASS. So I have here an unordered list with a number of items. So what I want to do is I want to highlight the elements that are not in a state of hover. Let's select unordered list and then A elements that are not in a state of hover. And then let's do something to them. For example, let's add a filter grayscale to make them completely black and white, maybe not entirely, maybe just a little bit. And now as you see this selects our entire list because none of the elements are hovered and that's not what we want. We only want to de-emphasize elements if one of them is in a state of hover. So we're going to extend this by saying if ul has an A element that is in a state of hover, then we will apply this styling to the A elements that are not in a state of hover. Let's see how it works. My current element is in an active state. It's highlighted. Its brightness is set to 120% right here. And all the other elements are de-emphasized by setting the filter grayscale to 0.7. And for this example, I think it would be good if we de-emphasize the color of the text of the inactive items, maybe make it a little bit transparent. And now we have this pretty, pretty nice effect where we de-emphasize elements that are not currently active. So the current one that we want to highlight pops up even more. Now this can be useful not only in cases like this, maybe if you want to highlight a notification that pops up, a warning, maybe an error message, you can de-emphasize all the elements on the page except for the one that you want to highlight, except for the one that you want to draw attention to. That's the example number two. All right. And now for our final example, I want to show you how to utilize Has to make tweaks to the entire page or to a lot of elements on the page based on a certain setting. And in this example, I'm going to show you how to use a color theme switcher. And here I'm going to mention that this is inspired in a great deal by Ahmad Shadid and his fantastical article on CSS parent selector. Link is going to be in the description. He has a ton of fantastic examples that you're going to find really helpful. So let's get back to our demo here. I have a list here with my latest YouTube videos and a simple checkbox here that toggles between the light and dark. It does nothing right now. And if we look at the code here, you can see that we have a light theme selector here that sets well the light scheme and it has to be added to the HTML element or to the root element of the page because I'm styling also the body tag here on CodePen just to demonstrate how it works. We can add it by going to settings, HTML, add classes to HTML, and we're going to set light theme class. And if we save this, once it refreshes, you're going to see that our light theme is now enabled. If we wanted this to work, we need JavaScript. We need to detect the changes on this checkbox and once it's clicked, once it's enabled, we want to set appropriate class to the HTML element. But with the has pseudo class, we can make this work even without a single line of JavaScript. Let's see how. So we're going to tweak the selector here. Instead of light theme, we're going to do root element. And if root element has, and this checkbox here actually has a class of color scheme, so we're going to set if the root element has color scheme in a state of checked, we're going to apply all of this code here. Let's try how it works. And it sure enough works. And we have not written a single line of JavaScript. This is completely empty, of course. So what we're doing here is we're detecting the state of this checkbox. And once it's in a state of active with checked, we can apply all of this code. And I'm using Sass here. That's why I can mess those selectors. So we can apply all of this code when one of the items somewhere on the page is in a certain state. Now, this can be helpful not only for examples like this where you have a color scheme. You can maybe set the various font sizes or whatever it is you want to do to the entirety of the page based on some user settings. You can do this using has without needing to resort to JavaScript. And while we're on the subject of color schemes, make sure to check my previous video on color scheme property to understand how exactly this works and why you should always use it when you're using a dark color scheme. I have found a lot of websites that don't use color scheme, but they should. Even Twitter, LinkedIn, and more of very popular websites are missing out on improving their interface by using color scheme property. So check my previous video. So these are the three examples that I wanted to show you that will give you a little bit of an insight into how you can utilize Sass to simplify your code and even to remove JavaScript from your code entirely. And can you think of a good example where hasSelector would be helpful? And if you can, please share the idea in comments and who knows, maybe I'll make another video with the practical has tips if you find those kind of videos helpful and useful. Thank you so much for your attention. My name is Aron Yambor. Make sure to hit that subscribe and like buttons and I will see and hear you in the next video.