|
1 | 1 | --- |
2 | 2 | layout: "@layouts/BlogPost.astro" |
3 | | -title: "We Can Finally Animate height: auto; in CSS!" |
4 | | -date: "2024-07-01" |
5 | | -description: "For decades, height: auto; has been a pain to animate in CSS. But with the introduction of the calc-size() function in CSS, we can finally animate height: auto; without the need for any JavaScript." |
| 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 | 6 | tags: ["CSS"] |
7 | 7 | --- |
8 | 8 |
|
9 | | -import CalcSizeComparison from "@blogComponents/cssCalcSize/CalcSizeComparison.astro" |
| 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" |
10 | 13 |
|
11 | 14 | ## Introduction |
12 | 15 |
|
13 | | -Animating `height: auto;` in CSS seems like it should be easy, but CSS is unable to animate to/from `height: auto;` since it needs a specific height value to run any animation/transition. This has been a pain point for web developers for decades, and the only way to animate `height: auto;` was to use JavaScript to calculate the height of the element and then animate it. This is obviously not ideal, which is why CSS has finally added the brand new `calc-size()` function which makes this type of animation trivial. |
| 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. |
14 | 17 |
|
15 | | -## `calc-size()` |
| 18 | +## What Is Focus? |
16 | 19 |
|
17 | | -The `calc-size()` function works exactly the same as the `calc()` function, but it has the additional capability of calculating based on sizes that are automatically calculated by the browser. These values are: |
| 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. |
18 | 21 |
|
19 | | - 1. `auto` |
20 | | - 2. `min-content` |
21 | | - 3. `max-content` |
22 | | - 4. `fit-content` |
23 | | - 5. `stretch` |
24 | | - 6. `contain` |
| 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. |
25 | 23 |
|
26 | | -Essentially, what this function does is convert values like `auto` to specific pixel values which it can then use in calculations with other values. This is handy on its own, but where it is most useful is with animating elements that are `auto` sized. |
| 24 | +## `:focus` |
27 | 25 |
|
28 | | -```css {8} |
29 | | -.element { |
30 | | - height: 0; |
31 | | - overflow: hidden; |
32 | | - transition: height 0.3s; |
| 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; |
33 | 31 | } |
34 | 32 |
|
35 | | -.element.open { |
36 | | - height: calc-size(auto); |
| 33 | +button:focus { |
| 34 | + background-color: red; |
37 | 35 | } |
38 | 36 | ``` |
39 | 37 |
|
40 | | -By wrapping our `auto` value in the `calc-size()` function, we can now animate the height of the element from `0` to `auto` without any JavaScript. Here is an example of what this looks like in practice: |
| 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 | 41 |
|
42 | | -<CalcSizeComparison /> |
| 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 | 43 |
|
44 | | -The only thing you need to be away of is that you cannot animate between two automatically calculated values, such as `auto` and `min-content`. |
| 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> |
45 | 49 |
|
46 | | -Another interesting thing about `calc-size()` is you can actually use it on the non-automatic value in the animation and it will still animate correctly. As long as you have `calc-size` on one of the values in the animation, it will work. |
| 50 | +## `:focus-visible` |
47 | 51 |
|
48 | | -```css {3} |
49 | | -.element { |
50 | | - /* This still works */ |
51 | | - height: calc-size(0px); |
52 | | - overflow: hidden; |
53 | | - transition: height 0.3s; |
| 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; |
54 | 57 | } |
55 | 58 |
|
56 | | -.element.open { |
57 | | - height: auto; |
| 59 | +button:focus-visible { |
| 60 | + background-color: red; |
58 | 61 | } |
59 | 62 | ``` |
60 | 63 |
|
61 | | -### Doing Actual Calculations |
| 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. |
62 | 69 |
|
63 | | -By far the most common use for this will be with animations/transitions as shown above, but since this function works just like `calc` it can actually be used to do certain calculations that used to be impossible. |
| 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 | +} |
64 | 85 |
|
65 | | -```css |
66 | | -.element { |
67 | | - width: calc-size(min-content, size + 50px); |
| 86 | +input:focus-visible { |
| 87 | + border-color: red; |
68 | 88 | } |
69 | 89 | ``` |
70 | 90 |
|
71 | | -The above CSS will set the width of the element to the minimum content size plus `50px`. The syntax for this is a bit confusing so let me explain. |
| 91 | +<CSSFocusInput focusType="focus-visible" placeholder="Focus Me" /> |
72 | 92 |
|
73 | | -`calc-size` takes two arguments, the first is the size that you want to calculate, and the second is the calculation you want to perform. In this case, we are calculating the `min-content` size of the element and then adding `50px` to that value. The keyword `size` is always used to represent the current size of the first property passed to `calc-size`. This means in our example `size` would be equal to the `min-content` size of the element. |
| 93 | +## `:focus-within` |
74 | 94 |
|
75 | | -You can even nest multiple `calc-size` functions to perform more complex calculations. |
| 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. |
76 | 96 |
|
77 | | -```css |
78 | | -.element { |
79 | | - width: calc-size(calc-size(min-content, size + 50px), size * 2); |
| 97 | +```css {5} |
| 98 | +.container { |
| 99 | + border-color: blue; |
| 100 | +} |
| 101 | + |
| 102 | +.container:focus-within { |
| 103 | + border-color: red; |
80 | 104 | } |
81 | 105 | ``` |
82 | 106 |
|
83 | | -This will calculate the `min-content` size of the element, add `50px` to that value, and then multiply the result by `2`. |
| 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. |
84 | 114 |
|
85 | | -## Browser Support |
| 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. |
86 | 116 |
|
87 | | -This is where we get to the bad news. As of writing this article, `calc-size()` is only supported in Chrome Canary when the `#enable-experimental-web-platform-features` flag is enabled. It is so new there isn't even a caniuse.com page for me to link to yet. |
| 117 | +## The Secret Fourth Focus Method |
88 | 118 |
|
89 | | -Luckily, this CSS feature is not something that will break your site if it isn't supported. It will just mean that the animation won't work, so you can use it today and it will act as a progressive enhancement for users on browsers that support it. |
| 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. |
90 | 120 |
|
91 | | -```css {8-9} |
92 | | -.element { |
93 | | - height: 0; |
94 | | - overflow: hidden; |
95 | | - transition: height 0.3s; |
| 121 | +```css {5} |
| 122 | +.container { |
| 123 | + border-color: blue; |
96 | 124 | } |
97 | 125 |
|
98 | | -.element.open { |
99 | | - height: auto; |
100 | | - height: calc-size(auto); |
| 126 | +.container:has(:focus-visible) { |
| 127 | + border-color: red; |
101 | 128 | } |
102 | 129 | ``` |
103 | 130 |
|
104 | | -With the above CSS the animation will work in browsers that support `calc-size()` while in older browsers it will just show the element without any animation. |
| 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> |
105 | 146 |
|
106 | 147 | ## Conclusion |
107 | 148 |
|
108 | | -`calc-size()` is a fantastic new addition to CSS that will make animating `auto` based sizes incredibly easy. It also opens up a lot of possibilities for doing calculations that were previously impossible in CSS. I can't wait for this feature to be supported in all browsers! |
| 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. |
0 commit comments