TablesNG wird in Chromium 91 eingeführt und behebt eine ganze Menge Programmfehler, die schon seit Jahren zur Webplattform gehören. Diese Updates verbessern die Browserkompatibilität im Rahmen von #Compat2021 und verbessern die Verwendung von Tabellen auf der Webplattform insgesamt. Zu den am häufigsten auftretenden Problemen gehören position:
sticky in Zeilen, die Subpixel-Geometrie und die korrekte Rahmenminimierung.
The TablesNG-Aufwand
TablesNG ist ein mehrjähriges Projekt unter der Leitung des Chrome-Entwicklers Aleks Totic, um die Darstellung von Tabellen im Web komplett umzugestalten. Tabellen sind in der Webentwicklung ein besonderes Reibungsgebiet, das teilweise auf ihre Geschichte zurückzuführen ist.
1994 wurden dem HTML-Code Tabellen hinzugefügt, die dann viele Jahre lang als primäre Methode zum Erstellen komplexer Seitenlayouts verwendet wurden. Sie sind immer noch im gesamten Web zu finden, obwohl moderne Verwendung meist die Darstellung von tabellarischen Daten umfasst.
Es gibt jedoch große Unterschiede im Tabellenverhalten in den Browsern. Viele davon sind darauf zurückzuführen, dass die Tabellenspezifikation unvollständig ist und keine Details vorliegen.
Tabellen wurden auch vor vielen CSS-Funktionen in Browsern implementiert, z. B. Orthogonale Schreibmodi, position:relative, box-sizing, Flexbox-Container und mehr. Daher wurden viele dieser Funktionen nicht einheitlich unterstützt.
Die neue Spezifikation, CSS-Tabellenmodulebene 3, wurde nach der erneuten Implementierung von Tabellen von Edge 2018 geschrieben. TablesNG ist eine Umstrukturierung, die nicht nur dieser neuen Spezifikation folgen soll, sondern auch viele Inkonsistenzen in Tabellen dabei beseitigen soll. Dies sind einige der auffälligsten Änderungen:
- Fixierte Positionierung in Zeilen für lange Tabellen, die scrollen, aktivieren.
- Ausrichtung an Subpixel-Geometrie und Tabellenrahmen wurde korrigiert.
- Verbessertes Painting für Hintergründe und Rahmen.
position: sticky in Zeilen
Eine der größten Herausforderungen in der Vergangenheit beim Gestalten von Tabellen war die fehlende Unterstützung für position: sticky in Zeilen. Mit dieser Funktion kann eine Tabellenüberschrift auf der Seite verbleiben, wenn Sie scrollen, und langen Datentabellen Kontext liefern. Wenn Sie durch die Kopfzeile scrollen und eine Tabelle voller Zahlen ansehen, vergisst man leicht, was diese Zahlen bedeuten.
position: sticky auf <thead> angewendet wurde.Der Grund für diesen Fehler besteht schon so lange, dass position: sticky lange nach der Veröffentlichung von HTML-Tabellen angegeben wurde. Vor dieser Korrektur wurden Header mit einem vorgesehenen position: sticky einfach in position: static konvertiert. Jetzt können Sie position: sticky überall in den Tabellen verwenden: für Header (<thead>) oder Labels der vertikalen Achse.
Verbesserte Rahmen- und Hintergrundmalerei
Einer der ältesten bugs geht auf September 2008 zurück. Sie wurde kurz nach der Veröffentlichung von Chrome eingereicht und konnte aufgrund der alten Tabellenarchitektur nicht korrigiert werden. Das Problem betrifft die Tabellenmalerei und minimierte Rahmen.
Tabellen werden in der Reihenfolge z-index wie folgt dargestellt: Zellen > Zeilen > Abschnitte > Tabellen. Sie werden dann in der Reihenfolge dargestellt, in der sie im DOM (Document Object Model) angezeigt werden. Die Zellen selbst befinden sich jedoch in umgekehrter DOM-Reihenfolge, wobei die erste Zelle in der Tabelle die oberste ist.
Das Problem hier ist also, dass die Rahmen in der alten Darstellungsform der Tabellen zur Tabelle gehören und nicht zur Zelle. Minimierte Rahmen werden dargestellt, wenn der Vordergrund der Tabelle angezeigt wird. Das bedeutet, dass eine einzelne Tabellenzelle nicht mehrere Rahmen haben kann:
Im Beispiel oben sehen Sie, dass die blaue Zelle ganz links auf der orangefarbenen Zelle unten rechts fälschlicherweise übermalt wurde, da sie nicht mehrere Rahmen haben darf. In der neu gestalteten Implementierung wurde dieses Problem gelöst und die Zelle mit dem orangefarbenen Rahmen wird korrekt über die blaue Zelle gezeichnet, sodass die zweite Tabellenlücke sowohl blaue als auch orange Rahmenlinien hat.
Dieser Fehler wurde in Chromium und Firefox jetzt behoben.
Subpixel-Geometrie (Tabellenausrichtung)
Die Pixelausrichtung in Tabellen ist ein weiteres Interoperabilitätsproblem, das mit TablesNG behoben wurde. Bisher hat die ältere Engine Grafikwerte immer auf Pixel gerundet. Dies bedeutete, dass sich beim Heran- und Herauszoomen der Seite die Elemente verschieben und es zu Ausrichtungsproblemen kommt. TablesNG behebt diese Ausrichtungsprobleme.
Das Web neu gestalten
Das Chrome-Team hat nicht nur neue Funktionen eingeführt, um das Authoring im Web zuverlässiger zu machen, sondern es arbeitet auch intensiv an der Verbesserung vorhandener APIs und deren Kompatibilität. Tatsächlich ist TablesNG nur eines von vielen Umstrukturierungsprojekten, die dieses Team in den letzten acht Jahren übernommen hat. Andere, wenn auch nicht alle Projekte, sind folgende:
- LayoutNG: Eine grundlegend überarbeitete Version aller Layoutalgorithmen sorgt für eine stark verbesserte Zuverlässigkeit und vorhersagbare Leistung.
- BlinkNG: eine systematische Bereinigung und Refaktorierung der Blink-Rendering-Engine in sauber getrennte Pipelinephasen. Dies ermöglicht ein besseres Caching, eine höhere Zuverlässigkeit und Funktionen für wiederholte Wiedergabe/verzögertes Rendering, z. B. Sichtbarkeit von Inhalten und Containerabfragen.
- GPU-Raster überall: Dies ist das langfristige Ziel, die GPU-Rasterung nach Möglichkeit auf allen Plattformen einzuführen.
- Threadbasiertes Scrollen und Animationen: ein langfristiges Vorgehen, um alle scrollbaren und nicht Layout-induzierenden Animationen in den Compositor-Thread zu verschieben.
Wir halten euch auf dem Laufenden!