시각적 미학에 영향을 주지 않고 키보드 전용 초점 스타일을 달성하는 방법은 무엇입니까?

키보드 전용 포커스 스타일 달성

미학적으로 활성 상태와 충돌하므로 불필요한 경우 :focus를 비활성화하는 것을 목표로 합니다. 그러나 키보드 사용자에 대한 포커스 스타일을 유지하려고 합니다. 이 문제를 해결하기 위한 포괄적인 접근 방식은 다음과 같습니다.

:focus-visible 솔루션

포커스에 도움이 될 때 포커스를 나타내는 유사 클래스인 :focus-visible 사용을 고려해보세요. 사용자(예: 키보드 상호 작용 중) 이제 최신 브라우저는 이 유사 클래스를 지원합니다.

:focus-visible을 사용하면 조건에 따라 포커스 스타일을 적용할 수 있습니다.

<code class="css">button:focus-visible {
  /* remove default focus style */
  outline: none;
  /* custom focus styles */
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

브라우저 호환성

:focus-visible을 지원하지 않는 브라우저에서는 여전히 기본 포커스 링이 표시될 수 있습니다. 일관된 동작을 보장하려면 대체 전략을 사용하세요.

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

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

키보드 전용 포커스 스타일

키보드 전용 포커스 스타일 솔루션의 경우 다음 접근 방식을 사용하는 것이 좋습니다.

<code class="css">button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

이 방법은 각 버튼/링크/등 내의 내부 요소()를 사용합니다. 이 내부 요소에 대한 tabindex를 설정합니다. 포커스 스타일은 내부 요소에만 적용되므로 키보드 포커스에만 표시됩니다.

위 내용은 시각적 미학에 영향을 주지 않고 키보드 전용 초점 스타일을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!