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 estrelas incluem position:
sticky nas linhas,
geometria de subpixels
e o
recolhimento de bordas 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 devido ao seu histórico.
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 para 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 surgiram disso são:
- Ativação da posição fixa em linhas para tabelas longas que rolam.
- Correção do alinhamento com geometria de subpixels e bordas da 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 permitiria
que um cabeçalho de tabela permanecesse na página enquanto você rola a tela e fornecesse 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 ter sido 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 apenas 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.
Melhorias na pintura de bordas e de plano de fundo
Um dos bugs de tabela mais antigos remonta a setembro de 2008. Ele foi arquivado quase assim que o Chrome foi lançado e não pôde ser corrigido devido à arquitetura de tabela antiga. 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. Em seguida, elas são pintadas na ordem em que aparecem no Document Object Model (DOM), embora as próprias células estejam na ordem inversa do DOM, em que a primeira célula na tabela é a primeira.
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, é possível observar que a célula azul mais à esquerda foi pintada incorretamente na parte superior da célula laranja inferior, porque não poderia ter várias bordas. Na implementação com nova arquitetura, isso é resolvido, e a célula de borda laranja é pintada corretamente por cima da azul, permitindo que a segunda lacuna da tabela tenha linhas de borda azuis 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.
Como rearquitetar a Web
Além de introduzir novos recursos para tornar a criação na Web mais robusta, a equipe do Chrome também tem trabalhado muito para melhorar as APIs atuais 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 regravação completa de todos os algoritmos de layout para aumentar a confiabilidade e a performance previsível.
- BlinkNG: é uma limpeza e refatoração sistemática do mecanismo de renderização Blink em fases de pipeline separadas de maneira limpa. 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.