O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir os cinco principais problemas de compatibilidade com navegadores para desenvolvedores da Web: flexbox CSS, CSS Grid, position: sticky, aspect-ratio e transformações CSS.
O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir os cinco principais problemas de compatibilidade com navegadores para desenvolvedores da Web. As áreas de foco
são flexbox CSS, CSS Grid, position: sticky, aspect-ratio e transformações
CSS. Confira Como contribuir e acompanhar para
saber como participar.
Contexto
A compatibilidade na Web sempre foi um grande desafio para os desenvolvedores. Nos últimos anos, o Google e outros parceiros, incluindo Mozilla e Microsoft, decidiram saber mais sobre os principais pontos problemáticos para os desenvolvedores da Web, a fim de impulsionar nosso trabalho e priorização para melhorar a situação. Este projeto está conectado ao trabalho do Google Developer Satisfaction (DevSAT) e começou em maior escala com a criação das pesquisas de DNA (Avaliação de necessidades do desenvolvedor) da MDN em 2019 e 2020 e um esforço de pesquisa detalhado apresentado no Relatório de compatibilidade do navegador MDN 2020. Outras pesquisas foram feitas em vários canais, como as pesquisas State of CSS e State of JS.
O objetivo de 2021 é eliminar problemas de compatibilidade de navegadores em cinco áreas de foco principais para que os desenvolvedores possam usá-las como bases confiáveis com confiança. Esse recurso é chamado de #Compat 2021.
Como escolher em que focar
Embora existam problemas de compatibilidade do navegador em basicamente toda a plataforma da Web, o foco deste projeto está em um pequeno número das áreas mais problemáticas, que podem ser significativamente melhores, removendo-as como os principais problemas para desenvolvedores.
O projeto de compatibilidade usa vários critérios que influenciam quais áreas devem ser priorizadas, e alguns são:
- Uso do recurso. Por exemplo, o flexbox é usado em 75% de todas as visualizações de página, e a adoção está crescendo fortemente no HTTP Archive.
- Número de bugs (no Chromium, Gecko, WebKit) e, para o Chromium, quantas estrelas esses bugs têm.
Resultados da pesquisa:
- Pesquisas de DNA da MDN
- Relatório de compatibilidade de navegadores da MDN
- Estado do CSS dos recursos mais conhecidos e usados
Resultados de teste de web-platform-tests. Por exemplo, flexbox em wpt.fyi.
As cinco principais áreas de foco em 2021
Em 2020, o Chromium começou a trabalhar nas áreas principais descritas em Como melhorar a compatibilidade do navegador do Chromium em 2020. Em 2021, começamos um esforço dedicado para ir ainda mais longe. O Google e a Microsoft estão trabalhando juntos para resolver os principais problemas no Chromium, junto com a Igalia. A Igalia, que contribui regularmente para o Chromium e o WebKit e mantém a porta oficial do WebKit para dispositivos incorporados, ofereceu apoio e está envolvida nesses esforços de compatibilidade e vai ajudar a resolver e rastrear os problemas identificados.
Estas são as áreas que serão corrigidas em 2021.
Flexbox CSS
O flexbox CSS
é
amplamente usado
na Web e ainda há alguns grandes desafios para os desenvolvedores. Por exemplo,
o Chromium e o
WebKit
tiveram problemas com auto-height contêineres flexíveis, o que levou a imagens de tamanho incorreto.
Foto de Alireza Mahmoudi.
A postagem do blog A flexbox Cats da Igalia (em inglês) aprofunda esses problemas com muitos outros exemplos.
Por que ela é priorizada
- Pesquisas: principal problema no Relatório de compatibilidade do navegador MDN, mais conhecido e usado em Estado do CSS.
- Testes: 85% aprovados em todos os navegadores
- Uso: 75% das visualizações de página, com um grande crescimento no HTTP Archive
Grade CSS
A grade CSS (link em inglês) é um elemento básico fundamental para layouts modernos da Web, substituindo muitas técnicas e soluções alternativas mais antigas. À medida que a adoção cresce, ela precisa ser sólida para que as diferenças entre os navegadores nunca sejam uma razão para evitar isso. Uma área que não tem é a capacidade de animar layouts de grade, que têm suporte no Gecko, mas não no Chromium ou no WebKit. Quando apoiados, efeitos como estes são possíveis:
Por que ela é priorizada
- Pesquisas: segundo lugar no Relatório de compatibilidade do navegador MDN, conhecido, mas menos usado no Estado do CSS.
- Testes: 75% aprovados em todos os navegadores
- Uso: 8% e crescendo constantemente e um pequeno crescimento no HTTP Archive
Posição do CSS: fixo
O posicionamento fixo permite que o conteúdo permaneça na borda da janela de visualização e é comumente usado para cabeçalhos que estão sempre visíveis na parte superior da janela. Embora seja compatível com todos os navegadores, há casos de uso comuns em que ele não funciona como pretendido. Por exemplo, cabeçalhos de tabelas fixas não são compatíveis com o Chromium e, embora agora sejam compatíveis com uma flag, os resultados são inconsistentes em todos os navegadores:
Confira a demonstração dos cabeçalhos de tabelas fixas de Rob Flack.
Por que ela é priorizada
- Pesquisas: altamente conhecido/usado em Estado do CSS e que foi criado várias vezes no Relatório de compatibilidade de navegadores da MDN
- Testes: 66% de aprovação em todos os navegadores
- Uso: 8%
Propriedade de proporção do CSS
A nova propriedade de CSS
aspect-ratio
facilita manter uma proporção consistente entre largura e altura para
elementos, eliminando a necessidade da conhecida
invasão padding-top:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Como esse é um caso de uso tão comum, espera-se que ele se torne amplamente utilizado, e queremos ter certeza de que ele é sólido em todos os cenários comuns e em todos os navegadores.
Por que ela é priorizada
- Pesquisas: já conhecidas, mas ainda não amplamente usadas no Estado das CSS
- Testes: 27% de aprovação em todos os navegadores
- Uso: 3% e espera-se que aumente
Transformações 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 existem 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 nos navegadores:
Por que ela é priorizada
- Pesquisas: muito conhecidas e usadas no Estado do CSS
- Testes: 55% aprovados em todos os navegadores
- Uso: 80%
Como 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 há bugs ou registre-os para 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. Você também pode acompanhar o progresso de cada área de foco no Painel da Compat 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.