Atualização de fim de ano da Compat 2021. Um esforço para eliminar problemas de compatibilidade com navegadores em cinco áreas de foco principais: Flexbox CSS, CSS Grid, position: Sticky, proporção e CSS.
O fim do ano está próximo, e chegou a hora de uma atualização final da Compat 2021, um esforço para eliminar problemas de compatibilidade do navegador em cinco áreas de foco principais.
Mais de 90%
pontuação em todos os navegadores
Desde a nossa última atualização, continuamos observando melhorias em todos os navegadores. Todos os navegadores começaram com notas muito mais baixas nas avaliações, mas agora ultrapassaram 90%. Isso significa que a plataforma da Web melhorou significativamente a interoperabilidade das cinco áreas de foco.
As contribuições para os mecanismos de navegador são feitas não apenas pelos fornecedores dos navegadores, mas também por outros usuários na comunidade da Web. Neste projeto, gostaríamos principalmente de agradecer à Igalia pelo envolvimento e trabalhar continuamente para melhorar as pontuações. A Igalia contribuiu para a melhoria das cinco áreas de foco da Compat 2021.
No wpt.fyi, o painel de resultados de testes, há uma visualização filtrada dos resultados (em inglês) que mostra todos os testes incluídos na Compat 2021. Há também visualizações para Chrome, Firefox e Safari que comparam os resultados da última atualização de julho.
Vamos conferir as melhorias em cada área.
Flexbox CSS
O flex-basis: content foi lançado para todos os navegadores, com implementações no
Chromium e no
WebKit. O valor content já era
compatível com o Gecko.
No Chromium, um problema com o dimensionamento do flexbox foi corrigido, correspondendo à especificação e ao comportamento do Gecko. No Gecko, vários problemas que afetam a Compat 2021 foram corrigidos, incluindo um problema com a altura percentual em itens flexíveis. Por fim, no WebKit, foi adicionado suporte a mais valores de propriedade de alinhamento (left, right, auto-start, self-end, start, end) e muitas melhorias foram feitas no posicionamento absoluto, além de melhorar os resultados do teste flexbox na Compat 2021.
Grade CSS
O uso da grade CSS na Web continua crescendo, como pode ser visto no Almanaque da Web de 2021 e nas métricas de uso do Chrome.
O lançamento do GridNG no Chrome e no Edge 93 resolveu muitos problemas antigos com o Grid, resolvendo 38 problemas impressionantes no rastreador de bugs do Chromium. Junto com várias melhorias menores que surgiram em 2021, a pontuação da Compat 2021 para grade no Chromium melhorou de 3% para 97%. Esse trabalho foi liderado pela equipe do Edge na Microsoft.
Um bug de posicionamento absoluto que afetava o Grid foi corrigido no Gecko, e muitas correções foram aplicadas ao WebKit, levando a uma melhoria de 1% para o Firefox e uma melhoria de 3% para o Safari nos testes do Grid.
CSS position: sticky
Na nossa última atualização, notamos que a position: sticky foi a primeira área em que todos os navegadores (neste
caso, o Chrome e o Edge) alcançaram 100% de aprovação nos testes. Agora, após uma série de correções
na implementação do WebKit, o Safari também teve uma pontuação de 100% nesses testes. A maioria dessas melhorias
foi incluída no Safari 15.
Propriedade do CSS aspect-ratio
O suporte entre navegadores para definição da proporção (proporção largura/altura) dos elementos continuou
melhorando, com as pontuações da Compat 2021 alcançando 99%, 97% e 95% para o Chrome/Edge, Firefox
e Safari, respectivamente. A maioria das melhorias não está relacionada à propriedade aspect-ratio,
mas sim à forma como os atributos width e height são mapeados para um valor aspect-ratio padrão
para elementos. Isso foi implementado em vários elementos no WebKit
e em <canvas> para o Chromium.
Transformações CSS
A compatibilidade com transform: perspective(none) agora é compatível com o
Chromium,
Gecko e
WebKit. Isso facilita a animação
entre uma perspectiva e sem perspectiva.
No Chromium, transform-style: preserve-3d (que permite que elementos filhos participem da mesma
cena 3D) e a propriedade perspective (que aplica uma transformação de perspectiva a elementos filhos)
agora estão alinhadas com a especificação, fazendo com que
se apliquem apenas a elementos filhos.
O grande aumento nas pontuações de transformações de CSS para todos os navegadores se deve principalmente a melhorias no pacote de testes, em que testes incorretos foram corrigidos ou removidos. Isso facilita a compreensão dos problemas de interoperabilidade restantes e evita regressões no futuro.
Conclusão
Somos gratos pelo trabalho que todos fizeram para terminar o ano com muitas melhorias na pontuação e melhor infraestrutura de testes. aspect-ratio foi um recurso solicitado há muito tempo pelos
desenvolvedores da Web e agora é compatível com todos os navegadores. O uso de flexbox, grid e position: sticky
está crescendo, e esses recursos agora têm suporte melhor em todos os navegadores, graças a várias
melhorias feitas em 2021.
A seguir Estamos animados para continuar colaborando com outros fornecedores de navegadores e com a comunidade em geral na próxima iteração dessa iniciativa. Começamos a pesquisar e discutir as áreas de foco para 2022. Aguarde o anúncio em breve.
Se você tiver algum feedback ou dúvidas, entre em contato pelo Twitter em @ChromiumDev.