focus-visible()

포커스 비저블(:focus-visible) 상태 믹스인

용도

:focus-visible 가상 클래스를 사용해 키보드 포커스와 마우스 포커스 상태를 다르게 처리할 때 사용합니다.

사용에 앞서 :focus-visible 가상 클래스 브라우저 호환성 확인합니다. 모든 브라우저에서 호환되도록 하려면 폴리필 라이브러리 focus-visible.js를 사용해야 합니다.

사용법

focus-visible() 믹스인을 호출합니다. 색상과 테두리 두께 값를 옵션으로 전달할 수 있습니다.

focus-visible($color:color, $thickness:number)

.focusVisible {
  @include focus-visible();
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$color	color		get-color(state-focus)
$thickness	number		3px

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.focusVisible:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 112, 212, 0.7);
}

.focusVisible:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.focusVisible:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 112, 212, 0.7);
}

포커스 비저블 상태의 색과 두께를 설정

색상과 테두리 두께 값을 믹스인 호출 과정에 전달합니다.

* {
  @include focus-visible(rgba(#20bebe, 0.655), rem(4));
}

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(32, 190, 190, 0.655);
}

*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(32, 190, 190, 0.655);
}

로직

focus-visible() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin focus-visible(
  $color: rgba(alt-color(state-focus, #1870d4), 0.7),
  $thickness: 3px
) {
  &:focus {
    outline: none;
    box-shadow: 0 0 0 $thickness $color;
    @content;
  }

  &:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 $thickness $color;
    @content;
  }
}

1. 전달 받은 값이 없을 경우, 기본 값(색상, 테두리 두께)을 사용

2. 전달 받은 값이 있을 경우 색상, 테두리 두께 값을 설정하여 코드 출력

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @mixin / @include

• @content