I Love This CSS Focus Hack

Key Takeaways

Focus States may seem incredibly straightforward but there's actually three separate selectors in CSS for different Focus States and even a fourth secret one and knowing which one to use in the right scenario is actually quite difficult so in this video I'm going to explain everything you need to know about the focus State what the different Focus states are and even show you this fourth secret Focus property welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and to get started with Focus we're going to f focus on the two most simple Focus States and that is the colon focus and the colon Focus visible because these are probably the two most common States you're going to be using Now the default just colon Focus what that's going to do is anytime an element has Focus whether you click on it tab onto it it doesn't matter it's always going to apply those Styles so in our case if we click on this button you can see it has a red outline applied to it same thing here if we click on this input that has the focus attribute applied to it you can see that it has a red outline over around it and if we tab onto that element you can see it has the red outline and same thing here if we tab onto this element you can see it gets that red outline around it so whether you're navigating with the keyboard mouse or some other tool as soon as an element is focused by any means at all it's going to have those Styles be applied now Focus visible is a little bit different because it only shows the focus when it is visibly needed for the user so for example if this button right here has Focus visible when I click on the button you'll notice that there's no red outline applied to it while this this button has a red outline applied to it and that's because if I'm using my mouse to navigate I know that I'm clicking on this button so I don't need to have a red outline around it showing me more information about that button but if I'm using the Tab Key to navigate and I tab onto this element you'll notice I get a red outline around it because I'm using the Tab Key and it's making sure okay you know what I want to focus on where I'm at so the vi focus should be visible to the user in the case of the Tab Key being used this is why when I'm writing out my code for buttons I almost always use Focus visible because clicking on a button and getting the focus style is a little bit jarring and confusing for a user so when I'm writing out buttons I almost always use Focus visible now when it comes to input elements Focus visible and focus actually work exactly the same you'll notice when I click on both of these they give me the focus style and if I use tab to get to them they also give me the exact same Focus style and that's because the browser is smart enough to know that if I'm inside of an input element I probably want to show my focus on that element because for example if I'm on a phone and I click on an input like this it's going to pop up the keyboard which is going to remove things around on my site and it can become hard to follow but if I have that outline showing up around my element it's going to make sure I always know where it's at so it doesn't matter if you use Focus or Focus visible on an input it's going to be outlined in this red at least in Chrome and pretty much any other browser out there so in order to determine which one of these two specific Focus selectors you want to use you just want to determine do I want to show the focus all the time or only when it's visually needed for the user if you want to show it all the time just use the normal focus and it'll always use the focus Styles otherwise use Focus visible which is generally what I prefer to use for pretty much all of my focus Styles now there are two other types of focuses one is built into the browser and the other one's kind of a secret one you need to write yourself and that is going to be Focus within and focus visible within so let me talk about Focus within essentially all that does is allow you to style a parent element based on if it child has Focus so I have this container element which wraps all of my different buttons and inputs and what I can do is I can select that container and I can say focus with within and now it's going to apply these Styles anytime I'm focused on an element that's within this parent container so I could just say like background color is going to be blue doesn't really matter and now you can see when I focus on any of these elements you can see my entire thing has a background color of blue applied to it this is a bit ugly so let's just do a border which is going to be a one pixel solid red border and now you can see when I'm focused on this I have a red border around my container doesn't matter if I use tab to use my focuses or clicking to use my focuses it really doesn't matter and you'll notice even if I'm on an element that doesn't have a focus State that's visible I'm still focused on that element so you can see I get this outline around my container the one problem was Focus within though is that it shows you the focus no matter what whether I'm using clicking in that case I don't actually care about the focus showing up or if I'm using tab where maybe it makes more sense for the focus to show up so The Fourth Kind of secret focus is the focus within visible or Focus visible within but there is no CSS property to do this we need to write our own and luckily it's actually really easy to write your own with the has selector so what you can do is instead change this to has and then put Focus visible just like that now this container will only show that Focus State whenever an element inside of it has the focus being shown visibly to the user so now you can see that if I tab onto this element I get the outline because my focus is visible now you will notice though if I click on this element the focus is not showing up because the focus is not technically visible on that element I can visually see it because I'm manually saying that the focus is going to show that red outline but I don't have any element that has this Focus visible attribute applied to it the tab bar is going to allow me to do this or if I click inside of one of these inputs you'll notice it is essentially Focus visible but if I just click on a specific element like a button you can see that that Focus outline is not showing up so this is a really great way to only show the focus when it should be visually needed when it's a within context for example I want to show it on the container when something within it visually should show that Focus so this cssh has property right here is a really cool property allows you to add in that fourth secret kind of CSS selector that unfortunately doesn't exist in the browser and honestly probably won't because writing out this one align of code is just as easy as writing out that Focus visible within now when it comes to when you would want to use these specific within stylings it's mostly if you have a custom input element that has Focus based on things inside of it maybe you have like a drop down element that you wrote out by hand and you want to have a drop down element where that thing that you click on to open the drop down actually has a focus container around it like an outliner whatever because all the elements inside of it are being focused on really any anytime you have a custom element that you want to show focus and outline of or maybe if you click on something inside of a card you want the card to show a focus State that's another great use case for Focus within and you can write this custom has syntax to make it so that it's only going to show up when it visually is needed for the user now that's really all there is to these Focus dates they're relatively straightforward but if you want to learn more about this has syntax which is quite a bit more complicated and has some really cool use cases I have a full video covering it I'm going to link on the screen for you and with that said thank you very much for watching and have a good day