TablesNG は Chromium 91 でリリースされ、長年にわたってウェブ プラットフォームの一部となっていた多数のバグを修正します。これらの更新により、#Compat2021 の取り組みの一環としてブラウザの互換性が向上し、ウェブ プラットフォームでのテーブルの使用が全体的に改善されます。スターを付けた問題には、行内の position:
sticky、サブピクセル ジオメトリ、適切な境界折りたたみなどがあります。
TablesNG の取り組み
TablesNG は、Chrome デベロッパーの Aleks Totic が主導する、ウェブ上での表のレンダリング方法を完全に再設計する数年にわたる取り組みです。テーブルは、ウェブ開発において特に摩擦が生じる領域です。その理由の 1 つは、その歴史にあります。
テーブルは 1994 年に HTML に追加され、長年にわたって複雑なページ レイアウトを作成するための主な方法として使用されてきました。表形式のデータの表示に使用されることが一般的ですが、ウェブのいたるところに存在します。ただし、ブラウザによってテーブルの動作には大きな違いがあります。その多くは、テーブルの仕様が不完全で詳細が欠けていることが原因です。テーブルは、多くの CSS 機能（直交書き込みモード、position:relative、box-sizing、フレックスボックス コンテナなど）よりも前にブラウザに実装されていました。そのため、これらの機能の多くは、一貫したサポートが提供されていませんでした。
新しい仕様である CSS テーブル モジュール レベル 3 は、Edge が 2018 年にテーブルを再実装した後に作成されました。TablesNG は、この新しい仕様に従うだけでなく、途中でテーブルの不整合の多くを修正することを目的とする再設計の取り組みです。この変更によって生じた最も顕著な変更は次のとおりです。
- スクロールする長い表で、行内で固定配置を有効にします。
- サブピクセル ジオメトリと表の境界線による配置を修正。
- 背景と枠線のペイントを改善しました。
position: sticky 行
これまで、テーブルのスタイル設定に関する最大の要望と最も不満だったのは、行での position: sticky のサポートがないことでした。この機能を使用すると、スクロールしてもページにテーブル ヘッダーが表示され、長いデータテーブルにコンテキストを提供できます。ヘッダーをスクロールして表示しなくなり、数字が並ぶ表だけが表示されると、その数字の意味を忘れやすくなります。
position: sticky が <thead> に適用されているにもかかわらず、テーブル ヘッダーが固定位置に保持されません。このバグが長い間放置されていたのは、position: sticky が HTML テーブルのリリース後かなり後に仕様化されたためです。この修正前は、意図された position: sticky を含むヘッダーは position: static に変換されていましたが、現在は、テーブル内のヘッダー（<thead>）や縦軸ラベルの任意の場所で position: sticky を使用できます。
枠線のペイントと背景のペイントを改善
最も古いテーブル バグの 1 つは、2008 年 9 月まで遡ります。この問題は Chrome のリリース直後に報告されましたが、古いテーブル アーキテクチャが原因で修正することができませんでした。この問題は、テーブルの描画と枠線の折りたたみに関するものです。
テーブルのペイント順序は、z-index の順に、セル > 行 > セクション > テーブルです。セルは DOM（ドキュメント オブジェクト モデル）に表示される順序でペイントされますが、セル自体は DOM の逆の順序で、表の最初のセルが一番上になります。
問題は、境界線がセルではなくテーブルに属していることです。これは、テーブルの描画方法が古いためです。テーブルで前景がペイントされると、折りたたまれた枠線はペイントされます。つまり、1 つのテーブルセルに複数の境界線を設定することはできません。
上記の例では、左端の青いセルがオレンジ色の右下のセルの上に誤って描画されていました。これは、複数の枠線を含めることができないためです。再設計された実装では、この問題は解決され、オレンジ色の境界セルが青色のセルの上部に正しく塗りつぶされ、2 番目の表のギャップに青色とオレンジ色の境界線の両方を配置できます。
このバグは Chromium と Firefox で修正されています。
サブピクセル ジオメトリ（表の配置）
テーブル内のピクセル アライメントも、TablesNG で修正された相互運用性の問題です。以前のエンジンでは、グラフィック値は常にピクセルに丸められました。そのため、ページをズームインまたはズームアウトすると、要素がずれて、配置の問題が発生していました。TablesNG では、これらの配置の問題が修正されています。
ウェブの再設計
Chrome チームは、ウェブ作成の堅牢性を高めるための新機能を導入するだけでなく、既存の API とその互換性を改善するためにも積極的に取り組んでいます。実際、TablesNG は、このチームが過去 8 年間に取り組んできた多くの再アーキテクチャ プロジェクトの 1 つにすぎません。プロジェクトのすべてではありませんが、次のものがあります。
- LayoutNG: すべてのレイアウト アルゴリズムをゼロから書き直し、信頼性を大幅に向上させ、パフォーマンスの予測可能性を高めました。
- BlinkNG: Blink レンダリング エンジンを体系的にクリーンアップし、明確に分離されたパイプライン フェーズにリファクタリングします。これにより、キャッシュの改善、信頼性の向上、content-visibility やコンテナ クエリなどの再入可能 / 遅延レンダリング機能が実現します。
- GPU ラスター処理の拡大: 可能な限り、すべてのプラットフォームに GPU ラスター処理を展開するための長期的な取り組み。
- スレッド スクロールとアニメーション: スクロール アニメーションとレイアウトを誘導しないアニメーションをすべてコンポジタ スレッドに移動するための長期的な取り組み。
今後、これらの改善点に関する最新情報をお知らせいたします。