최신 브라우저의 키보드 전용 포커스 스타일

최신 브라우저에서는 :focus-visible 의사 클래스를 활용하여 키보드-를 구현할 수 있습니다. 초점 스타일만. 이 의사 클래스는 사용자가 키보드나 기타 비포인팅 장치를 통해 페이지와 상호 작용할 때 초점이 맞춰진 요소를 일치시켜 사용자에게 도움이 될 때 초점을 나타냅니다. 결과적으로 사용자가 클릭하거나 탭하여 상호작용할 때 포커스 링이 억제됩니다.

:focus-visible을 사용한 사용자 정의 포커스 스타일링

사용자 정의 포커스 스타일을 유지하면서 구현하려면 이전 브라우저와의 호환성을 위해 다음 접근 방식을 따르세요.

button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}

:focus-visible을 지원하는 브라우저에서는 :focus-visible이 비활성화된 경우 두 번째 규칙이 첫 번째 규칙에 정의된 포커스 스타일을 재정의합니다. 이렇게 하면 :focus-visible이 활성화된 경우에만 포커스 스타일이 적용됩니다.

이전 브라우저를 위한 원래 솔루션

:focus-visible을 지원하지 않는 브라우저의 경우, 대안적인 접근 방식은 Roman Komarov의 기사에서 제안한 대로 포커스 가능한 각 요소 내에 추가 요소를 사용하는 것입니다:

/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}

내부 요소에 포커스 스타일을 배치하고 사용자 정의 포커스 스타일을 추가한 후 상위 요소와 내부 요소 모두에서 기본 윤곽선을 제거하면 키보드 상호 작용만 기본 표시 요소에 포커스 스타일을 적용합니다.