Chromium 91에서 Tables를 출시하고 수년 동안 웹 플랫폼의 일부였던 수많은 버그를 수정합니다. 이러한 업데이트를 통해 #Compat2021 노력의 일환으로 브라우저 호환성을 개선하고 전반적인 웹 플랫폼에서 테이블 사용을 개선합니다. 가장 많이 별표가 표시된 문제로는 행의 position:
sticky, 하위 픽셀 도형, 적절한 테두리 축소가 있습니다.
TablesNG의 노력
TablesNG는 웹에서 테이블이 렌더링되는 방식을 완전히 재설계하기 위해 Chrome 개발자인 Aleks Totic이 이끄는 다년간의 노력입니다. 테이블은 웹 개발에서 장애 요소가 되는 특별한 영역이며, 테이블은 테이블도 그 역사 때문입니다.
표는 1994년에 HTML에 추가된 후 여러 해 동안 복잡한 페이지 레이아웃을 만드는 기본 방법으로 사용되었습니다. 일반적으로 테이블 형식의 데이터를 표시하는 데 사용되지만
오늘날에는 웹 곳곳에서 찾을 수 있습니다.
그러나 브라우저마다 테이블 동작에 큰 차이가 있습니다. 그 중 상당수는 테이블 사양이 불완전하고 세부정보가 부족하기 때문입니다.
테이블은 직교 쓰기 모드, position:relative, box-sizing, Flexbox 컨테이너 등 여러 CSS 기능이 제공되기 전에 브라우저에서도 구현되었습니다. 따라서 대부분의 기능에 대한 지원이 일관되지 않았습니다.
새 사양인 CSS 테이블 모듈 수준 3은 Edge가 2018년에 테이블을 재구현한 후에 작성되었습니다. TablesNG는 이 새로운 사양을 따를 뿐만 아니라 그 과정에서 발생하는 테이블의 많은 불일치를 해결하기 위한 재설계 작업입니다. 가장 눈에 띄는 변화는 다음과 같습니다.
- 스크롤하는 긴 테이블의 행에 고정 위치 지정을 사용 설정합니다.
- 하위 픽셀 도형 및 표 테두리의 정렬을 수정했습니다.
- 배경 및 테두리의 색칠이 개선되었습니다.
position: sticky행
이전에 테이블 스타일 지정에서 가장 어려웠고 가장 실망스러웠던 점 중 하나는 행의 position: sticky가 지원되지 않는 것이었습니다. 이 기능을 사용하면 스크롤할 때 테이블 헤더를 페이지에 유지하여 긴 데이터 테이블에 컨텍스트를 제공할 수 있습니다. 헤더를 스크롤해서 밖으로 스크롤하여 숫자로 가득 찬 테이블을 볼 때쯤에는 숫자의 의미를 잊어버리기 쉽습니다.
position: sticky이 <thead>에 적용되었지만 표 헤더가 고정 위치에 남아 있지 않습니다.이 버그가 오랫동안 지속된 이유는 HTML 테이블이 나오고 한참 후에 position: sticky이 지정되었기 때문입니다. 이 수정 전에는 의도된 position: sticky가 있는 헤더가 position: static로 변환되었지만 이제는 헤더 (<thead>) 또는 세로축 라벨 등 표의 아무 곳에서나 position: sticky를 사용할 수 있습니다.
테두리 페인팅 및 배경 페인팅 개선
가장 오래된 테이블 bugs 중 하나가 2008년 9월로 거슬러 올라갑니다. 이 문제는 Chrome이 출시되자마자 제출되었으며 이전 테이블 아키텍처로 인해 수정할 수 없었습니다. 이 문제는 테이블 페인팅과 접힌 테두리와 관련이 있습니다.
표를 z-index 순으로 그리는 방법은 셀 > 행 > 섹션 > 표입니다. 그런 다음 DOM(문서 객체 모델)에 표시되는 순서대로 셀의 페인트를 칠합니다. 셀 자체는 역방향 DOM 순서이며 테이블의 첫 번째 셀이 맨 위에 있습니다.
따라서 여기서 문제는 테두리가 예전에 표가 칠해진 방식으로 셀이 아닌 표에 속한다는 것입니다. 접힌 테두리는 표가 전경을 칠할 때 칠해집니다. 즉, 단일 표 셀에 여러 테두리를 가질 수 없습니다.
위의 예에서 주황색 오른쪽 하단 셀의 가장 왼쪽에 있는 파란색 셀이 여러 테두리를 가질 수 없으므로 잘못 그렸음을 알 수 있습니다. 재구성된 구현에서는 이 문제가 해결되고 주황색 테두리 셀이 파란색 테두리 셀 위에 올바르게 페인트되므로 두 번째 테이블 간격에 파란색 테두리와 주황색 테두리 선이 모두 표시됩니다.
이 버그는 현재 Chromium 및 Firefox에서 수정되었습니다.
서브 픽셀 도형 (표 정렬)
테이블의 픽셀 정렬은 TablesNG에서 수정된 또 다른 상호 운용성 문제입니다. 이전에는 이전 엔진에서 그래픽 값을 항상 픽셀로 반올림했습니다. 즉, 페이지를 확대/축소할 때 상황이 바뀌면서 정렬 문제가 발생합니다. TablesNG는 이러한 정렬 문제를 해결합니다.
웹 재설계
Chrome팀은 웹 작성을 더 강력하게 만드는 새로운 기능을 도입했을 뿐만 아니라 기존 API와 호환성을 개선하기 위해 열심히 노력하고 있습니다. 실제로 TablesNG는 이 팀이 지난 8년 동안 진행한 수많은 재설계 프로젝트 중 하나일 뿐입니다. 일부 프로젝트는 아니지만 다음을 포함합니다.
- LayoutNG: 안정성과 예측 가능한 성능을 크게 개선하기 위해 모든 레이아웃 알고리즘을 처음부터 다시 작성합니다.
- BlinkNG: Blink 렌더링 엔진을 체계적으로 정리하고 깔끔하게 분리된 파이프라인 단계로 리팩터링합니다. 이를 통해 향상된 캐싱, 높은 안정성, 콘텐츠 공개 상태 및 컨테이너 쿼리와 같은 재진입/지연 렌더링 기능이 제공됩니다.
- GPU 래스터 Everywhere: 가능하면 모든 플랫폼에서 GPU 래스터화를 출시하기 위한 장기적인 노력
- 스레드 스크롤 및 애니메이션: 모든 스크롤 및 레이아웃을 유도하지 않는 애니메이션을 컴포지터 스레드로 이동하기 위한 장기적인 노력
이러한 개선사항 등에 대한 추가 업데이트를 기대해 주세요.