From db7ae056d0bdb1307e2674451826f7ec162ab967 Mon Sep 17 00:00:00 2001 From: firefoxic Date: Fri, 26 Aug 2022 15:00:06 +0300 Subject: [PATCH 1/7] Improve the fallback example for :focus-visible After replacing the custom button with a native button in the previous change to this example, the styles of the example now affect the native styles of the button. It is better to move the properties that change the appearance of the button itself into its general styles. In addition, this example has always been difficult to understand for beginners due to different styles for different focus pseudo-classes. Making the example look more realistic and practical will make it more useful for developers. --- .../web/css/_colon_focus-visible/index.md | 52 +++++++++++-------- 1 file changed, 31 insertions(+), 21 deletions(-) diff --git a/files/en-us/web/css/_colon_focus-visible/index.md b/files/en-us/web/css/_colon_focus-visible/index.md index 43d1138db31b56c..6d0325dafa4fb4e 100644 --- a/files/en-us/web/css/_colon_focus-visible/index.md +++ b/files/en-us/web/css/_colon_focus-visible/index.md @@ -59,40 +59,50 @@ input, button { ### Selectively showing the focus indicator -A custom control, such as a custom element button, can use `:focus-visible` to selectively apply a focus indicator only on keyboard-focus. This matches the native focus behavior for controls like {{htmlelement("button")}}. +Users may still have browsers that do not support `:focus-visible`. For them, you can, by checking for the `:focus-visible` non-support, repeat the same focus styling, but with `:focus`. But even if you do not specify anything at all for `: focus`, then in old browsers there will simply be a native outline, which is also not bad. ```html - + + ``` ```css -.custom-button { - display: inline-block; +.button { margin: 10px; + border: 2px solid darkgray; + border-radius: 4px; } -.custom-button:focus { - /* Provide a fallback style for browsers - that don't support :focus-visible */ - outline: 2px solid red; - background: lightgrey; +.button:focus-visible { + /* + ** Draw the focus style you need for keyboard focus + ** in browsers that support :focus-visible. + */ + outline: 3px solid deepskyblue; + outline-offset: 3px; } -@supports selector(:focus-visible) { - .custom-button:focus { - /* Remove the focus indicator on mouse-focus for browsers - that do support :focus-visible */ - outline: none; - background: transparent; +@supports not selector(:focus-visible) { + .button.with-fallback:focus { + /* + ** Provide the same focus styles as a fallback + ** for browsers that don't support :focus-visible. + */ + outline: 3px solid deepskyblue; + outline-offset: 3px; } } -.custom-button:focus-visible { - /* Draw a very noticeable focus style for - keyboard-focus on browsers that do support - :focus-visible */ - outline: 4px dashed darkorange; - background: transparent; +.button.without-fallback:focus { + /* + ** Or just don't specify anything as a fallback. + ** Then browsers that don't support :focus-visible + ** will simply render the default focus style. + */ } ``` From 49dbdcdbafdd8b443becd0bf8b0115714288e24b Mon Sep 17 00:00:00 2001 From: firefoxic Date: Fri, 26 Aug 2022 17:34:51 +0300 Subject: [PATCH 2/7] Update the section heading --- files/en-us/web/css/_colon_focus-visible/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/_colon_focus-visible/index.md b/files/en-us/web/css/_colon_focus-visible/index.md index 6d0325dafa4fb4e..18d30fbf896609e 100644 --- a/files/en-us/web/css/_colon_focus-visible/index.md +++ b/files/en-us/web/css/_colon_focus-visible/index.md @@ -57,7 +57,7 @@ input, button { {{EmbedLiveSample("Basic_example", "100%", 300)}} -### Selectively showing the focus indicator +### Providing a :focus fallback Users may still have browsers that do not support `:focus-visible`. For them, you can, by checking for the `:focus-visible` non-support, repeat the same focus styling, but with `:focus`. But even if you do not specify anything at all for `: focus`, then in old browsers there will simply be a native outline, which is also not bad. From 16274214895b29705142c02e514cf5b24a772095 Mon Sep 17 00:00:00 2001 From: firefoxic Date: Sun, 28 Aug 2022 15:20:57 +0300 Subject: [PATCH 3/7] Improve text Co-authored-by: Jean-Yves Perrier --- files/en-us/web/css/_colon_focus-visible/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/_colon_focus-visible/index.md b/files/en-us/web/css/_colon_focus-visible/index.md index 18d30fbf896609e..5e7185b56eb2df6 100644 --- a/files/en-us/web/css/_colon_focus-visible/index.md +++ b/files/en-us/web/css/_colon_focus-visible/index.md @@ -59,7 +59,7 @@ input, button { ### Providing a :focus fallback -Users may still have browsers that do not support `:focus-visible`. For them, you can, by checking for the `:focus-visible` non-support, repeat the same focus styling, but with `:focus`. But even if you do not specify anything at all for `: focus`, then in old browsers there will simply be a native outline, which is also not bad. +If your code has to work in old browser versions that do not support `:focus-visible`, check supports of `:focus-visible` with {{cssxref("@supports"}} and repeat the same focus styling in it, but inside a `:focus` rule. Note that even if you do not specify anything at all for `:focus`, old browsers will simply display the native outline, which can be enough. ```html