You are doing :focus wrong (and I was too)

a lot of people don't even bother worrying at all about focus if you're like me you've probably styled it to match your hover state because it's the easiest thing to do or worse yet you better not be one of these people you just turn it off completely in this video we'll look at why focus is important we're also going to look at how we can get some cool focus states like this so you can see this is working really cool we get this nice effect on our buttons we can do this cool a little thing that really grabs the attention and why is it important to grab the attention and really importantly to you probably figure out how to turn the the default styling off on everything but in Firefox you might not know how to get rid of the one on buttons this is not the same as on links where you can see I've changed my focus state but it's still keeping that little weird thing on the text there so we're gonna see how we knew that and we're gonna be having a lot of fun with custom properties a whole bunch of other stuff let's jump right into it Before we jump into it I want to look at what the default focus states are and why they're a little bit of a problem so here we have the default focus state in chrome that when you're probably most familiar with this blue glowy thing that it does where you know it's okay but people often on buttons really get annoyed by that and of course I'm actually focused on this over here and he merrily see it I just happened to have a background where that's super low contrast and happens to be blue just a coincidence in this demo but it is possible that you literally can't see when something is focused so now I am focused on that you might barely be able to see it up here we have Firefox is default focus state where you can see it puts a little dotted box around it instead it is generally lower contrast and you can see on buttons interestingly enough it's inside the button and not around the button itself like it is in chrome where you get the blue box on the outside so I always find that interesting it does seem to take the current color so here you can see it's actually the the dotted box is using the yellow or here it is sticking with the black so that does help with the contrast issue but it is still especially over here I find it can be really hard to see as well and if we go on over to edge we can see that the default here is very similar to Firefox but interestingly enough it is on the outside of their box like it is on Chrome and the colors aren't exactly the same as they were in Firefox is on this one it is black still where definitely orange over there now this is I don't know if that's gonna change when they update the chrome Ian I'm on a new computer I'm just saying everything up sorry also if a few things are a little bit different here I'm trying to get my computer up and running like the old one was but you can see what the differences are but what we're really focused on right now is looking at how we can make it to them better because you can see they're really not perfect so to fix this what can we do well let's go and we're gonna take a look at a couple examples here like I already said so I have a few of my example in my example too and for now I'm just gonna focus over on Firefox we don't have the same thing twice clean things up a little bit so I'm gonna do one thing you'll often see is people doing a focus outline of none and oh my goodness that's terrible to do but if I focus on this you'd never know it because I'm actually focused on that but if I tab over all in in Firefox it's still showing up there so this won't even remove it in every situation where you think it might be removing it so that is good to know but I'd also say never ever ever do this so other ways we can do it well I'd actually stick with outline and outline is super useful there's a good reason why it is used as the default except on our little buttons in Firefox there but that is a big exception to how most of the browser's are doing it but the reason outline is really useful let's do like three pixels solid and I'm gonna use my current color primary here just so that is a CSS custom property if you're not familiar with them where it's just gonna use this orange color or my yellow color over here so you can see that it makes this the box instead of that blue glowy blocks that we're used to in Chrome I show up we can have it to show up like that and if I go over here it's gonna be taking the yellow on because of how I've set everything up there now the advantage with using outline is I could make this ten pixels and it's never going to cause a problem because outlines don't actually affect the the document flow they're completely independent just like box shadows are and in that sense it can be super super useful because you know you're not breaking your document flow and you can do these really like in-your-face focus States and may be going well that's too much and I think it is probably too much right now and the reason that doing your focus not in the same way as your hover state because I think we've all done things like where we do like in a hover comma a focus this is literally what I tell people to do all the time this is what I've been telling people to do forever but you know what the reason we don't want to do that is let's say I do a hover and I just change my opacity like 0.7 so if I'm hovering on that you know okay cool that that's working and it's working you know so it's working and yeah I guess that's kind of cool but the problem that's gonna happen is if we do that for my focus state as well so we come and do a focus when we do this with the mouse I'm leading to where I'm going so like I know I'm here or if I bring my mouse over to here then I know I'm here my eyes already there and then I can definitely see that it's an interactive element but let's just say that I'm here and I tab on it so now you can see my little focus ring is on it but if I tab over my eyes are still looking here and I haven't seen a change happen yet well actually it's gone down to this but it's so subtle that I didn't even see anything change and then if I push tab again I can sort of I guess when I tab there I can sort of see it a little shift so my eyes will go over but it's not enough to really grab the attention and since I don't know exactly where it's gonna go I should do something that's really really grabbing the attention and I just want to thank Zell for he's had a whole bunch of recent articles on focus state I'm gonna link to those below there what if you don't know Zell you I he has tons of amazing JavaScript content but he's recently been doing a bunch of stuff on focus states and it's what inspired me to make it this video and I think it is a really important point to bring up where our focus States should be something they can actually grab a little bit of attention so you know maybe this is a little bit of overkill and you might be going well it looks terrible on my button we're gonna fix that at the end at the very end we're gonna see how we can do as a very similar effect but with round corners instead of the ugly box but a nice cool thing you can also do with outline is our outline offset of say five pixels where if we have that we keep the box around it as well so it's not actually touching what we're going on now again I think a little bit of overkill but because we have this focus state and because we're using an outline that doesn't ruin the document flow it's not like a border that can actually cause things to shift around which can be really really useful but again maybe this would be two pixels or three pixels but something that's enough to grab the attention as we tab through these things so there is an idea on what you might want to do and why why it's important to have it now next the what I want to look at is this in Firefox and just to show you is working the same over here in chrome if we tab tab you can see that it's looking pretty much the same in my two browsers but for my buttons where we see here we're getting the blue box and over here we're not getting the blue box we're getting it on the inside we could do something where we could try and do something to fix that so let's say I had my button focus and again if I said outline:none or an outline zero or anything like that it's going to work here in chrome or when I tap onto that nothing is showing up that blue the blue glow is now completely vanished but over here it has not changed and that's because Mozilla is actually doing its own thing a little bit on this which is called the you have to use the it's a pseudo element and it's using Moz which is a prefix here and it's focus in ER and here we could do it's actually a border they're putting on it so we'd have to do a border of zero so I'm actually gonna do let's just just to show background green just to show when we do focus that it really jumps in so if my border zero is on you can see there's nothing there but if I turn that off when I click on you can see that border is still showing up or we can see that border is still showing up right there so this Moz focus inner if you do want to turn that off that's how you can do that and it will have no effect in chrome chrome just ignores it because it doesn't know what it is so we're all fine and dandy on that so there we go I think if you had a big color shift like this on a button and so that was your hover State and it's a really big change I think maybe you can get away with it there it's it's just on these little subtle things because a lot of the time hover states are these little subtle effects and you probably want a little bit more than a little simple effect because again you need to drag the eye with it but let's just say we're not changing the background to be green we really are doing a very subtle hover effect which I haven't set up here but let's just pretend we have a subtle hover effect on those and you want to do something a little bit more on your buttons but you don't want to use your outline because as we saw the outline can look really really bad whereas I think it's working okay here it's just not working there that looks kind of awkward so you can can't really use outlines for this it's one of the fallbacks of outlines is we do not have the ability to do round corners but enter box shadow now we can achieve the exact same effect I'm sure you all know box shadows where we can let's just do a normal box shadow of like five pixel offset five pixel offset a 10 pixel blur and in our GBA just like that a nice subtle little box shadow you can see it's coming and going on that so now we have a little shadow appearing on there maybe we'll make it a bit stronger just to make it stand out a bit more there we go so a boxer like that is fine but instead of doing a 10 pixel blur on that I'd actually do a zero pixel blur and a 10 pixel spread and look at that not only have a 10 pixel spread oh but that looks kind of weird you're right let's do no blur no offsets in any direction and then you just sort of get like the outline we were doing before of course it's a different color but that's cool and you can see it's working there and if I come back this way it's working here it's not gonna ruin the document flow cuz box shadows just like outline do not have any effect on the flow now the one thing with it is you can't really do an offset with it so on here I'm actually gonna do I'm gonna put this on a few lines because we're gonna want to box shadows so my first box shadows in me is zero zero zero will do a 5 pixel spread and just do a white background on it but here instead of putting a semicolon I am going to put a comma because we want to have more than one box shadow and on this we can put our second box shadow of 0 0 0 10 pixels these do not have to be on different lines they can be on one line just for clarity sake I like putting it on multiple lines so I don't have any weird runaround wrap text wrap or slide swirling for my demo here and now we should see look at that isn't that cool and then we can go over here oh it's a little bit busted there so let's go and fix that why not I've used my color primary where I'd changed my CSS custom property to be my yellow but my background I just set like that so I think what I'm gonna do is actually change this to have because I already have it my color BG and we're gonna copy this color and we're gonna switch my background to be my color of our color BG this is custom properties are like the coolest thing ever you don't need two hyphens their custom properties are the coolest thing ever they just open up so many possibilities and make our lives so much easier because in this I don't have to have like have two different classes I'm just changing an example to what these two variables are and then here what I can do is my VAR color BG because my color BG I'm using it as my background there actually it might be a darker gray we'll find out in a second woops this should be BG it might be my darker gray it is but we could play around with that a little bit and fix that let's go and do that right away so that we can tab onto there you see that white colors coming in there and if I tap onto that one the blue colors coming in it just gives it this cool little offset effect I think it's a lot of fun it's really useful again you probably don't want to sync tons of time into doing your focus states like this but if you do have a bit of time to do it you'd probably don't wanna sink a ton of time coming up with these crazy solutions for it but it is something that is worth investing in on your site because people do use the keyboard to navigate and you want to make their lives as easy as possible and I really hope you liked this video and learned a couple things along the way if you do want to know more about box shadows I have a cool video that looks at a bunch of unconventional ways that you can use them thank you so much for my patrons for helping make all of this possible you guys are amazing thank you so much for your support if you enjoyed this video and you haven't yet subscribed please consider subscribing and of course until next time don't forget make your according the internet just a little bit more awesome

Channel: Kevin Powell

Views: 118,205

Rating: 4.9348173 out of 5

Keywords: Kevin Powell, html, css, tutorial, css focus, :focus, hover vs focus

Id: Mvu5OMGcdVA

Length: 13min 23sec (803 seconds)

Published: Wed Nov 06 2019

Reddit Comments

[u/Arkham80]

TL;DR don't do outline none