O TablesNG é lançado no Chromium 91 e corrige vários bugs
que fazem parte da plataforma da Web há anos. Essas atualizações vão melhorar a
compatibilidade do navegador como parte do esforço
#Compat2021 e melhorar o uso de tabelas na
plataforma da Web em geral. Alguns dos problemas com mais estrelas incluem position:
sticky em linhas,
geometria de subpixel
e
fechamento de borda adequado.
O esforço do TablesNG
O TablesNG é um esforço de vários anos, liderado pelo desenvolvedor do Chrome Aleks Totic, para refazer completamente a forma como as tabelas são renderizadas na Web. As tabelas são uma área específica de atrito no desenvolvimento da Web, em parte por causa do histórico delas.
As tabelas foram adicionadas ao HTML em 1994 e usadas como o método principal
para criar layouts de página complexos por muitos anos. Eles ainda são encontrados em toda a Web,
embora o uso moderno seja geralmente para mostrar dados tabulares.
No entanto, há grandes diferenças no comportamento das tabelas entre os navegadores,
muitas delas devido à especificação incompleta e à falta de detalhes.
As tabelas também foram implementadas nos navegadores antes de muitos recursos de CSS:
modos de gravação ortogonais, position:relative, box-sizing, contêineres flexbox
e muito mais. Por isso, o suporte a muitos desses recursos era inconsistente.
A nova especificação, CSS Table Module Level 3, foi escrita depois que o Edge reimplementou as tabelas em 2018. O TablesNG é um esforço de reestruturação que visa não apenas seguir essa nova especificação, mas também corrigir muitas das inconsistências nas tabelas. Algumas das mudanças mais visíveis que resultaram disso são:
- Ativação da posição fixa em linhas para tabelas longas que rolam.
- Correção do alinhamento com geometria de subpixel e bordas de tabela.
- Melhoria na pintura de planos de fundo e bordas.
position: sticky em linhas
Uma das maiores solicitações e coisas mais frustrantes sobre o estilo de tabelas no
passado era a falta de suporte para position: sticky em linhas. Esse recurso permite
que um cabeçalho de tabela permaneça na página enquanto você rola a página e fornece contexto para tabelas de dados longas. Quando você rola o cabeçalho para fora da tela e está olhando para
uma tabela cheia de números, é fácil esquecer o que esses números significam.
position: sticky ser aplicado ao <thead>.O motivo pelo qual esse bug ficou por tanto tempo é que o position: sticky
foi especificado bem depois que as tabelas HTML foram lançadas. Antes dessa correção, os cabeçalhos com um
position: sticky pretendido eram convertidos em position: static, mas
agora é possível usar position: sticky em qualquer lugar nas tabelas: em cabeçalhos (<thead>) ou
rótulos de eixo vertical.
Melhoria na pintura de bordas e de segundo plano
Um dos bugs de tabela mais antigos data de setembro de 2008. Ele foi registrado quase assim que o Chrome foi lançado e nunca foi corrigido devido à antiga arquitetura de tabelas. O problema envolve pintura de tabelas e bordas reduzidas.
A maneira como as tabelas são pintadas, em ordem de z-index, é: células > linhas >
seções > tabelas. Elas são pintadas na ordem em que aparecem no DOM
(Modelo de objeto de documento), embora as células estejam na ordem inversa do DOM,
em que a primeira célula na tabela é a de cima.
O problema aqui é que as bordas pertencem à tabela, não à célula, da maneira antiga em que as tabelas eram pintadas. As bordas reduzidas são pintadas quando a tabela pinta o primeiro plano. Isso significa que uma única célula de tabela não pode ter várias bordas:
No exemplo acima, a célula azul mais à esquerda foi pintada incorretamente acima da célula laranja no canto inferior direito, porque não podia ter várias bordas. Na implementação reprojetada, isso foi resolvido, e a célula de borda laranja é pintada corretamente sobre a azul, permitindo que a segunda tabela tenha linhas de borda azul e laranja.
Esse bug foi corrigido no Chromium e no Firefox.
Geometria de subpixel (alinhamento da tabela)
O alinhamento de pixels nas tabelas é outro problema de interoperabilidade corrigido com o TablesNG. Anteriormente, o mecanismo mais antigo sempre arredondava os valores gráficos para o pixel. Isso significa que, ao aumentar e diminuir o zoom da página, as coisas se movem, causando problemas de alinhamento. O TablesNG corrige esses problemas de alinhamento.
Reestruturação da Web
A equipe do Chrome não apenas introduziu novos recursos para tornar a criação de conteúdo da Web mais robusta, mas também trabalhou muito para melhorar as APIs existentes e a compatibilidade delas. Na verdade, o TablesNG é apenas um dos muitos projetos de reengenharia que a equipe assumiu nos últimos oito anos. Outros projetos, mas não todos, incluem:
- LayoutNG: uma reescrita completa de todos os algoritmos de layout, para melhorar a confiabilidade e ter um desempenho mais previsível.
- BlinkNG: uma limpeza sistemática e refatoração do mecanismo de renderização do Blink em fases de pipeline claramente separadas. Isso permite um melhor armazenamento em cache, maior confiabilidade e recursos de renderização atrasada / reentrantes, como content-visibility e container queries.
- Raster de GPU em todos os lugares: um esforço de longo prazo para lançar a rasterização de GPU em todas as plataformas, sempre que possível.
- Rolagem e animações em linha de execução: um esforço de longo prazo para mover toda a rolagem e animações que não induzem o layout para a linha de execução do compositor.
Fique de olho nas próximas atualizações sobre essas melhorias e muito mais.