Re: [w3ctag/design-reviews] CSS Selectors 4, :focus-visible. (#233)

Adding pseudo classes to @supports would be a huge help.

As Brian mentioned, without @supports, using [the polyfill](https://github.com/WICG/focus-visible) may be the easiest way to provide backwards compatibility. 

Another possible trick [suggested by the Paciello Group](https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/) would be to do something like:

```
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 */ }
```
I haven't tested it across all browsers, but the author suggests that if the browser doesn't know about the pseudo class in the `:not()` bit, then it ignores the entire selector.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/233#issuecomment-382101097