HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG

Post on:2021年7月8日

はじめに

TablesNGはChromium91でローンチされ、長年にわたってWebプラットフォームの一部となっていた大量のバグを修正しました。このアップデートは#Compat2021の取り組みの一環として、ブラウザの互換性を向上させ、Webプラットフォームでのテーブルの使用を全体的に改善するものです。

中でも特に注目されているのは以下の3つです。

TablesNGの取り組み

TablesNGは、ChromeのデベロッパーであるAleks Toticが主導する、Web上でのテーブルのレンダリング方法を完全に再構築するための数年にわたる取り組みです。テーブルはその歴史的経緯もあって、Web開発において特に摩擦の大きい分野です。

テーブルの構造

テーブルは1994年にHTMLに追加され、その後長年にわたって複雑なページレイアウトを作成するための主要なテクニックとして使用されてきました。テーブルは今でもWeb上のいたるところで見られますが、最近では表形式のデータを表示するために使用されることが多いです。

しかし、ブラウザによってテーブルの動作には大きな違いがあります。その多くはテーブルの仕様が不完全でディテールが不足しているのが原因です。また、テーブルはライティングモード、position: relative;、box-sizing、Flexboxコンテナなど、CSSの多くの機能よりも前にブラウザに実装されていました。そのため、テーブルはこれらの機能のサポートには一貫性がありませんでした。

スペースジャムのWebサイトを構成する革新的なテーブルレイアウト（via Shannon Draper）

新しい仕様であるCSS Table Module Level 3は、2018年にEdgeがテーブルを再実装した後に作成されたものです。TablesNGはこの新しい仕様に従うだけでなく、テーブルの多くの不整合を修正することを目的とした再アーキテクチャの取り組みです。TablesNGから生じた目に見える変化のいくつかを解説します。

行にposition: sticky;が使用できる。
サブピクセルジオメトリとテーブルのボーダーとの配置を修正。
バックグラウンドとボーダーの描画を改善。

1. テーブルの行にposition: sticky;

これまでのテーブルのスタイルで最も問題となっていたのは、行でposition: sticky;がサポートされていないことでした。行に適用できれば、テーブルのヘッダをスクロールしてもページに残すことができ、長いデータのテーブルにもコンテキストを与えることができます。

データや数字でいっぱいのテーブルをスクロールした時にヘッダが見えなくなると、それらのデータや数字が何を意味しているか分からなくなります。

これまでのテーブルはスクロールすると、ヘッダが見えなくなってしまう

これまでは、<thead>にposition: sticky;を適用しようとしても、テーブルのヘッダはスティッキーポジションに残りませんでした。

このバグが長い間残っていたのは、HTMLテーブルが登場した後にposition: sticky;が登場したからです。修正前はposition: sticky;が指定されたヘッダはposition: static;に変換されていましたが、今回の修正によりテーブル内の任意の場所（<thead>や縦軸のラベル）でposition: sticky;を使用できるようになりました。

Chromium91+ではヘッダをスティッキーポジションにできます

実際のデモは、下記でご覧ください。

See the Pen
Demo Table by Una Kravets (@una)
on CodePen.

注意:
テーブルにposition: sticky;を使用する場合は、そのテーブルにボーダーがないことを確認してください。ボーダーはヘッダではなく、テーブルに属するものなので、ボーダーの描画は現在、クロスブラウザの互換性の問題となっています。

2. バックグラウンドとボーダーの描画

テーブルの最も古いバグの一つは、2008年9月にさかのぼります。Chromeがリリースされるとすぐに報告されましたが、古いテーブルアーキテクチャのために修正されることはありませんでした。そのバグとは、テーブルの描画と折りたたまれたボーダーに関するものです。

テーブルの描画はz-indexの順（セル、行、セクション、テーブル）に行われます。テーブルはDOM（Document Object Model）で表示される順番で描画されますが、セル自体はDOMの逆順になっており、テーブルの最初のセルが最上位になります。

テーブルの描画

つまり、ここでの問題はテーブルを描画する時の古い方法では、ボーダーはセルではなくテーブルに属するということです。テーブルが前景を描画すると、折りたたまれたボーダーが描画されます。これは、単一のセルに複数のボーダーを含めることができないことを意味します。

左: TablesNG以前の誤ったテーブルのレンダリング
右: TablesNGによるボーダーの正しい表示。

上記の例では、左端の青いセルが複数のボーダーを持つことができなかったため、右下のオレンジのセルの上に誤って描画されていたことが分かります。再設計された実装では、この問題が解決され、オレンジのボーダーセルが青色のボーダーセルの上に正しく描画され、2つ目のテーブルの隙間にブルーとオレンジの両方のボーダーを持つことができます。

このバグは、ChromiumとFirefoxで修正されました。

3. サブピクセルジオメトリ（テーブルの配置）

テーブルにおけるピクセルアライメント（配置）は、TablesNGで修正されたもう一つの相互運用性の問題です。以前のエンジンでは、グラフィックス値は常にピクセル単位で丸められていました。そのため、ページを拡大・縮小するとずれが生じ、アライメントの問題が発生していました。TablesNGでは、このアライメントの問題が修正されました。

注意:
テーブルのズームとボーダーの再描画には、既知のバグがあります。これをテストしている場合は、この問題に遭遇する可能性があります。

Webの再設計

Chromeチームは、Webオーサリングをより強固にするための新機能を導入するだけでなく、既存のAPIとその互換性の向上にも取り組んでいます。実際、TablesNGはこのチームが過去8年間に行ってきた数多くの再アーキテクチャープロジェクトの一つに過ぎません。すべてのプロジェクトではありませんが、他にも以下のようなものがあります。

LayoutNG: すべてのレイアウトアルゴリズムを全面的に書き直し、信頼性と予測可能なパフォーマンスを大幅に向上させます。
BlinkNG: Blinkレンダリングエンジンの体系的なクリーンアップとリファクタリングにより、明確に分離されたパイプラインフェーズになります。これにより、キャッシュの改善、信頼性の向上、content-visibilityやコンテナクエリなどの再エントラント／ディレイ・レンダリング機能が可能になります。
参考: CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
参考: CSS コンテナクエリの基礎知識と便利な使い方を解説
GPU Raster Everywhere: 可能な限りすべてのプラットフォームでGPUによるラスタライズを実現するための長期的な取り組みです。
Threaded scrolling and animations: すべてのスクロールとレイアウトを伴わないアニメーションをコンポジタースレッドに移行するための長期的な取り組みです。

これらの改善点については、今後の続報をお待ちください！