TablesNG 會在 Chromium 91 中推出,並修正網路平台多年來的大量錯誤。這些更新將改善瀏覽器相容性,並在 #Compat2021 計畫中改善整體網頁平台的使用方式。其中一些獲得最多星號的問題包括:position:
sticky
在列中、子像素幾何圖形,以及正確的邊框摺疊。
TablesNG 計畫
TablesNG 是由 Chrome 開發人員 Aleks Totic 主持,為期數年,旨在完全重新建構資料表在網路上的算繪方式。表格是網頁開發中特別容易發生摩擦的部分,部分原因是因為表格有其歷史。
表格在 1994 年新增至 HTML,之後是建立複雜頁面版面配置的主要方法,已行之有年。仍然在網路上找到這些資訊,但新型系統通常以顯示表格資料的方式顯示。不過,不同瀏覽器的資料表行為有很大差異,其中許多差異都是因為資料表規格不完整且缺乏詳細資料。在許多 CSS 功能 (交錯書寫模式、position:relative
、box-sizing
、彈性容器等等) 推出之前,瀏覽器就已實作表格。因此,許多這類功能的支援情況並不一致。
新規格「CSS 表格模組等級 3」,是在 Edge 2018 年重新實作資料表後寫入的。TablesNG 是重新架構的成果,其目標不僅是遵循這項新規範,還要修正資料表中許多不一致之處。這項調整帶來的部分明顯變化如下:
- 針對可捲動的長表格,在資料列中啟用固定位置。
- 修正子像素幾何圖形和表格邊框的對齊情形。
- 改善背景和邊框的繪製效果。
position: sticky
列
過去在設定表格樣式時,最常見的要求之一,也是最令人沮喪的情況,就是缺乏對資料列中的 position: sticky
支援。這項功能可讓表格標題在捲動時保留在頁面上,並為長表格提供背景資訊。當您捲動標題離開畫面,只剩下滿滿數字的資料表時,很容易忘記這些數字的含義。
之所以發生這個錯誤,是因為我們一直在設定 HTML 表格後才指定 position: sticky
。在修正之前,含有預定 position: sticky
的標頭會直接轉換成 position: static
,但現在你可以在表格的任何位置使用 position: sticky
:標頭 (<thead>
) 或垂直軸標籤。
改善邊框繪製和背景繪製功能
其中一個最舊的資料表錯誤日期可追溯至 2008 年 9 月。這項問題幾乎是在 Chrome 推出後立即提出,但由於舊版表格架構,因此一直無法修正。這個問題與表格繪製和摺疊邊框有關。
以 z-index
的順序來說,繪製表格的順序為:單元格 > 列 > 區段 > 表格。然後,系統會依 DOM (文件物件模型) 中顯示的順序繪製這些圖片,但資料格本身會以反向 DOM 順序繪製,也就是表格中的第一個資料格是位於最上方。
因此,問題在於邊框屬於表格,而非儲存格,這是因為表格採用舊版繪製方式。表格繪製前景時,系統會繪製摺疊邊框。也就是說,單一表格儲存格不得有多個邊框:
在上例中,您可以看到最左邊的藍色儲存格無法在右下方的橘色儲存格上繪製,因為它無法擁有多個邊框。在重新架構的實作項目中,這個問題已解決,橘色邊框儲存格會正確地繪製在藍色邊框儲存格上方,讓第二個表格間距同時顯示藍色和橘色邊框線。
這個錯誤現已在 Chromium 和 Firefox 中修正。
子像素幾何圖形 (表格對齊)
表格的像素對齊是另一項與 TablesNG 修正的互通性問題。先前,舊版引擎一律會將圖形值四捨五入至像素。這表示當您放大或縮小網頁時,內容會移位,導致對齊問題。TablesNG 會修正這些對齊問題。
重新架構網路
Chrome 團隊不僅推出新功能,讓網頁製作更強大,也努力改善現有 API 和相容性。事實上,TablesNG 只是這個團隊在過去八年內接手的眾多重新架構專案之一。其他專案 (但並非所有專案) 包括:
- LayoutNG:從頭開始重寫所有版面配置演算法,大幅提升可靠性,並提供更可預測的效能。
- BlinkNG:將 Blink 轉譯引擎系統化地清理及重構,分成清楚分隔的管道階段。這可提供更優質的快取、更高的可靠度,以及可重入/延遲轉譯的功能,例如 content-visibility 和 容器查詢。
- 隨處 GPU 光柵化:這是一項長期計畫,我們會盡可能在所有平台上推出 GPU 光柵化功能。
- 執行緒捲動和動畫:長期致力於將所有捲動和非版面配置的動畫移到合成器執行緒。
請密切留意這些改善項目的後續更新!