Transcript from the "Visible Focus Styles" Lesson
>> Marcy Sutton: Okay, so visible focus styles. Really useful for a lot of people, but they're often turned off for everyone. The outline none or outline zero just for every focus in CSS, we should really avoid. Instead, styling the hover and focus state to actually have a visible focus style is fantastic.
[00:00:22] And it's worth mentioning as well, that a lot of times that desire to suppress the outline is coming from mouse users. And I would love it if this wasn't the case, but when we are trying to please a lot people with a single interphase, it's a really hard line to walk.
[00:00:41] So I am a big fan of tools like focus visible, which is a proposed CSS selector that has a polyfill that you can use, so you can use it now. And the way that it works is it's really similar to CSS focus. But it uses some heuristics, like some additional information about how the user is navigating through the page.
[00:01:44] So mouse users, if they don't want focus, we can suppress it. So these are tools to give us some more like hooks to style based on how people's preferences are. But what I think would be the best outcome, is if we had an operating system level preference that the user could say, I want focus outlines all the time, just because it's really difficult to please everyone with this.
[00:02:08] But if you're working with focus and wanting to enable it a lot more, you might end up reaching for tools like these just to make sure. Then you can add focus for things like, I'm scripting focus around the application and I want to show it. So you know where you are when I've moved your focus.
[00:02:26] Tools like this are really helpful for that.