Improve the fallback example for :focus-visible

[firefoxic]

Summary

Improved code example for fallback on :focus and updated section text to match new code.

Motivation

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.

Supporting details

@simevidas suggested the @supports not selector() method and noticed that setting/resetting background is causing the button to lose the native appearance on click.

And @pepelsbey suggested not styling :focus at all, so older browsers would just have a native focus outline.

This code works well in newer browsers and fallbacks to :focus in older ones as expected. Checked in Safari 14.1:

Kooha-2022-08-24-19-42-56.mp4

Metadata

• Rewrites (or significantly expands) a document

[github-actions]

Preview URLs

• https://pr19993.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/:focus-visible

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Web/CSS/:focus-visible
Title: :focus-visible
on GitHub

No new external URLs

(this comment was updated 2022-08-28 12:45:48.545648)

[firefoxic]

Commits are added very quickly to the main branch 🚀
I had to do a rebase 👀

[simevidas]

I would not change the paragraph above the code example.

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 .

The :focus fallback is sufficiently explained via the comments in the code example, I think.

Also, since this example is about custom buttons, I would style the background and border of the button to remove the button’s native appearance.

[firefoxic]

I would not change the paragraph above the code example.

It seems to me that he lost touch with the code in the last pull request that changes this example, because this text is not about stylized native buttons, but about buttons created using custom elements.

But perhaps the repetition is redundant. I think we can somehow shorten the text.

[simevidas]

Maybe the title of the section should be changed to something like ”Providing a :focus fallback”.

[firefoxic]

@teoli2003 thanks 🙂