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.
![Um resumo do painel da Compat
2021 (navegadores experimentais)](https://web.dev/static/blog/compat2021-holiday-update/image/a-snapshot-compat-2021-d-62338b0db9168.png?authuser=3&hl=pt-br)
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.