TablesNG 於 Chromium 91 版中啟動,並修正多年來一直是網路平台的一部分大量錯誤。這些更新將改善瀏覽器相容性,作為 #Compat2021 的努力,以及改善在網路平台上整體使用資料表的效能。最常見的問題包括在資料列中的 position:
sticky
、子像素幾何圖形,以及適當的邊框收合。
TablesNG 所做的努力
TablesNG 已花費多年時間,由 Chrome 開發人員 Aleks Totic 主導,全面重新建構如何在網路上呈現資料表的方式。資料表是網頁開發中造成阻礙的特定區域,部分原因源自於資料表的歷史。
1994 年,資料表新增至 HTML,隨後被做為主要方法,用於建立多年來複雜的頁面版面配置。儘管現代的用法是表格資料,但現今仍是在網路上全部找到。不過,不同瀏覽器的表格行為存在顯著差異,其中許多原因都是因為資料表規格不完整和缺少詳細資訊。資料表也在許多 CSS 功能之前的瀏覽器中實作,包括獨立編寫模式、position:relative
、box-sizing
、Flexbox 容器等。因此,這些功能的支援機制並不一致。
新的規格「CSS 資料表模組層級 3」,是在 Edge 於 2018 年重新導入資料表後寫入。TablesNG 是一項重新設計的架構,不僅是為了遵循這個新規格,也是為了修正資料表上的許多不一致問題。這類工具最常見的變更包括:
- 為捲動的長表格啟用列的固定位置。
- 修正與子像素幾何圖形和表格框線之間的對齊問題。
- 改善背景和框線的繪製功能。
第 position: sticky
列
過去,我們最大的問題之一,就是無法在資料列中支援 position: sticky
樣式,而且最讓人感到困擾。這項功能可讓您在捲動頁面時,將資料表標頭保留在頁面中,並為長型資料表提供背景資訊。當您在檢視中將標頭捲動到上方時,卻查看很多數字的表格,很容易忘記這些數字代表的意義。
之所以一直發生這個錯誤,是因為 HTML 表格問到之後,就妥善指定 position: sticky
。在這項修正之前,包含預期 position: sticky
的標頭只會轉換為 position: static
,但現在您可以在表格的任何位置使用 position: sticky
:標頭 (<thead>
) 或垂直軸標籤。
改善邊框繪製和背景繪製功能
最早的其中一個資料表 bugs 日期可追溯至 2008 年 9 月。檔案在 Chrome 推出後就幾乎一概遭到提交,但因為舊的資料表架構無法修復。這個問題會圍繞表格繪製和收合邊框。
依照 z-index
的順序,資料表的繪製方式為:儲存格 > 列 > 區段 > 資料表。然後,這些物件是按照 DOM 在 DOM 中的顯示順序繪製,但儲存格本身是以反向 DOM 順序排列,而資料表中的第一個儲存格位於最上層。
因此的問題是,邊界是屬於表格,而不是儲存格,它是以舊方式繪製表格。表格繪製前景時,就會繪製收合的框線。 因此,單一表格儲存格無法具有多個邊框:
在上述範例中,您可以看到最左側的藍色儲存格並未在右下角儲存格上方繪製錯誤,因為該儲存格不能有多個框線。重新架構的實作方式已解決這項問題,而橘色框線儲存格正確繪製藍色邊框,第二個表格間距出現藍色和橘色的邊框。
這項錯誤現已在 Chromium 和 Firefox 中修正。
子像素幾何圖形 (表格對齊)
資料表中的像素對齊是另一個互通性問題,並已透過 TablesNG 修正。舊版引擎一律會將圖形值四捨五入至像素。這表示當您放大或縮小頁面時,內容會出現變化,因而造成對齊問題。TablesNG 修正了這些對齊問題。
重新建立網路架構
Chrome 團隊不僅推出新功能,讓網頁編寫功能更加強大,也持續致力於改善現有的 API 及其相容性。事實上,TableNG 只是團隊過去八年來進行的許多重新架構專案之一,而除了所有專案外,也包括:
- LayoutNG:重新編寫所有版面配置演算法,可大幅提升可靠性和可預測的效能。
- BlinkNG:系統性清理,將 Blink 轉譯引擎重構為乾淨分隔的管道階段。這有助於改善快取、提高可靠性,以及重新參與者/延遲轉譯功能,例如內容瀏覽權限和容器查詢。
- GPU 光柵各處:長期致力於在所有平台上推出 GPU 光柵化。
- 執行緒捲動和動畫:將所有捲動和非版面配置的動畫移至合成器執行緒中,花費長期努力的結果。
請密切留意這些改善項目和其他功能的最新消息!