Aplikacja TablesNG została wprowadzona w Chromium w wersji 91 i naprawiała mnóstwo błędów, które są używane na platformie internetowej od lat. Te aktualizacje poprawią zgodność przeglądarek w ramach działań #Compat2021 i ułatwią korzystanie z tabel na platformie internetowej. Niektóre z najważniejszych problemów to position:
sticky w wierszach, geometria subpiksela i prawidłowe zwijanie obramowań.
Działania TablesNG
TablesNG to wieloletnie przedsięwzięcie, którego kierownikiem jest deweloper Chrome, Aleks Totic, aby całkowicie zmienić architekturę renderowania tabel w internecie. Tabele stanowią szczególny obszar trudności przy tworzeniu stron internetowych, częściowo z powodu ich historii.
W 1994 r. dodano do kodu HTML tabele, a potem przez wiele lat służyły one za podstawową metodę tworzenia złożonych układów stron. Nadal są dostępne w całej sieci,
choć nowoczesne podejście dotyczy wyświetlania danych tabelarycznych.
Występują jednak duże różnice w zachowaniu tabel w różnych przeglądarkach. Wiele z nich wynika z tego, że specyfikacja tabel jest niekompletna i brakuje szczegółowych informacji.
Tabele były też implementowane w przeglądarkach przed wieloma funkcjami CSS: ortogonalnymi trybami pisma, position:relative, box-sizing, kontenerami Flexbox i innymi. Z tego powodu obsługa wielu z tych funkcji była niespójna.
Nowa specyfikacja – CSS Table Module Level 3 – została opublikowana po ponownym zaimplementowaniu tabel przez Edge w 2018 roku. TablesNG to nowa architektura, która ma na celu nie tylko zapewnienie zgodności z nową specyfikacją, ale także usunięcie wielu niespójności w tabelach. Oto niektóre z najbardziej widocznych zmian:
- Włączanie przyklejonego pozycjonowania w wierszach w przypadku długich tabel, które się przewijają.
- Poprawianie wyrównania geometrii podrzędnej piksela i obramowania tabeli.
- Ulepszone malowanie tła i obramowania.
position: sticky w wierszach
Jedną z najbardziej irytujących kwestii związanych ze stylizacją tabel w przeszłości był brak obsługi funkcji position: sticky w wierszach. Ta funkcja sprawi, że nagłówek tabeli pozostanie na stronie podczas przewijania i nada kontekst dla długich tabel danych. Gdy przewiniesz nagłówek i zobaczysz tabelę pełną liczb, łatwo zapomnieć, co oznaczają te liczby.
<thead> jest stosowany element position: sticky.Problem ten występował od tak dawna, ponieważ atrybut position: sticky został określony dużo czasu po udostępnieniu tabel HTML. Przed tą poprawką nagłówki z zamierzonymi position: sticky zostały tylko przekonwertowane na position: static. Teraz możesz używać atrybutu position: sticky w dowolnym miejscu w tabelach: w nagłówkach (<thead>) lub etykietach osi pionowej.
Ulepszone malowanie obramowania i malowanie tła
Jeden z najstarszych bugs w tabelach pochodzi z września 2008 roku. Zgłoszono go niemal natychmiast po opublikowaniu Chrome i nigdy nie udało się go naprawić ze względu na starą architekturę tabeli. Problem dotyczy malowania tabel i zwiniętych obramowań.
Sposób malowania tabel (w kolejności z-index) wygląda tak: komórki > wiersze > sekcje > tabele. Następnie są one malowane w kolejności, w jakiej występują w modelu obiektu dokumentu (DOM), choć same komórki są w odwrotnej kolejności w modelu DOM, gdzie pierwsza komórka w tabeli znajduje się najwyżej.
Problem polega na tym, że ramki należą do tabeli, a nie do komórki, tak jak w przypadku starych tabel. Zwinięte obramowanie jest malowane, gdy pierwszy plan jest malowany przez tabelę. Oznacza to, że jedna komórka tabeli nie może mieć wielu obramowań:
W powyższym przykładzie widać, że niebieska komórka, która skierowała do lewej strony, nieprawidłowo malowała się nad pomarańczową komórką w prawym dolnym rogu, ponieważ nie mogła mieć wielu obramowania. W nowej architekturze jest to rozwiązane, ponieważ pomarańczowa komórka obramowania prawidłowo maluje się na niebieskiej komórce, dzięki czemu druga luka w tabeli ma zarówno niebieską, jak i pomarańczową linię obramowania.
Ten błąd został już usunięty w Chromium i Firefoksie.
Geometria piksela podrzędnego (wyrównanie tabeli)
Kolejnym problemem dotyczącym interoperacyjności, który został rozwiązany z wykorzystaniem TablesNG, jest wyrównanie pikseli w tabelach. Wcześniej poprzedni silnik zawsze zaokrąglał wartości grafiki do piksela. Oznaczało to, że powiększanie i pomniejszanie strony powodowało przesuwanie się, powodując problemy z wyrównaniem. TablesNG rozwiązuje te problemy z wyrównaniem.
Zmiana architektury sieci
Zespół Chrome nie tylko wprowadził nowe funkcje zwiększające możliwości tworzenia stron internetowych, ale także ciężko pracował nad ulepszeniem istniejących interfejsów API i ich zgodności. TablesNG to tylko jeden z wielu projektów związanych ze zmianą architektury, którymi ten zespół zajmował się w ciągu ostatnich 8 lat. Inne projekty, choć nie wszystkie, to:
- UkładNG: gruntowne zmiany wszystkich algorytmów układu w celu zwiększenia niezawodności i przewidywalności działania.
- BlinkNG: systematyczne czyszczenie i refaktoryzowanie silnika renderowania Blink na wyraźnie oddzielone fazy potoku. Pozwala to na lepsze buforowanie, większą niezawodność oraz ponowne korzystanie z funkcji renderowania lub renderowania z opóźnieniem, np. widoczność treści i zapytania o kontenery.
- GPU Raster Everywhere: długoterminowe dążenie do wdrożenia rasteryzacji GPU na wszystkich platformach, gdy tylko jest to możliwe.
- Przewijanie w wątkach i animacje: długofalowy wysiłek związany z przeniesieniem wszystkich przewijanych i niezmieniających układu animacji do wątku kompozytora.
Wkrótce udostępnimy więcej informacji o tych i innych ulepszeniach.