`:focus-visible` and backwards compatibility

Patrick H. Lauke covers the future CSS pseudo class :focus-visible. We're in the early days of browser support, but it aims to solve an awkward situation:

... focus styles can often be undesirable when they are applied as a result of a mouse/pointer interaction. A classic example of this are buttons which trigger a particular action on a page, such as advancing a carousel. While it is important that a keyboard user is able to see when their focus is on the button, it can be confusing for a mouse user to find the look of the button change after they clicked it – making them wonder why the styles “stuck”, or if the state/functionality of the button has somehow changed.

If we use :focus-within instead of :focus, that gives the browser the freedom to not apply focus styles when it determines it's unnecessary, but still does when, for example, the element is tabbed to.

The scary part is "instead of". We can just up and switch with browser support as it is. Not even @supports can help us. But Patrick has some ideas.

button:focus { /* some exciting button focus styles */ }
button:focus:not(:focus-visible) {
    /* undo all the above focused button styles
       if the button has focus but the browser wouldn't normally
       show default focus styles */
}
button:focus-visible { /* some even *more* exciting button focus styles */ }

Direct Link to Article — Permalink

The post `:focus-visible` and backwards compatibility appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2HXygq8
via IFTTT