HTML 요소, `캡션` 불일치

최근에 저는 이중 캡션이 있는 테이블을 만들고 싶었습니다. 하나는 상단에, 하나는 하단에 있습니다.

HTML 테이블에는 이를 구성하는 많은 요소가 있습니다. 예를 들면 다음과 같습니다.

thead, defines a set of rows defining the head of the columns of the table.

tfoot, defines a set of rows summarizing the columns of the table.

그리고 테이블에 캡션을 지정하는 HTML 요소가 있습니다.

caption specifies the caption (or title) of a table

그래서 나는 그 중 두 개를 넣고 CSS로 배치할 것이라고 생각했습니다.

<table>
   <caption class="top">
     first
  </caption>
  <caption class="bottom">
     second
  </caption>
  <thead>
    <tr>
      <th>hello</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>world</td>
    </tr>
  </tbody>
</table>

caption 요소는 위치 지정을 위해 사용할 수 있는 CSS 규칙이 있어 매우 편리합니다.

.top {
    caption-side: top; 
}

.bottom {
    caption-side: bottom;
}

top is the initial-value for caption-side.

모든 설정을 마치고 변경 사항을 적용하고 자전거를 타고 집으로 갈 준비를 했습니다. 그러나 자전거로 내려가는 길에 나는 사용 가능한 전화기에서 솔루션이 어떻게 보이는지 확인하기 시작했습니다. 크롬 기반(Chrome 및 Brave)은 괜찮아 보였습니다. 사파리, 확인하세요.

HTML 의미에 관해서는 일반적으로 매우 엄격한 브라우저 인 Firefox 만 남았지만 이중 캡션은 괜찮을 것이라고 생각했습니다. 그러나 이 솔루션은 Firefox에서 작동하지 않았습니다.

다음은 매우 단순화된 것입니다codepen. Chrome에서 열면 제대로 작동하지만 Firefox는 함께 재생되지 않습니다. 아니면 내가 반칙을 하고 있는 걸까?



Firefox는 첫 번째 캡션 태그만 렌더링합니다. 나머지 태그는 모두 크기가 0x0이고 perspective-origin 및 transform-origin 가 있고 0px 0px 로 설정되어 있습니다.

약간 이상한 동작은 캡션 내에 캡션을 중첩하면 브라우저가 DOM에서 캡션을 병합한다는 것입니다.

또한 중첩 캡션이 다른 경우caption-side Chrome은 CSS 선언을 따릅니다.

Chrome Version 85.0.4183.121

Firefox Browser for Developers, version 82.0b6 (64-bit)

Browserling 을 사용하여 IE 11에서 몇 가지 테스트를 수행했으며 IE는 많은 캡션을 렌더링하는 중입니다. 중첩 캡션을 테스트하지는 않았지만 잘 작동할 것이라고 생각합니다.

그래서 누가 옳습니까?

HTML Living Standard 은 다음과 같이 말합니다.

Contexts in which this element can be used:

As the first element child of a table element.

엄밀히 말하면 캡션이 여러 개 있을 가능성이 없어야 합니다.

HTML5 Recommended 사양에서도 마찬가지입니다.

금 덩어리는 HTML 4.01 Specification에 있습니다.

A TABLE element may only contain one CAPTION element.

이것이 Firefox가 보여주는 행동의 근원입니다.

흥미롭게도 HTML 4.01은 summary에 대해 table 태그를 사용해야 한다고 말하고 이 사용 사례는 deprecated이며 대신 summary 태그가 details 태그와 함께 사용됩니다.

[HTML 5 권장] 사양은 다음과 같은 테이블 모델도 참조합니다.

In addition to cells, columns, rows, row groups, and column groups, tables can have a caption element associated with them. This gives the table a heading, or legend.

다시, a caption element가 사용된 언어입니다. 따라서 하나의 캡션만 예상하는 것이 좋습니다.

이 사실을 알게 된 후 해결 방법을 강요하는 대신 디자인과 마크업을 변경하기로 결정했습니다.

정말로 이것을 해킹하고 싶다면 caption의 표시 속성을 변경한 다음 변환을 사용하여 콘텐츠의 위치를 ​​지정해야 하지만 권장하지 않습니다.

즐거운 코딩!