:focus-visible에 대한 폴리필을 조건부로 로드

포커스의 미래는 :focus-visible ! browser support 괜찮지만 Safari is still working on 이 중요한 접근성 기능입니다.

그동안 WICG focus-visible polyfill을 로드하여 아직 지원하지 않는 브라우저에서 향상된 포커스 스타일을 제공할 수 있습니다. 이상적으로는 포커스 가시성을 지원하는 브라우저에서 폴리필이 필요하지 않을 때 강제로 폴리필을 다운로드하도록 하지 않습니다. 그리고 미래에 모든 최신 브라우저가 이 기능을 지원할 때 중복 코드를 제공하고 싶지 않습니다.

다음은 지원되지 않는 경우에만 포커스가 보이는 폴리필을 로드하는 데 사용할 수 있는 스니펫입니다! 닫기 전에 이것을 삽입하고</body> 폴리필의 로컬 복사본을 가리키도록 script.src를 변경합니다(또는 jsdelivr과 같은 자산 CDN 사용).

<script>
  try {
    document.body.querySelector(':focus-visible');
  } catch (error) {
    var script = document.createElement('script');
    script.src = "/js/focus-visible.js";
    document.body.appendChild(script);
  }
</script>

CSS

또한 세 가지 상황에서 포커스 표시기를 처리하기 위해 CSS를 작성해야 합니다.

초점 표시가 지원됩니다.

focus-visible은 지원되지 않지만 polyfill이 로드되었습니다.

초점 표시가 지원되지 않고 폴리필이 로드되지 않습니다.

다음은 이러한 경우에 대한 설정입니다.

/**
 * My focus styles
 */
:focus {
  outline: 2px dashed currentColor;
  outline-offset: .25rem;
}

/**
 * When focus-visible is supported:
 * remove outline when :focus but not :focus-visible
 */
:focus:not(:focus-visible) {
  outline: none;
}

/**
 * when polyfill loaded:
 * remove outline when :focus but not .focus-visible
 */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;

메모

이것은 지원하지 않는 브라우저에 대해 로드할 추가 스크립트를 추가하지만 위와 같이 스크립트를 추가하면 비동기적으로 로드됩니다. 브라우저는 다른 리소스의 우선 순위를 지정하며 최악의 경우는 첫 번째 상호 작용에 의해 로드되지 않고 대체:focus 표시기가 표시됩니다.

CSS를 최소화/최적화하는 빌드 단계가 있는 경우 두 가지outline: none 선언이 단일 규칙으로 결합되어 있음을 알 수 있습니다. 브라우저가 이해하지 못하는 선택기가 있는 규칙을 무시하는 방식으로 인해 작동하지 않습니다. 이 단계에서 최적화를 비활성화해야 할 수도 있고 제 경우에는 outline: none 선언 중 하나를 outline: 0 로 변경했습니다. 이 CSS는 동일하게 작동하지만 대부분의 축소기에 의해 단일 규칙으로 결합되지 않음을 의미합니다.

추가 읽기

WICG focus-visible polyfill

Matthias Ott - :focus-visible is here

MDN - :focus-visible

CSS Tricks Almanac - :focus-visible

CanIUse - :focus-visible browser support

Igalia - :focus-visible in WebKit - January 2021