Atualização de fim de ano na Compat 2021: um esforço para eliminar problemas de compatibilidade do navegador em cinco áreas de foco principais: CSS Flexbox, CSS Grid, posição: fixa, proporção e transformações CSS.
O fim do ano está próximo, e é hora de uma atualização final sobre a 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 última atualização, continuamos a ter melhorias. em todos os navegadores. Todos os navegadores começaram com notas muito mais baixas no início do ano, mas Agora todos os navegadores ultrapassaram 90%! Isso significa que a plataforma da Web melhorou muito e a interoperabilidade das cinco áreas de foco.
![Um resumo da Compat
Painel de 2021 (navegadores experimentais)](https://web.developers.google.cn/static/blog/compat2021-holiday-update/image/a-snapshot-compat-2021-d-62338b0db9168.png?authuser=6&hl=pt-br)
As contribuições para os mecanismos do navegador são feitas não apenas pelos fornecedores do navegador, mas também por outros usuários da Web. comunidade. Neste projeto, queremos agradecer em especial a Igalia o envolvimento e continuando o trabalho para melhorar as pontuações. A Igalia contribuiu para a melhoria das cinco áreas de foco áreas do Compat 2021.
Em wpt.fyi, o painel de resultados de testes, agora há uma visualização filtrada de resultados de testes mostrando todos os testes incluídos na Compat 2021, além de visualizações para Google Chrome, Firefox e Safari comparando os resultados com a última atualização de julho.
Vamos dar uma olhada nas melhorias em cada área.
Flexbox CSS
O flex-basis: content
agora está disponível para todos os navegadores e inclui implementações em
Chromium e
WebKit: O valor content
já era
suportado pela Gecko.)
No Chromium, um problema com o dimensionamento de flexbox (link em inglês). é corrigido, correspondendo à especificação e ao comportamento da Gecko. No Gecko, problemas que afetavam a Compat 2021 foram corrigidos, inclusive um problema com a altura percentual em itens flexíveis. Por fim, no WebKit, há suporte a mais valores de propriedade de alinhamento (left, right, autoinício, autofinal, início, término) foi adicionado e muitas melhorias foram feitas no posicionamento absoluto, além de aprimorar os resultados dos testes de flexbox na Compat 2021.
Grade CSS
O uso da grade CSS na Web continua a crescer, como pode ser visto nos 2021 Web Almanac e Métricas de uso do Chrome.
O lançamento do GridNG no Chrome e no Edge 93 resolveram muitos problemas antigos com o Grid, resolvendo impressionantes 38 problemas no rastreador de bugs do Chromium. Juntamente com muitas melhorias menores que se seguiram, o Compat 2021 a pontuação de grade no Chromium melhorou de 3% a 97%. Esse trabalho foi liderado pela equipe do Edge na Microsoft.
Um bug de posicionamento absoluto que afeta a grade foi corrigido no Gecko, e muitas correções chegaram ao WebKit, levando a uma melhoria de 1% no Firefox e de 3% ao Safari no os testes de grade.
CSS position: sticky
Em nossa última atualização, observamos que position: sticky
foi a primeira área em que qualquer navegador (neste
caso Chrome e Edge) alcançaram 100% de aprovação nos testes. Agora, seguindo várias correções
na implementação do WebKit, o Safari também teve uma pontuação de 100% nesses testes. A maioria dessas melhorias
foram incluídos no Safari 15.
Propriedade CSS aspect-ratio
O suporte entre navegadores para definir a proporção (proporção largura/altura) dos elementos tem
continuou melhorando, com as pontuações do Compat 2021 alcançando 99%, 97% e 95% para Chrome/Edge, Firefox
e Safari, respectivamente. A maioria das melhorias não estão relacionadas à propriedade aspect-ratio
.
mas sim com a forma como os atributos width
e height
são mapeados para um valor aspect-ratio
padrão.
para os elementos. Isso foi implementado para vários elementos no WebKit,
e <canvas>
para Chromium.
Transformações CSS
A compatibilidade com transform: perspective(none)
agora está disponível em
Chromium,
Gecko e
WebKit. Isso facilitará
animar entre uma perspectiva e nenhuma 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 alinhados com as especificações, tornando-os
se aplicam somente a elementos filhos.
O grande aumento nas pontuações do CSS para todos os navegadores se deve principalmente às melhorias no pacote de testes, em que erros os testes foram corrigidos ou removidos. Isso facilita o entendimento da interoperabilidade restante problemas e evitar regressões no futuro.
Conclusão
Somos gratos pelo trabalho que todos fizeram para encerrar o ano com muitas melhorias na
e uma melhor infraestrutura de teste. aspect-ratio
era um recurso solicitado há muito tempo
desenvolvedores da Web e agora é compatível com todos os navegadores. Uso de flexbox, grid e position: sticky
estão crescendo, e esses recursos agora têm melhor suporte em todos os navegadores, graças a muitos
melhorias feitas em 2021.
A seguir Estamos animados para continuar colaborando com outros fornecedores de navegadores e com a comunidade na próxima iteração dessa iniciativa. Começamos a pesquisar e discutir o foco áreas para 2022. Você receberá um anúncio em breve.
Se você tiver comentários ou dúvidas, entre em contato conosco no Twitter em @ChromiumDev.