Progressive Enhancement recommendation about focus-visible HOT 4 CLOSED

.. or maybe even consider having JavaScript add a class focus-ring-polyfill that you can descend from:

.focus-ring-polyfill :focus:not(.focus-ring) { outline: none; }

With something like that JavaScript could fail or have an error and default focus states would be intact. See #8

from focus-visible.

Adding a class to the body works, but I'm concerned about causing really large style recalcs on older browsers.

Note: It used to be the case that if you changed a class on -- say -- the body element, that all the children in the page would need to have their computed styles recalculated. Thankfully that is no longer the case; some browsers instead maintain a small collection of rules unique to each element that, if changed, cause the element’s styles to be recalculated. That means that an element may or may not need to be recalculated depending on where it is in the tree, and what specifically got changed.
https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations#reduce_the_number_of_elements_being_styled

I did a test in Chrome and things are fine, we only recalc 1 element if it's a mouse click, or 2 elements if we're tabbing and the focus ring is moving. But I'm less optimistic about older versions of IE. @paullewis were you referring to specific browsers in that comment? I'd love to know the versions if so.

from focus-visible.

Another option is the polyfill could inject the styles itself. That way it only does it if JS is working. I'm not in love with the idea of something injecting CSS because I prefer having total control over that, but it might be a decent compromise in this case. Or we could even make it configurable.

from focus-visible.

We're going with the class on body approach as discussed in #8

I'm going to close this issue so we can track the work in #8.

from focus-visible.