TablesNG jest dostępne w wersji Chromium 91 i naprawia mnóstwo błędów, które od lat są częścią platformy internetowej. Te aktualizacje poprawią zgodność przeglądarek w ramach inicjatywy #Compat2021 oraz ułatwią korzystanie z tabel na platformie internetowej. Niektóre z najczęstszych problemów to liczba wierszy position:
sticky, geometria subpixel i prawidłowe zwijanie obramowania.
TabelaNG
TablesNG to wieloletni projekt, którego celem jest całkowite przeprojektowanie sposobu renderowania tabel w internecie. Projekt jest prowadzony przez programistę Chrome Aleksa Totica. Tabele to szczególny obszar, w którym występują problemy ze względu na ich historię.
Tabele zostały dodane do HTML w 1994 r., a potem przez wiele lat były używane jako główna metoda do tworzenia złożonych układów stron. Nadal można je znaleźć w internecie, chociaż obecnie służą głównie do wyświetlania danych tabelarycznych.
Jednak zachowanie tabel w różnych przeglądarkach różni się znacznie, głównie z powodu niepełnej i nieprecyzyjnej specyfikacji tabel.
Tabele były też wdrażane w przeglądarkach przed wprowadzeniem wielu funkcji CSS:
ortogonalnych trybów pisania, position:relative, box-sizing, kontenerów flexbox i innych. Dlatego obsługa wielu z tych funkcji była niespójna.
Nowa specyfikacja, CSS Table Module Level 3, została napisana po tym, jak w 2018 r. w Edge ponownie zaimplementowano tabele. TablesNG to nowa architektura, która ma nie tylko stosować się do nowej specyfikacji, ale też eliminować wiele niespójności w tabelach. Oto niektóre z najbardziej widocznych zmian:
- Włącz przyklejone pozycjonowanie w wierszach w przypadku długich tabel, które przewijają się.
- Korygowanie wyrównania z geometrią subpikselową i obramowaniem tabeli.
- Ulepszone malowanie tła i obramowania.
position: sticky wierszy
Jednym z najczęstszych próśb i najbardziej frustrujących kwestii związanych ze stylami tabel w ubiegłych wersjach było brak obsługi position: sticky w wierszach. Ta funkcja umożliwiłaby pozostawanie nagłówka tabeli na stronie podczas przewijania oraz zapewnienie kontekstu długim tabelom danych. Gdy przewiniesz nagłówek z niego i będziesz patrzeć na tabelę pełną liczb, łatwo zapomnieć, co oznaczają.
position: sticky do elementu <thead>.Ten błąd występował tak długo, ponieważ position: sticky
został określony dopiero po wprowadzeniu tabel HTML. Przed tą poprawką nagłówki z zamierzonymi wartościami position: sticky były po prostu konwertowane na position: static, ale teraz funkcji position: sticky można używać w dowolnym miejscu tabel: w nagłówkach (<thead>) lub w etykietach osi pionowej.
Ulepszone malowanie obramowania i tła
Jednym z najstarszych błędów w tabelach jest we wrześniu 2008 roku. Został zgłoszony prawie zaraz po wydaniu Chrome i nigdy nie udało się go naprawić z powodu starej architektury tabeli. Problem dotyczy malowania stołu i zwinięcia obramowania.
Sposób wyświetlania tabel w kolejności z-index: komórki > wiersze > sekcje > tabele. Następnie są one wyświetlane w kolejności, w jakiej występują w DOM (Document Object Model), ale same komórki są wyświetlane w odwrotnej kolejności DOM, gdzie pierwsza komórka w tabeli jest najwyżej.
Problem polega na tym, że w starym sposobie wyświetlania tabeli obramowania należą do tabeli, a nie do komórki. Zwinięte obramowania są wypełniane, gdy tabela wypełnia pierwszy plan. Oznacza to, że pojedyncza komórka tabeli nie może mieć wielu obramowań:
W przykładzie powyżej widać, że najbardziej lewy niebieski element nieprawidłowo nakłada się na pomarańczowy element w prawym dolnym rogu, ponieważ nie może mieć wielu obrzeży. W zmodyfikowanej architekturze problem został rozwiązany, a komórka z pomarańczową ramką jest prawidłowo nakładana na komórkę z niebieską ramką, co pozwala drugiej przerwie w tabeli mieć zarówno niebieskie, jak i pomarańczowe linie ramki.
Ten błąd został już naprawiony w Chromium i Firefoksie.
Geometria poniżej piksela (wyrównanie tabeli)
Dopasowanie pikseli w tabelach to kolejny problem z interoperacyjnością, który został rozwiązany w TablesNG. Wcześniej starszy mechanizm zawsze zaokrąglał wartości graficzne do piksela. Oznaczało to, że podczas powiększania i pomniejszania strony elementy się przesuwały, co powodowało problemy z wyrównaniem. TablesNG rozwiązuje te problemy z wyrównaniem.
Zmiana architektury sieci
Zespół Chrome nie tylko wprowadził nowe funkcje, aby zwiększyć możliwości tworzenia stron internetowych, ale także ciężko pracował nad ulepszeniem istniejących interfejsów API oraz ich zgodności. TablesNG to tylko jeden z wielu projektów zmian architektury, podjętych przez ten zespół w ciągu ostatnich 8 lat. Inne, choć nie wszystkie, projekty to:
- LayoutNG: od podstaw przebudowane wszystkie algorytmy układu, aby znacznie zwiększyć niezawodność i przewidywalność działania.
- BlinkNG: systematyczne oczyszczanie i refaktoryzacja silnika renderowania Blink w jasno oddzielone etapy potoku. Umożliwia to lepsze buforowanie, większą niezawodność i możliwość ponownego wywołania funkcji opóźnionego renderowania, takich jak content-visibility i zapytania dotyczące kontenera.
- GPU Raster Everywhere: długoterminowe wysiłki mające na celu wdrożenie tworzenia obrazów przez GPU na wszystkich platformach, o ile to możliwe.
- Przewijanie i animacje w wątku: długoterminowe działania mające na celu przeniesienie wszystkich animacji dotyczących przewijania i animacji niewywołujących zmian w układzie do wątku kompozytora.
Wkrótce podamy więcej informacji o tych i innych ulepszeniach.