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 のサポートがないことでした。この機能により、スクロールしてもテーブルのヘッダーがページに残り、長いデータテーブルにコンテキストが提供されます。ヘッダーをスクロールして表示しなくなり、数字が並ぶ表だけが表示されると、その数字の意味を忘れやすくなります。
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 ラスター処理を展開するための長期的な取り組み。
- スレッド化されたスクロールとアニメーション: すべてのスクロールとレイアウトを誘発しないアニメーションをコンポジタ スレッドに移動するための長期的な取り組み。
今後、これらの改善点に関する最新情報をお知らせいたします。