Compat 2021: eliminação dos cinco principais problemas de compatibilidade na Web

O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir os cinco principais problemas de compatibilidade de navegadores para desenvolvedores da Web: flexbox do CSS, grade CSS, position: sticky, aspect-ratio e transformações do CSS.

O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir os cinco principais problemas de compatibilidade de navegadores para desenvolvedores da Web. As áreas de foco são flexbox do CSS, grade CSS, position: sticky, aspect-ratio e transformações do CSS. Confira Como contribuir e acompanhar para saber como se envolver.

Contexto

A compatibilidade na Web sempre foi um grande desafio para os desenvolvedores. Nos últimos anos, o Google e outros parceiros, incluindo a Mozilla e a Microsoft, se propuseram a saber mais sobre os principais problemas dos desenvolvedores da Web para impulsionar nosso trabalho e priorizar para melhorar a situação. Esse projeto está conectado ao trabalho de Satisfação do Desenvolvedor (DevSAT) do Google e começou em uma escala maior com a criação das pesquisas de DNA do MDN (avaliação de necessidades do desenvolvedor) em 2019 e 2020, além de uma pesquisa detalhada apresentada no Relatório de compatibilidade de navegador do MDN 2020. Outras pesquisas foram feitas em vários canais, como as pesquisas State of CSS e State of JS.

A meta para 2021 é eliminar os problemas de compatibilidade do navegador em cinco áreas chave para que os desenvolvedores possam usá-las como bases confiáveis. Esse esforço é chamado de #Compat 2021.

Como escolher o que priorizar

Embora haja problemas de compatibilidade do navegador em praticamente todas as plataformas da Web, o foco deste projeto é um pequeno número das áreas mais problemáticas que podem ser melhoradas significativamente, removendo-as como os principais problemas para os desenvolvedores.

O projeto de compatibilidade usa vários critérios que influenciam quais áreas priorizar. Alguns deles são:

As cinco principais áreas de foco em 2021

Em 2020, o Chromium começou a trabalhar nas principais áreas descritas em Como melhorar a compatibilidade do navegador Chromium em 2020. Em 2021, vamos começar um esforço dedicado para ir ainda mais longe. O Google e a Microsoft estão trabalhando juntas para resolver os principais problemas do Chromium, junto com a Igalia. A Igalia, que é colaboradora frequente do Chromium e do WebKit, e os mantenedores da porta oficial do WebKit para dispositivos incorporados, têm apoiado e se engajado nesses esforços de compatibilidade e vão ajudar a resolver e acompanhar os problemas identificados.

Confira as áreas que serão corrigidas em 2021.

Flexbox do CSS

O CSS flexbox é amplamente usado na Web, e ainda há alguns desafios importantes para os desenvolvedores. Por exemplo, o Chromium e o WebKit tiveram problemas com contêineres flex auto-height, o que levava a imagens com tamanho incorreto.

Foto esticada de um tabuleiro de xadrez.
Imagem com tamanho incorreto devido a bugs.
Tabuleiro de xadrez.
Imagem com tamanho correto.
Foto de Alireza Mahmoudi.

A postagem do blog Flexbox Cats da Igalia aborda essas questões com muitos outros exemplos.

Por que ela é priorizada

Grade CSS

A grade CSS é um bloco de construção fundamental para layouts da Web modernos, substituindo muitas técnicas e soluções alternativas mais antigas. À medida que a adoção cresce, ela precisa ser sólida, para que diferenças entre navegadores nunca sejam um motivo para evitá-la. Uma área que está faltando é a capacidade de animar layouts de grade, com suporte no Gecko, mas não no Chromium ou no WebKit. Quando houver suporte, efeitos como este serão possíveis:

Demonstração de xadrez animado por Chen Hui Jing.

Por que ela é priorizada

CSS position: sticky

O posicionamento fixo permite que o conteúdo fique preso à borda da janela de visualização e é comumente usado para cabeçalhos que ficam sempre visíveis na parte de cima da janela de visualização. Embora seja compatível com todos os navegadores, há casos de uso comuns em que ele não funciona como esperado. Por exemplo, cabeçalhos de tabela fixos não são compatíveis com o Chromium e, embora agora tenham suporte com uma flag, os resultados são inconsistentes entre os navegadores:

Chromium com "TablesNG"
Gecko
WebKit

Confira a demonstração de cabeçalhos de tabela fixos do Rob Flack.

Por que ela é priorizada

Propriedade aspect-ratio do CSS

A nova propriedade aspect-ratio do CSS facilita a manutenção de uma proporção consistente de largura para altura para elementos, eliminando a necessidade do conhecido hack padding-top:

Como usar padding-top
.container {
 
width: 100%;
 
padding-top: 56.25%;
}
Como usar a proporção
.container {
 
width: 100%;
 
aspect-ratio: 16 / 9;
}

Como é um caso de uso comum, esperamos que ele seja usado amplamente. Queremos garantir que ele seja sólido em todos os cenários comuns e em todos os navegadores.

Por que ela é priorizada

  • Pesquisas: já são bem conhecidas, mas ainda não são amplamente usadas no State of CSS.
  • Testes: 27% de aprovação em todos os navegadores
  • Uso: 3% e esperado crescimento

Transformações do CSS

As transformações CSS são compatíveis com todos os navegadores há muitos anos e são amplamente usadas na Web. No entanto, ainda há muitas áreas em que elas não funcionam da mesma forma em todos os navegadores, principalmente com animações e transformações 3D. Por exemplo, um efeito de virada de cartão pode ser muito inconsistente entre os navegadores:

Efeito de virada de card no Chromium (à esquerda), Gecko (no meio) e WebKit (à direita). Demonstração de David Baron do comentário de bug.

Por que ela é priorizada

Como você pode contribuir e acompanhar

Siga e compartilhe as atualizações que postamos em @ChromiumDev ou na lista de e-mails pública, Compat 2021. Verifique se os bugs existem ou envie um relatório sobre os problemas que você está enfrentando. Se algo estiver faltando, entre em contato pelos canais acima.

Haverá atualizações regulares sobre o progresso aqui no web.dev, e você também pode seguir o progresso de cada área de foco no Painel de compatibilidade 2021.

Painel de compatibilidade 2021
O Painel de compatibilidade 2021 (captura de tela tirada em 16 de novembro de 2021).

Esperamos que esse esforço conjunto entre os fornecedores de navegadores para melhorar a confiabilidade e a interoperabilidade ajude você a criar coisas incríveis na Web.