Improve the fallback example for :focus-visible (#19993)

* 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. * Update the section heading * Improve text Co-authored-by: Jean-Yves Perrier <[email protected]> * Improve code comment Co-authored-by: Jean-Yves Perrier <[email protected]> * Improve fallback comment Co-authored-by: Jean-Yves Perrier <[email protected]> * Remove unwanted part Co-authored-by: Jean-Yves Perrier <[email protected]> * Fix test failure (sorry) Co-authored-by: Jean-Yves Perrier <[email protected]>
mdn · Aug 28, 2022 · 7572230 · 7572230
1 parent 4f372fb
commit 7572230
Showing 1 changed file with 20 additions and 24 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
@@ -57,43 +57,39 @@ input, button {
 
 {{EmbedLiveSample("Basic_example", "100%", 300)}}
 
-### Selectively showing the focus indicator
+### Providing a :focus fallback
 
-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")}}.
+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
-<button class="custom-button">Click Me</button>
+<button class="button with-fallback" type="button">
+  Button with fallback
+</button>
+<button class="button without-fallback" type="button">
+  Button without fallback
+</button>
 ```
 
 ```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 when :focus-visible is supported */
+  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 {
+    /* Fallback for browsers without :focus-visible support */
+    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;
-}
 ```
 
 {{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 72)}}