O TablesNG foi 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 da iniciativa
#Compat2021 e aprimorar o uso de tabelas na
plataforma da Web em geral. Alguns dos problemas com mais estrelas incluem position:
sticky nas linhas, geometria de subpixel e recolhimento de borda adequado.
O esforço de TablesNG
O TablesNG é uma iniciativa de vários anos, liderada pelo desenvolvedor do Chrome Aleks Totic, para reestruturar completamente a maneira 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 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 geralmente mostre dados tabulares.
No entanto, há grandes diferenças no comportamento de tabelas nos navegadores. Muitas delas surgiram devido à especificação das tabelas estar incompleta e faltar detalhes.
As tabelas também foram implementadas em navegadores antes de muitos recursos CSS: modos de escrita ortogonais, position:relative, box-sizing, contêineres flexbox e muito mais. Portanto, o suporte para muitos desses recursos era inconsistente.
A nova especificação, o módulo de tabela CSS de nível 3, foi criada após a reimplementação das tabelas pelo Edge em 2018. O TablesNG é um esforço de rearquitetura que visa não apenas seguir essa nova especificação, mas também corrigir muitas inconsistências nas tabelas ao longo do caminho. Algumas das alterações mais visíveis que surgiram com isso são:
- Ativar o posicionamento fixo em linhas para tabelas longas com rolagem.
- Correção do alinhamento com geometria de subpixel e bordas de tabela.
- Pintura aprimorada de planos de fundo e bordas.
position: sticky nas linhas
Uma das maiores dúvidas e coisas mais frustrantes sobre estilizar tabelas no passado foi a falta de suporte para position: sticky nas linhas. Esse recurso permite que um cabeçalho de tabela permaneça na página enquanto você rola a página, além de fornecer contexto a tabelas de dados longas. Quando você rola o cabeçalho para fora da visualização 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 tivemos esse bug há tanto tempo é porque position: sticky foi especificado bem depois do surgimento das tabelas HTML. 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 das tabelas: nos cabeçalhos (<thead>) ou
em rótulos de eixo vertical.
Pintura de bordas e pintura de plano de fundo aprimoradas
Um dos bugs mais antigos da tabela remonta a setembro de 2008. Ele foi arquivado quase assim que o Chrome foi lançado e nunca foi possível corrigi-lo devido à arquitetura de tabela antiga. O problema envolve a pintura de tabelas e bordas recolhidas.
A maneira como as tabelas são pintadas, na ordem de z-index, é: células > linhas >
seções > tabelas. Em seguida, elas são pintadas pela 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 mais superior.
O problema aqui é que as bordas pertencem à tabela, não à célula, da maneira antiga em que as tabelas foram pintadas. As bordas recolhidas são pintadas quando a tabela pinta o primeiro plano. Isso significa que uma única célula da tabela não pode ter várias bordas:
No exemplo acima, a célula azul mais à esquerda estava pintada incorretamente sobre a célula laranja do canto inferior direito, já que não podia ter várias bordas. Na implementação reformulada, isso é resolvido, e a célula da borda laranja é pintada corretamente sobre a azul, permitindo que a segunda lacuna da tabela tenha linhas de borda azul e laranja.
Esse bug já foi corrigido no Chromium e no Firefox.
Geometria de subpixel (alinhamento da tabela)
O alinhamento de pixels em tabelas é outro problema de interoperabilidade que foi corrigido com o TablesNG. Antes, o mecanismo antigo sempre arredondava os valores gráficos para o pixel. Isso significa que, à medida que você aumenta e diminui o zoom da página, as coisas mudaram, causando problemas de alinhamento. O TablesNG corrige esses problemas de alinhamento.
Rearquitetura da Web
A equipe do Chrome não está apenas introduzindo novos recursos para tornar a criação na Web mais robusta, mas também está trabalhando duro para melhorar as APIs existentes e a compatibilidade delas. Na verdade, o TablesNG é apenas um dos muitos projetos de rearquitetura encontrados por essa equipe nos últimos oito anos. Outros, embora não todos os projetos, incluem:
- LayoutNG: uma reescrita completa de todos os algoritmos de layout, para maior confiabilidade e desempenho mais previsível.
- BlinkNG: uma limpeza sistemática e uma refatoração do mecanismo de renderização Blink em fases de pipeline totalmente separadas. Isso permite melhor armazenamento em cache, maior confiabilidade e recursos de reentração/renderização atrasada, como visibilidade do conteúdo e consultas de contêiner.
- GPU Raster Everywhere: esforço de longo prazo para implantar a varredura de GPU em todas as plataformas, sempre que possível.
- Rolagem e animações encadeadas: um esforço de longo prazo para mover todas as animações de rolagem e que não induzem layout para a linha de execução do compositor.
Não perca as próximas atualizações sobre essas melhorias e muito mais!