TablesNG 解決 72 個 Chromium 錯誤以提升互通性

Aleks Totic
Aleks Totic

TablesNG 會在 Chromium 91 中推出,並修正網路平台多年來的大量錯誤。這些更新將改善瀏覽器相容性,並在 #Compat2021 計畫中改善整體網頁平台的使用方式。其中一些獲得最多星號的問題包括:position: sticky 在列中子像素幾何圖形,以及正確的邊框摺疊

TablesNG 計畫

TablesNG 是由 Chrome 開發人員 Aleks Totic 主持,為期數年,旨在完全重新建構資料表在網路上的算繪方式。表格是網頁開發中特別容易發生摩擦的部分,部分原因是因為表格有其歷史。

表格的組成部分

表格在 1994 年新增至 HTML,之後是建立複雜頁面版面配置的主要方法,已行之有年。仍然在網路上找到這些資訊,但新型系統通常以顯示表格資料的方式顯示。不過,不同瀏覽器的資料表行為有很大差異,其中許多差異都是因為資料表規格不完整且缺乏詳細資料。在許多 CSS 功能 (交錯書寫模式、position:relativebox-sizing、彈性容器等等) 推出之前,瀏覽器就已實作表格。因此,許多這類功能的支援情況並不一致。

Space Jam 網站螢幕截圖
Shannon Draper 設計的創新表格版面配置,用於 Space Jam 網站。

新規格「CSS 表格模組等級 3」,是在 Edge 2018 年重新實作資料表後寫入的。TablesNG 是重新架構的成果,其目標不僅是遵循這項新規範,還要修正資料表中許多不一致之處。這項調整帶來的部分明顯變化如下:

  • 針對可捲動的長表格,在資料列中啟用固定位置。
  • 修正子像素幾何圖形和表格邊框的對齊情形。
  • 改善背景和邊框的繪製效果。

position: sticky

過去在設定表格樣式時,最常見的要求之一,也是最令人沮喪的情況,就是缺乏對資料列中的 position: sticky 支援。這項功能可讓表格標題在捲動時保留在頁面上,並為長表格提供背景資訊。當您捲動標題離開畫面,只剩下滿滿數字的資料表時,很容易忘記這些數字的含義。

即使 position: sticky 已套用至 <thead>,資料表標頭仍未保留在固定位置。

之所以發生這個錯誤,是因為我們一直在設定 HTML 表格後才指定 position: sticky。在修正之前,含有預定 position: sticky 的標頭會直接轉換成 position: static,但現在你可以在表格的任何位置使用 position: sticky:標頭 (<thead>) 或垂直軸標籤。

表格標頭在 Chromium 91 以上版本中具有固定位置。請參閱 Codepen 上的示範

改善邊框繪製和背景繪製功能

其中一個最舊的資料表錯誤日期可追溯至 2008 年 9 月。這項問題幾乎是在 Chrome 推出後立即提出,但由於舊版表格架構,因此一直無法修正。這個問題與表格繪製和摺疊邊框有關。

z-index 的順序來說,繪製表格的順序為:單元格 > 列 > 區段 > 表格。然後,系統會依 DOM (文件物件模型) 中顯示的順序繪製這些圖片,但資料格本身會以反向 DOM 順序繪製,也就是表格中的第一個資料格是位於最上方。

表格的 z-index 順序

因此,問題在於邊框屬於表格,而非儲存格,這是因為表格採用舊版繪製方式。表格繪製前景時,系統會繪製摺疊邊框。也就是說,單一表格儲存格不得有多個邊框:

表格算繪出錯或不正確
左:在 TablesNG 推出前,表格呈現方式不正確。右圖:TablesNG 正確顯示表格邊框。

在上例中,您可以看到最左邊的藍色儲存格無法在右下方的橘色儲存格上繪製,因為它無法擁有多個邊框。在重新架構的實作項目中,這個問題已解決,橘色邊框儲存格會正確地繪製在藍色邊框儲存格上方,讓第二個表格間距同時顯示藍色和橘色邊框線。

這個錯誤現已在 Chromium 和 Firefox 中修正。

子像素幾何圖形 (表格對齊)

表格的像素對齊是另一項與 TablesNG 修正的互通性問題。先前,舊版引擎一律會將圖形值四捨五入至像素。這表示當您放大或縮小網頁時,內容會移位,導致對齊問題。TablesNG 會修正這些對齊問題。

重新架構網路

Chrome 團隊不僅推出新功能,讓網頁製作更強大,也努力改善現有 API 和相容性。事實上,TablesNG 只是這個團隊在過去八年內接手的眾多重新架構專案之一。其他專案 (但並非所有專案) 包括:

  • LayoutNG:從頭開始重寫所有版面配置演算法,大幅提升可靠性,並提供更可預測的效能。
  • BlinkNG:將 Blink 轉譯引擎系統化地清理及重構,分成清楚分隔的管道階段。這可提供更優質的快取、更高的可靠度,以及可重入/延遲轉譯的功能,例如 content-visibility容器查詢
  • 隨處 GPU 光柵化:這是一項長期計畫,我們會盡可能在所有平台上推出 GPU 光柵化功能。
  • 執行緒捲動和動畫:長期致力於將所有捲動和非版面配置的動畫移到合成器執行緒。

請密切留意這些改善項目的後續更新!