CSS 사용자 정의 속성으로 포커스 스타일을 표준화합니다

프로젝트를 신속하게 테스트하십시오 : 브라우저를 열고 탭 키만 사용하고 버튼, 링크 및 양식 요소와 같은 대화식 요소 사이를 탐색해보십시오.

정상적인 비전을 가진 사용자 인 경우 DOM 요소 사이에 초점이 점프 할 때 시각적 변경 사항을 볼 수 있어야합니다. 그러나 시각적 변화가 없거나 변화가 최소화되면 방문자에게 큰 차이를 만들 수있는 방법을 찾을 수 있습니다.

이 기사는 CSS 사용자 정의 속성을 사용하여 프로젝트 포커스 스타일을보다 효율적으로 관리하고 최신 CSS Focus Selectors를 배우는 기술을 소개합니다. 먼저, 가시적 초점 스타일이 왜 그렇게 중요한지 이해합시다.

WCAG 포커스 스타일 표준을 충족하십시오

가시적 초점 상태는 웹 컨텐츠 접근성 가이드 라인 (WCAG) 성공 표준 2.4.7을 준수합니다. - 초점이 보입니다. 2.4.7의 "이해"문서는이 표준의 의도를 나타냅니다.

이 성공 기준의 목적은 사용자가 어떤 요소가 키보드 초점을 가지고 있는지 이해하도록 돕는 것입니다. 여러 요소의 키보드 초점이있는 요소의 어떤 요소를 사용자에게 알릴 수 있어야합니다.

다가오는 WCAG 2.2에서는“초점 지표가 얼마나 명백 해야하는지”를 명확히하기 위해 새로운 표준이 추가 될 것입니다. 여전히 초안 단계에있는 동안 2.4.11에서 가이드를 익히고 적용하는 것은 의심 할 여지없이 오늘날의 초점 스타일을 개선하기위한 적극적인 단계입니다.

CSS 사용자 정의 속성으로 포커스 스타일을 관리하십시오

올해 사용한 기술 중 하나는 계단식 스타일 시트의 주요 대화식 기본 요소에 가능한 한 빨리 다음 설정을 포함시키는 것입니다.

 <code>:is(a, button, input, textarea, summary) { --outline-size: max(2px, 0.08em); --outline-style: solid; --outline-color: currentColor; } :is(a, button, input, textarea, summary):focus { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

여기에는 사용자 정의 속성이 첨부되어 요소 컨텍스트가 변경 될 때 초점이 표시되도록 필요에 따라 개요 스타일의 특정 부분을 유연하게 사용자 정의 할 수 있습니다.

--outline-size 의 경우, max() 사용하여 구성 요소 (예 : 제목 내 큰 버튼 또는 링크)를 기반으로 0.08em 기준으로 스케일링을 허용하면서 최소 2px의 값을 보장합니다.

여기에 익숙하지 않은 속성은 outline-offset 요소와 개요 사이의 공간을 정의합니다. 윤곽선을 포함시키기 위해 음수를 제공 할 수도 있습니다. 이는 포커스 스타일의 대비를 보장하는 데 매우 유용합니다. 규칙 세트 에서이 속성을 선택적 사용자 정의 속성 --outline-offset 수락하여 필요한 경우 사용자 정의 할 수 있도록 설정했습니다. 그렇지 않으면 --outline-size 와 일치합니다.

윤곽 모양 개선

내 경력 동안, 나는 윤곽을 제거하라는 요청을 받았으며 윤곽을“보기 흉한”것으로 간주하기 때문에 직접 윤곽을 제거했습니다.

이제 윤곽선을 제거해서는 안되는 두 가지 이유가 있습니다 (접근성 효과 제외).

1. Chromium과 Firefox에서, 이제 outline 이제 border-radius 따릅니다! 이는 box-shadow 사용하여 시뮬레이션하는 것과 같이 사용했을 수있는 해킹을 고려할 수 있음을 의미합니다.
2. 사용 :focus-visible , 우리는 브라우저에 휴리스틱을 사용하여 눈에 띄는 초점이 필요한 입력 패턴을 감지 할 때만 초점 스타일을 표시하도록 요청할 수 있습니다. 요컨대, 이는 마우스 사용자가 클릭 할 때 마우스 사용자가 표시되지 않으며 탭 키가 작동 할 때 키보드 사용자가 여전히 볼 수 있음을 의미합니다.

형태 요소는 항상 초점 스타일을 표시합니다. :focus-visible 동작에 의해 제한되지 않습니다.

다음을 포함 할 다음을 추가하여 규칙 세트를 향상시켜 봅시다 :focus-visible . 우리는 초기 브라우저에 대해 정의한 :focus 스타일을 유지합니다.

 <code>:is(a, button, input, textarea, summary):focus-visible { outline: var(--outline-size) var(--outline-style) var(--outline-color); outline-offset: var(--outline-offset, var(--outline-size)); }</code>

브라우저가 이해하지 못하는 선택기를 처리하는 방식으로 인해 동일한 개요 속성을 정의하더라도 이러한 규칙을 분리해야합니다.

마지막으로, 우리는 또한이 이상한 느낌이 필요합니다 :focus:not(:focus-visible) :focus-visible 은 지원하는 브라우저의 일반 초점 스타일을 제거합니다.

 <code>:is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none; }</code>

최신 버전의 Chromium 및 Firefox가 사용으로 전환되었음을 주목할 가치가 있습니다 :focus-visible 으로 인터랙티브 요소에 초점 스타일을 적용하는 기본 방법으로 WebKit의 기본 방식으로 활성화되어 Safari Stable 버전으로 곧 출시 될 것입니다! 우리의 규칙은 외관 외관을 사용자 정의하기 때문에 여전히 유효합니다.

가시적 초점 스타일에 대한 자세한 내용은 다가오는 2.4.11 표준을 고려하여 초점 지표에 대한 Sara Soueidan의 훌륭하고 포괄적 인 안내서를 추천합니다.

초점 스타일 데모

이 예제는 이러한 대화 형 요소 각각과 어두운 모드로의 변경 사항을 포함하여 사용자 정의 속성을 사용하여 사용자 정의 설정을 적용하는 방법을 보여줍니다. 브라우저 지원에 따라 탭 키를 사용하지 않는 한 초점 스타일이 표시되지 않을 수 있습니다. :focus-visible 사용되기 때문입니다.

마지막으로 : 포커스 스타일 측면에서, button 특히 색상에만 의존하는 경우 상태간에 추가 고려 사항이 있기 때문에 독특한 대화식 요소입니다. 도움을 받으려면 프로젝트에서 팔레트 생성기를 사용해보십시오. ButtonBuddy.dev.

위 내용은 CSS 사용자 정의 속성으로 포커스 스타일을 표준화합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!