키보드 사용(또는 탭 누르기)에만 초점을 맞추는 방법은 무엇입니까?

키보드 사용(또는 탭 누르기)에만 :focus 활성화

개요

필요하지 않을 때 :focus를 비활성화하면 사용자 경험을 향상시킬 수 있습니다. 혼란스러운 시각적 단서. 그러나 키보드 사용자를 위한 포커스 기능을 유지하는 것은 필수적입니다.

원래 솔루션: 키보드 전용 포커스 스타일

Roman Komarov의 솔루션은 CSS와 HTML을 활용하여 키보드 전용 포커스 스타일을 구현합니다. 컨테이너 요소 내에 포커스 가능한 요소를 캡슐화하고 내부 요소에만 스타일을 지정하여 키보드 사용자가 포커스 상태에 시각적으로 액세스할 수 있도록 합니다.

향상된 솔루션: :focus-visible 의사 클래스

업데이트 : :focus-visible 의사 클래스는 키보드 전용 포커스 스타일을 구현하는 보다 우아하고 효과적인 방법을 제공합니다. 이제 브라우저는 키보드 상호 작용 중과 같이 사용자 경험을 향상시키는 경우에만 포커스를 표시합니다.

:focus-visible을 사용하려면 CSS 규칙에서 :focus를 :focus-visible로 바꾸세요. 이렇게 하면 키보드나 비포인팅 장치로 활성화된 경우에만 포커스 스타일이 표시됩니다.

하위 호환성

:focus-visible을 지원하지 않는 브라우저에는 기본 포커스 링이 표시됩니다. 일관된 사용자 경험을 제공하기 위해 Šime Vidas는 :focus에서 포커스 스타일을 정의하고 :focus:not(:focus-visible)에서 이를 되돌릴 것을 제안합니다.

CSS 예:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00;
}

button:focus:not(:focus-visible) {
  background: white;
}</code>

HTML 예 :

<code class="html"><button class="btn">
  <span class="btn__content" tabindex="-1">...</span>
</button></code>

참고:

• 포커스할 수 없는 요소를 포커스 가능하게 만들려면 tabindex 속성을 사용하세요.
• CSS가 기본 포커스 스타일을 재정의할 만큼 충분히 구체적인지 확인하세요. .
• 자식에 포커스가 있을 때 상위 요소의 스타일을 지정하려면 :focus-within 사용을 고려하세요.

결론

:focus-visible 가상 클래스를 활용하거나 원래 솔루션을 구현하면 개발자는 키보드 및 마우스 사용자 모두의 사용자 경험을 손상시키지 않고 키보드 전용 포커스 스타일을 제공할 수 있습니다.

위 내용은 키보드 사용(또는 탭 누르기)에만 초점을 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!