|
| 1 | +--- |
| 2 | +layout: "@layouts/BlogPost.astro" |
| 3 | +title: "Do You Know All 4 CSS Focus Styles?" |
| 4 | +date: "2024-07-29" |
| 5 | +description: "Handling focus in CSS is quite a bit more complicated than it seems and in this article I cover the 3 main CSS focus methods as well as a secret fourth focus method." |
| 6 | +tags: ["CSS"] |
| 7 | +--- |
| 8 | + |
| 9 | +import CSSFocusButton from "@blogComponents/cssFocusCrashCourse/CssFocusButton.astro" |
| 10 | +import CSSFocusInput from "@blogComponents/cssFocusCrashCourse/CssFocusInput.astro" |
| 11 | +import CSSFocusContainer from "@blogComponents/cssFocusCrashCourse/CssFocusContainer.astro" |
| 12 | +import Tangent from "@blogComponents/lib/Tangent.astro" |
| 13 | + |
| 14 | +## Introduction |
| 15 | + |
| 16 | +It may seem strange to write an entire article on handling focus in CSS since it is a pretty simple property at first glance. That is until you realize that CSS actually has 3 (plus one secret) focus methods that all behave differently. These properties even have different behaviors depending on what elements you use them on which makes it even more confusing. In this article I will be breaking down all 4 focus methods, showing you when to use each one, and how they differ from each other. |
| 17 | + |
| 18 | +## What Is Focus? |
| 19 | + |
| 20 | +Before we dive into each focus method we need to understand what a focus state is. When an element is focused it means that it is currently selected by the user. This can happen when a user clicks on an element, uses the tab key to navigate through a page, or even when a user interacts with an element using a screen reader. |
| 21 | + |
| 22 | +The focus state is important for accessibility reasons as it helps users understand where they are on a page and what they are interacting with. Imagine trying to fill out a form and not knowing which input you are currently typing in. This is what the web would be like if there were no focus states. |
| 23 | + |
| 24 | +## `:focus` |
| 25 | + |
| 26 | +The main focus method is the `:focus` pseudo-class. This is the what most people think of when they think of focus styles in CSS, but this pseudo-class has quite a few problems which is why I almost never use it. |
| 27 | + |
| 28 | +```css {5} |
| 29 | +button { |
| 30 | + background-color: blue; |
| 31 | +} |
| 32 | + |
| 33 | +button:focus { |
| 34 | + background-color: red; |
| 35 | +} |
| 36 | +``` |
| 37 | + |
| 38 | +The styles within the `:focus` pseudo-class will be applied whenever an element is focused. It doesn't matter how the element was focused (clicked on, keyboard navigation, screen readers, etc.) it will always show the focus styles. You can see this in action in the example below. |
| 39 | + |
| 40 | +<CSSFocusButton focusType="focus">Focus Me</CSSFocusButton> |
| 41 | + |
| 42 | +As you can see it doesn't matter how you focus this button it will always turn red. This is generally not ideal since when you click on a button you don't generally want it to show focus styles after you have finished clicking on it, but you do want the focus state to persist when using keyboard navigation since this focus state tells the user where they are on the page. |
| 43 | + |
| 44 | +<Tangent> |
| 45 | + If you are having trouble focusing on the button with the keyboard try |
| 46 | + clicking on the text just above the button and then clicking the |
| 47 | + <kbd>Tab</kbd> key. |
| 48 | +</Tangent> |
| 49 | + |
| 50 | +## `:focus-visible` |
| 51 | + |
| 52 | +I mentioned how `:focus` is not always ideal since it shows the focus styles no matter how the element was focused. This is where the `:focus-visible` pseudo-class comes in. This pseudo-class is a bit smarter than `:focus` since it only shows the focus styles when the browser deems the user needs those styles to know where they are on the page and what element they currently have focused. I almost always use `:focus-visible` over `:focus` since it provides a better user experience. |
| 53 | + |
| 54 | +```css {5} |
| 55 | +button { |
| 56 | + background-color: blue; |
| 57 | +} |
| 58 | + |
| 59 | +button:focus-visible { |
| 60 | + background-color: red; |
| 61 | +} |
| 62 | +``` |
| 63 | + |
| 64 | +<CSSFocusButton focusType="focus-visible"> |
| 65 | + Focus Me With Keyboard |
| 66 | +</CSSFocusButton> |
| 67 | + |
| 68 | +As you can see the above button above does not show any focus styles when it is clicked, but if you use the keyboard to navigate to this element it will show the focus styles. |
| 69 | + |
| 70 | +<Tangent> |
| 71 | + If you look closely you may notice that there is a ring that appears around |
| 72 | + the button when you use keyboard navigation to focus it. This is part of the |
| 73 | + default browser styles and is called the `outline` property. The browser |
| 74 | + applies this `outline` property using the `:focus-within` pseudo-class which |
| 75 | + is why it only appears when needed to assist the user in knowing where they |
| 76 | + are on the page. |
| 77 | +</Tangent> |
| 78 | + |
| 79 | +One thing to note about `:focus-visible` is that it works differently when used on different elements. For example, if you use `:focus-visible` on an input element it will show the focus style no matter what. It doesn't matter if you click the input or use keyboard navigation it will always show the focus styles. This is because the browser deems it important to show the focus styles on input elements no matter how they are focused. |
| 80 | + |
| 81 | +```css {5} |
| 82 | +input { |
| 83 | + border-color: blue; |
| 84 | +} |
| 85 | + |
| 86 | +input:focus-visible { |
| 87 | + border-color: red; |
| 88 | +} |
| 89 | +``` |
| 90 | + |
| 91 | +<CSSFocusInput focusType="focus-visible" placeholder="Focus Me" /> |
| 92 | + |
| 93 | +## `:focus-within` |
| 94 | + |
| 95 | +The `:focus-within` pseudo-class is a bit different than the previous two focus methods. This pseudo-class is used to apply styles to a parent element based on the `:focus` state of its children. If any of the children would show the `:focus` state then the parent will also show the `:focus-within` state. |
| 96 | + |
| 97 | +```css {5} |
| 98 | +.container { |
| 99 | + border-color: blue; |
| 100 | +} |
| 101 | + |
| 102 | +.container:focus-within { |
| 103 | + border-color: red; |
| 104 | +} |
| 105 | +``` |
| 106 | + |
| 107 | +<CSSFocusContainer focusType="focus-within"> |
| 108 | + <CSSFocusButton focusType="focus">:focus</CSSFocusButton> |
| 109 | + <CSSFocusButton focusType="focus-visible">:focus-visible</CSSFocusButton> |
| 110 | + <CSSFocusButton>No Focus Styles</CSSFocusButton> |
| 111 | +</CSSFocusContainer> |
| 112 | + |
| 113 | +In the above example there is container that will show a red border anytime one of its children is focused. There are 3 buttons in that container. The first has a `:focus` style, the second has a `:focus-visible` style, and the third has no focus styles. As you can see it doesn't matter which button you click the container will always show the `:focus-within` styles since one of its children is focused. |
| 114 | + |
| 115 | +It is important to know that the child elements do not need to have a focus style defined for the parent to show the `:focus-within` state. The parent will show the `:focus-within` state as long as one of its children is focused. This works with any element that can be focused, not just buttons. |
| 116 | + |
| 117 | +## The Secret Fourth Focus Method |
| 118 | + |
| 119 | +The final focus method is a bit different since there is no built in CSS pseudo class for `:focus-visible-within`. Instead we have to write our own custom CSS selector that does the same thing. This custom selector combines hwo `:focus-within` and `:focus-visible` work to create a focus method that only shows focus styles when a child of the element would have its `:focus-visible` styles shown. |
| 120 | + |
| 121 | +```css {5} |
| 122 | +.container { |
| 123 | + border-color: blue; |
| 124 | +} |
| 125 | + |
| 126 | +.container:has(:focus-visible) { |
| 127 | + border-color: red; |
| 128 | +} |
| 129 | +``` |
| 130 | + |
| 131 | +<CSSFocusContainer focusType="focus-visible-within"> |
| 132 | + <CSSFocusButton focusType="focus">:focus</CSSFocusButton> |
| 133 | + <CSSFocusButton focusType="focus-visible">:focus-visible</CSSFocusButton> |
| 134 | + <CSSFocusButton>No Focus Styles</CSSFocusButton> |
| 135 | + <CSSFocusInput focusType="focus" placeholder=":focus" /> |
| 136 | +</CSSFocusContainer> |
| 137 | + |
| 138 | +I have pretty much the same code in this example as the previous example, but I added a single input element to the container. This input element has a `:focus` style applied to it. This container will only show the custom `:focus-visible-within` styles when I use the keyboard to navigate to any of the buttons or when I focus the input in any way. If I click on any of the buttons the container will not show the custom `:focus-visible-within` styles. |
| 139 | + |
| 140 | +The way this `:focus-visible-within` works is by using the `:has` pseudo element to only select the `.container` if at least one child element has the `:focus-visible` pseudo-class applied to it. |
| 141 | + |
| 142 | +<Tangent> |
| 143 | + If you want to learn more about the `:has` selector and why I love it you can |
| 144 | + check out my complete [:has selector article](/2022-09/css-has-selector). |
| 145 | +</Tangent> |
| 146 | + |
| 147 | +## Conclusion |
| 148 | + |
| 149 | +Hopefully this article has helped you understand how each focus method differs from the others and when each should be used. Personally, I almost never use `:focus` as `:focus-visible` is almost always a better user experience. I don't tend to use `:focus-within` or the custom `:focus-visible-within` as much, but when you need them they are incredibly useful. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments