2017-01-06 10 views
0

div 요소의 경우 :focus 가상 클라스가 있습니다. 추가시 divtabindex에 추가하십시오. 이처럼 :CSS에 tabindex 해킹이 있습니까? 포커스가 어딘가에 지정 되었습니까?

.testFocus:focus{ 
 
    background: red; 
 
}
<div class="testFocus" tabindex="0">awesomeDiv</div>

어딘가 W3C 문서에 규정이 동작 (? 경우) 또는이 단지 비 문서화 된 해킹인가?

는 "이 문제는"구성

  1. div 요소는 기본적으로 포커스가 아닙니다.
  2. div 요소는 tabindex입니다.
+1

W3C HTML5 및 WHATWG HTML은 tabindex를 모든 요소에 적용 할 수 있는지 또는 특정 요소에만 적용되는지 여부를 명시하지 않습니다. 그러나 대부분의 타사 소스는 이것이 전역 특성이라고 주장합니다. 그러나 tabindex는 요소 집중 기능을 부여합니다. Selectors의 목적 상 요소가 일치한다는 의미는 포커스가있는 경우 포커스입니다. – BoltClock

+0

@BoltClock, 감사합니다. Korgrue 링크로 지금은 분명합니다. –

답변

2

tabindexglobal attributes 중 하나입니다. 즉, 모든 HTML 요소에 지정할 수 있습니다.

0은 유효한 값입니다 (definition of tabindex 아래의 "값이 0 인 경우"참조).

그럼 HTML이 좋습니다.

+0

질문은 내 HTML이 얼마나 훌륭한가에 대한 것이 아니라 "왜 tabindex가 연결되어 있는지 : 이상한 (나를 위해) 방법으로 초점을 맞추는 이유"에 관한 것입니다. 그리고 "왜 지옥 브라우저 동작이 다른가? 그것은 지정되어서는 안되는가?" –

+0

@ Mr.Duck : 그것에 대해 이상한 점은 무엇입니까? 값이 '0'인'tabindex' 속성은 요소를 포커스 가능하게 만듭니다. 포커스가 있으면 CSS 가상 클래스': focus'가 실행됩니다. – unor

+0

tabindex는 요소를 포커스 가능하게해야한다는 것은 직관적이지 않습니다. 직관적 인 것은 아니므로 초점을 맞추기 힘든 많은 요소가 불이행을 사고 있습니다. 그 이유는 내가 왜 사양 참조를 요청 했는가? –

0

tabindex는 HTML5의 다음 요소에서 작동합니다. https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute

  • href 속성을 속성 유형 숨김 상태가 아닌
  • 입력 요소가 반드시 href 속성을 가지고
  • 버튼 소자
  • 링크 요소를 가지고 요소
  • 선택 소자
  • 텍스트 영역
+0

"주장"이 아닌 "제안"으로 지정되어 있습니까? –

+2

이것들은, 디폴트로 tabindex 포커스 플래그를 취득해야하는 요소입니다 ('tabindex'가 지정되어 있지 않은지, 그 값이 무효 인 경우). – unor