TablesNG 解决了 72 个 Chromium 错误,提升了互操作性

Aleks Totic
Aleks Totic

在 Chromium 91 中发布了 TablesNG,并修复了多年来作为 Web 平台一部分的大量 bug。作为 #Compat2021 工作的一部分,这些更新将改进浏览器兼容性,并改进在网络平台上使用表的整体效果。一些最主要的问题包括:行中包含 position: sticky子像素几何图形和适当的边框收起

TablesNG 的工作成果

TablesNG 是 Chrome 开发者 Aleks Totic 领导的一项多年工作,旨在彻底重新设计表在 Web 上的渲染方式。表是 Web 开发中的一个特定阻碍因素,部分原因是其历史记录。

表的组成部分

表格于 1994 年被添加到 HTML 中,多年来它一直都是构建复杂页面布局的主要方法。尽管现代人通常是为了显示表格数据,但在网络上到处都可以找到它们。但是,各浏览器之间的表行为存在很大差异,其中许多原因都是由于表规范不完整和缺乏详细信息。表在许多 CSS 功能之前就已在浏览器中实现,包括正交写入模式、position:relativebox-sizing、flexbox 容器等。因此,对其中许多功能的支持不一致。

《Space Jam》网站屏幕截图
Shannon Draper 提供的包含《Space Jam》网站的创新表格布局。

新规范 CSS 表模块级别 3 是在 Edge 在 2018 年重新实现表之后编写的。TablesNG 是一项重新架构的工作,旨在不仅遵循这一新规范,而且还要解决这一过程中表的许多不一致问题。由此产生的一些最明显的变化如下:

  • 为可滚动的长表格启用在行中固定定位功能。
  • 修正了与子像素几何图形和表格边框的对齐问题。
  • 改进了背景和边框的绘制。

行数:position: sticky

过去,在设置表格样式时,最令人担忧的一个问题是,缺乏对行中的 position: sticky 的支持。借助此功能,表格标题会在您滚动页面时始终显示在页面上,并为较长的数据表格提供上下文。当您将标题滚动到视野范围之外,并且正在查看充满数字的表格时,很容易忘记这些数字的含义。

尽管已将 position: sticky 应用于 <thead>,但表标头不会停留在粘性位置。

出现这个 bug 很长时间是因为 position: sticky 是在 HTML 表格推出之后才指定的。在进行此修复之前,包含所需的 position: sticky 的标头刚刚转换为 position: static,但现在,您可以在表中的任何位置使用 position: sticky:在标题 (<thead>) 或纵轴标签上。

表格标题在 Chromium 91 及更高版本中具有粘性定位。请参阅 Codepen 上的演示

改进了边框绘制和背景绘制

最早的表bugs之一可以追溯到 2008 年 9 月。它几乎在 Chrome 发布时就提出了,并且由于表架构比较老旧,根本无法修复。问题涉及表格绘制和折叠边框。

表格的绘制方式(按照 z-index 的顺序)是:单元格 > 行 > 部分 > 表格。然后,这些单元格会按照它们在文档对象模型中的显示顺序进行绘制,尽管单元格本身是按照相反的 DOM 顺序排列的,即表格中的第一个单元格位于最上面。

表的 Z-index 顺序

因此,这里的问题是,边框属于表格,而不是单元格,而这正是表格的旧绘制方式。当表格绘制其前景时,系统会绘制收起的边框。这意味着单个表格单元格不能具有多个边框:

正确和错误的表格呈现
左图:TableNG 之前的表渲染错误。右图:TableNG 中正确显示了表格边框。

在上面的示例中,您可以看到最左边的蓝色单元格错误地绘制在右下角的橙色单元格的顶部,因为它不能有多个边框。在重新设计的实现中,此问题解决了,橙色边框单元格正确地绘制在蓝色边框之上,从而使第二个表间隙既有蓝色边框线,又有橙色边框线。

Chromium 和 Firefox 中现已修复此错误。

子像素几何图形(表格对齐)

表中的像素对齐是另一个与 TablesNG 相关的互操作性问题。以前,旧版引擎会始终将图形值四舍五入到像素。这意味着,当您放大和缩小页面时,内容将会发生变化,从而导致对齐问题。TablesNG 修复了这些对齐问题。

重新设计 Web 架构

Chrome 团队不仅不断推出新功能来提升网页编写功能的可靠性,还一直在努力改进现有 API 及其兼容性。事实上,TablesNG 只是该团队在过去 8 年开展的众多重新架构项目之一。其他项目(但不是所有项目)包括:

  • LayoutNG:所有布局算法的彻底重写,可显著提高可靠性和可预测性。
  • BlinkNG:对 Blink 渲染引擎进行系统性清理和重构,将其拆分为干净分离的流水线阶段。这样可以实现更好的缓存、更高的可靠性以及可重入/延迟渲染功能(例如内容可见性容器查询)。
  • GPU 光栅化:我们长期致力于在所有平台上部署 GPU 光栅化。
  • 线程滚动和动画:将所有滚动和非布局诱导动画移至合成器线程的长期努力。

敬请留意关于这些改进以及其他改进动态的资讯!