Atualização de meio do ano da Compat 2021. Um esforço para eliminar problemas de compatibilidade do navegador em cinco áreas de foco principais: flexbox CSS, grade CSS, posição: fixa, proporção e CSS.
É hora da atualização de meio de ano da Compat 2021, um esforço para eliminar problemas de compatibilidade do navegador em cinco áreas de foco principais. Para mais detalhes sobre o trabalho de #compat2021 e como decidimos quais são as áreas de foco, confira o comunicado de março.
As melhorias do Chromium discutidas nesta postagem serão aplicadas ao Chrome, ao Edge e a todos os navegadores baseados no Chromium.
Como medimos o progresso
Consulte o painel da Compat 2021 em web-platform-tests para ver o número de testes aprovados e os gráficos de tendência para diferentes navegadores.
Um simples número de "testes aprovados" não conta toda a história de compatibilidade do navegador, mas é um dos sinais que usamos para ver o progresso do nosso esforço. Com menos diferenças entre os navegadores nos resultados dos testes, um recurso da Web aumenta a interoperabilidade em vários navegadores.
Flexbox CSS
Todos os três mecanismos de navegador tiveram melhorias no flexbox.
O Safari 14.1 enviou a
propriedade gap para flexbox
(link em inglês). A propriedade gap é uma maneira conveniente de definir o espaçamento entre itens. Essa propriedade é muito usada
no layout de grade, e o suporte ao layout flexbox foi um dos recursos mais solicitados no
Relatório de compatibilidade de navegadores da MDN
. Com essa atualização, a propriedade gap em layouts flexíveis está disponível nos principais navegadores, e um principal
desafio de compatibilidade foi resolvido. O Safari 14.1 também incluiu muitas correções para
imagens em flexbox, eliminando a necessidade de soluções alternativas antigas.
O Firefox resolveu a renderização de tabelas como itens flexíveis, aproximando o Firefox de 100% de aprovação nos testes (atualmente 98,5%).
O Chromium também corrigiu tabelas como itens flexíveis.
No Chromium 88, também houve uma reescrita de imagens como itens flexíveis, resolvendo vários bugs de longa data. Por fim, o Chromium adicionou recentemente suporte para novas palavras-chave de alinhamento: start, end, self-start, self-end, left e right. Essas palavras-chave estão disponíveis para teste no Chrome Canary e no Edge Canary.
Grade CSS
O uso da grade CSS está crescendo de forma contínua, atualmente para 9% das visualizações de página. Todos os três principais mecanismos de navegador implementam o CSS Grid e já estão em mais de 89% dos testes de plataformas da Web relacionados. Fechar a lacuna de compatibilidade é importante para oferecer suporte ao crescimento constante desse recurso.
Até agora, em 2021, o Safari melhorou de 89% para 93% de aprovação nos testes, e o Chromium está trabalhando em uma nova arquitetura para resolver mais problemas da CSS Grid, chamada GridNG. Esse é um esforço liderado pela equipe da Microsoft e que levou ao recente aumento de 94% para 97% nos testes de grade direcionados. Você verá uma atualização sobre o GridNG no blog do Edge (em inglês) em breve.
CSS position: sticky
No Chromium, o erro
position: sticky para cabeçalhos de tabelas
foi corrigido com o lançamento do TablesNG, uma iniciativa de vários anos para reestruturar a renderização de tabelas.
Essa mudança, junto com algumas
correções
finais, fez o canal do desenvolvedor do Chrome e do Edge 93
passarem em 100% dos
testes direcionados.
Além de position: sticky,
o TablesNG resolveu 72 bugs do Chromium.
Propriedade do CSS aspect-ratio
A propriedade aspect-ratio, que facilita a definição da proporção largura/altura, é crucial
para o Web design responsivo. Também é uma solução para evitar
mudanças de layout cumulativas.
A propriedade aspect-ratio agora é compatível com as versões estáveis do Chrome, Edge e Firefox, e no Safari 15 Beta. Com a melhora do suporte a vários navegadores, o
uso aumenta.
Embora nenhum navegador tenha 100% de aprovação nos testes, a lacuna de compatibilidade de aspect-ratio é a menor
de todas as cinco áreas de foco da Compat 2021. Ela tem mais de 90% de aprovação nos testes de todos os principais navegadores. Continuaremos monitorando o progresso usando esse pacote de testes para torná-lo um recurso sólido.
Saiba mais sobre o uso e os benefícios da
propriedade aspect-ratio em web.dev (link em inglês).
Transformações CSS
Houve uma melhoria lenta e constante nos resultados dos testes direcionados para transformações CSS, devido a correções de bugs e melhorias nos próprios testes.
A equipe do Chromium também está trabalhando para melhorar a interoperabilidade entre transform-style:
preserve-3d e transform :perspective(). Esperamos ter mais progresso para compartilhar na próxima
atualização.
Melhorias na pontuação geral
Desde o anúncio em março, os três mecanismos de navegador melhoraram as pontuações da Compat 2021:
- O Chrome e o Edge Dev passaram de 86 para 92.
- O Firefox foi de 83 para 86.
- O Safari passou de 64 para 82.
Vale ressaltar que o Safari ajudou a diminuir a lacuna de compatibilidade em 18 pontos, graças ao trabalho dos
colaboradores do WebKit. Em particular, a equipe da
Igalia contribuiu
com a propriedade aspect-ratio e com muitas melhorias no Flexbox e Grid, como o gap para flexbox
e várias correções de bugs.
Acompanhe o progresso da Compat 2021
Para acompanhar o progresso da Compat 2021, fique de olho no painel, inscreva-se em nossa lista de e-mails ou entre em contato com usat @chromiumdev. Se você tiver algum problema, registre um bug do navegador afetado.