:focus-visible을 사용하여 키보드 전용 포커스 스타일을 어떻게 구현할 수 있나요?

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

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

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

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

<code class="css">button:focus {
  /* Default focus styles */
}

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

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

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

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

<code class="css">/* 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;
}</code>

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

위 내용은 :focus-visible을 사용하여 키보드 전용 포커스 스타일을 어떻게 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!