It is useful that CSS selectors have the ability to detect users don’t require visible focus rings.
outline: 5px solid;
Native applications on the several platforms don’t draw focus rings until the users press the keyboard or use voice control software and etc. So users who use pointing devices mainly rarely see the focus rings. On the mobile, especially, majority of users use the touch screens and rarely see the focus rings.
On the other hand, web pages draw focus rings more frequently as major browsers move the focus to buttons and links by clicking. Recently, Google Chrome changed its behavior: moving the focus by clicking on a link (issue 388666).
So uses who use pointing devices mainly see the focus rings by just tapping the screen or so. Though there are some workarounds to hide unintended focus rings (described below), it is useful the CSS selectors have the ability to detect users don’t require visible focus rings.
-visual-focus-ring-is-not-required pseudo class (this name is tentative) to the CSS Selectors.
outline: 5px solid;
- Users haven’t use keyboard or related input devices for navigation and
- Accessibility services are not working and
- User Agent preferences allow
:-visual-focus-ring-is-not-required in content
Some websites use
outline:none . This harms the keyboard or other input devices users. Don’t use it.
Web authors need to use something like  to distinguish mouse-focus and keyboard-focus.
Firefox OS has disabled outlines by default (bug 1132728) as Firefox OS doesn’t support keyboard.
We can’t do this as other platforms support keyboard.
Mozilla has :-moz-focusring pseudo-class that matches an element “if the element is currently focused AND the user-agent has focus ring drawing enabled” (bug 418521).
-moz-focusring is intend to be used in the User Agent style sheets and the approach of
-moz-focusring cannot apply the web content. Because it will break backward compatibility.
Let’s consider following example:
/* unsupported browsers don't render the focus ring! */
/* only supported browsers render the focus ring */