최근 문서 개요 Chatter 정리

소스 노드 : 1586057

HTML 제목이 주제가 되는 것은 일상적이지 않습니다. 드 주르, 하지만 저장된 링크가 있는 내 폴더에 최근 병합 WHATWG Living Standard에서 문서 개요 알고리즘 제거.

우선, 알고리즘이 실제로 존재한 적이 없다는 것을 알아야 합니다. 물론 사양에 있었습니다. 그리고 확실히, 사양에서 그것을 사용하는 것에 대한 경고가 있었습니다. 그러나 어떤 브라우저도 그것을 구현하지 않았습니다. Bruce Lawson은 우리에게 상기시켜주었습니다.. 우리는 내내 평평한 문서 구조 속에서 살아왔습니다.

이것은 대단히 오래된 뉴스. Adrian Roselli는 문서 개요 신화에 대해 저술했습니다. 2013 이후. 하지만 그의 2016년 게시물은 "문서 개요 알고리즘이 없습니다" 그것은 그것을 포괄적으로 설명하고 우리를 여기까지 데려온 대화와 투쟁에 대한 추가적인 맥락으로 정기적으로 업데이트되었습니다. 이것은 정말로 사가의 최고의 타임 라인입니다. Amelia Bellamy-Royds는 또한 딜레마의 뿌리를 파헤쳤다 과거에는 여기 CSS-Tricks에서.

내 마음은 섹션을 지원하는 문서 개요 알고리즘을 만드는 데 들어간 모든 작업으로 즉시 이동합니다. 사양에서 그것을 제거하는 것은 확실히 옳은 일이지만, 그것이 지금 일부 버전 기록에 묻혀 있더라도 그것에 들어간 엄청난 노력을 빼앗지는 않습니다. 나는 또한 시간이 지남에 따라 (바로 이 사이트를 포함하여) 알고리즘에 대해 잘못 작성한 모든 선의의 사람들에 대해 생각합니다. 거의 XNUMX년 동안 행동의 부족으로 보이는 정신적, 기술적 부채가 있습니다.

알고리즘이 공식적으로 더 이상 존재하지 않는다는 "뉴스"를 지나쳐 Bruce는 일반 알고리즘이 없다고 한탄합니다. <h> 올바른 표제 수준을 생성하기 위해 분할될 수 있는 요소 등. 동의한다. 가지고 <h1> 요소는 본질적으로 노출된 상태로 존재합니다. <title> 특히 페이지가 단일 최상위 제목이 있는 단일 기사를 중심으로 구성되는 경우가 거의 없기 때문에 제한적입니다. 나는 종종 어떤 종류의 카드 구성 요소를 사용할 때마다 움찔하는 자신을 발견합니다. <h3> 기술적으로 정확할 수 있지만 순서가 맞지 않습니다. 그리고 그것은 더 낮은 제목 수준이 이제 뚜렷한 더 높은 제목 수준처럼 보일 필요가 있는 스타일 고려 사항에 대해 이야기하기 전입니다.

제목 수준 관리에 대해 말하면 Steve Faulkner(스펙에서 알고리즘을 뽑아낸 PR을 저술한 사람)는 사용에 대한 매우 실용적인 개요 <hgroup> 요소 부제목, 부제목, 대체 제목, snd 태그라인을 포함하는 제목 패턴을 처리합니다. 야생에서 다음과 같은 마크업을 본 적이 있을 것입니다.

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

그것은 제목 수준에 의해 구동되는 평면 문서 개요와 함께 어울리지 않습니다. 이러한 각 제목은 정보 계층 구조를 형성하는 섹션을 나타냅니다.

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

대신 우리가 원하는 것은 그룹 제목의. 큐 <hgroup> 요소:

안에 중첩될 때 <hgroup> 요소, <p> 요소의 내용은 문서 개요에 포함되지 않은 부제목, 대체 제목 또는 태그라인을 나타냅니다.

따라서 다음과 같은 구조를 얻습니다.

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> is role=generic 하지만 지금은 스티브 제안을 가리킨다 매핑할 수 있는 role=group. 그런 일이 발생하면 접근성 트리를 통해 보조 기술자가 해당 단락에 더 많은 의미론적 의미를 부제 및 태그라인 조각으로 할당할 수 있습니다. 쉬워 보이지만 Steve는 방해가 되는 문제를 지적합니다. 그는 또한 이러한 종류의 패턴이 오늘날 ARIA 속성으로 어떻게 구현될 수 있는지 시연합니다.

정리하는 동안 Matthias Ott는 다음과 같은 몇 가지 팁을 게시했습니다. 제목이 있는 구조화된 개요 만들기. 제목 개요를 확인하기 위한 훌륭한 도구 목록은 끝 부분을 확인하세요.

타임 스탬프 :

더보기 CSS 트릭

냅킨

소스 노드 : 1016208
타임 스탬프 : 11년 2021월 XNUMX일