Compat 2021: eliminando os cinco principais pontos fracos de compatibilidade na web
O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir o
cinco principais pontos problemáticos de compatibilidade de navegador para desenvolvedores da web: CSS flexbox,
Grid CSS, 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 de navegadores para desenvolvedores da web. As áreas de foco são CSS flexbox, CSS Grid, position: sticky , aspect-ratio e transformações CSS. Confira Como você pode contribuir e acompanhar para saber como se envolver.
Histórico #
A compatibilidade na web sempre foi um grande desafio para os desenvolvedores. Nos últimos dois anos, o Google e outros parceiros, incluindo Mozilla e Microsoft, decidiram aprender mais sobre os principais pontos fracos para desenvolvedores da web, para conduzir nosso trabalho e priorização para melhorar a situação. Este projeto está conectado ao trabalho de Satisfação do Desenvolvedor do Google (DevSAT) e começou em uma escala maior com a criação das pesquisas MDN DNA (Avaliação das Necessidades do Desenvolvedor) em 2019 e 2020, e um esforço de pesquisa aprofundado apresentado no Relatório de compatibilidade de navegador MDN2020. Pesquisas adicionais foram feitas em vários canais, como as pesquisas State of CSS e State of JS.
A meta em 2021 é eliminar os problemas de compatibilidade do navegador em cinco áreas de foco principais, para que os desenvolvedores possam construir sobre eles com segurança como bases confiáveis. Esse esforço é denominado #Compat 2021.
Escolhendo no 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 melhoradas, removendo-as assim como os principais problemas para os desenvolvedores.
O projeto de compatibilidade usa vários critérios que influenciam quais áreas priorizar, e alguns deles são:
Uso de recursos. 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 MDN DNA
- Relatório de compatibilidade do navegador MDN
- Estado dos recursos CSS mais conhecidos e usados
Resultados de teste de testes de plataforma da web. Por exemplo, flexbox em wpt.fyi .
Recursos mais procurados Posso usar.
As cinco principais áreas de foco em 2021 #
Em 2020, o Chromium começou a trabalhar abordando as principais áreas descritas em Melhorando a compatibilidade do navegador do Chromium em 2020. Em 2021, iniciamos0 um esforço dedicado para ir ainda mais longe. O Google e a Microsoft estão trabalhando juntos para resolver os principais problemas do Chromium junto com a Igalia. A Igalia, que contribui regularmente com o Chromium e WebKit e também é mantenedora da porta oficial do WebKit para dispositivos embarcados, tem dado muito suporte e se engajado nesses esforços de compatibilidade e ajudará a resolver e acompanhar os problemas identificados.
Aqui estão as áreas a serem consertadas em 2021.
CSS flexbox #
O CSS flexbox éamplamente utilizado na web e ainda existem alguns desafios importantes para os desenvolvedores. Por exemplo, o Chromium e o WebKit tiveram problemas com o auto-height, levando a imagens de tamanho incorreto.
Foto por Alireza Mahmoudi.
A postagem do blog Cats do flexbox da Igalia se aprofunda nesses problemas com muitos outros exemplos.
Por que ele é priorizado #
- Pesquisas: problema principal no Relatório de compatibilidade de navegadores MDN, mais conhecido e usado no State of CSS
- Testes: 85% passam em todos os navegadores
- Uso: 75% das visualizações de página, crescendo fortemente no HTTP Archive
CSS Grid #
CSS Grid é um bloco de construção central para layouts de web modernos, substituindo muitas técnicas e soluções alternativas mais antigas. Como a adoção está crescendo, ela precisa ser sólida como uma rocha, para que as diferenças entre os 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 WebKit. Quando suportado, efeitos como este são possíveis:
Por que ele é priorizado #
- Pesquisas: segundo colocado no relatório de compatibilidade de navegadores MDN, bem conhecido, mas menos usado no State of CSS
- Testes: 75% passam em todos os navegadores
- Uso:8% e crescimento constante , ligeiro crescimento no Arquivo HTTP
Posição CSS: sticky #
O posicionamento sticky permite que o conteúdo fique preso à borda da janela de visualização e é comumente usado para cabeçalhos que estão sempre visíveis na parte superior da janela de visualização. Embora seja compatível com todos os navegadores, há casos de uso comuns em que não funciona conforme o esperado. Por exemplo, cabeçalhos de tabela fixos não são compatíveis com o Chromium e, embora agora sejam compatíveis com um sinalizador , os resultados são inconsistentes entre os navegadores:
Confira a demonstração dos cabeçalhos de tabela sticky de Rob Flack.
Por que é priorizado #
- Pesquisas: altamente conhecidas/usadas no CSS State e foram mencionadas várias vezes no relatório de compatibilidade de navegadores MDN
- Testes: 66% passa em todos os navegadores
- Uso: 8%
Propriedade de proporção de aspecto CSS #
A nova propriedade aspect-ratio facilita a manutenção de uma proporção consistente de largura e altura para os elementos, eliminando a necessidade do conhecido hack padding-top :
Usando padding-top
```css .container { width: 100%; padding-top: 56.25%; } ```Usando aspect-ratio.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Por ser um caso de uso tão comum, espera-se que ele se torne amplamente utilizado e queremos ter certeza de que é sólido em todos os cenários comuns e entre navegadores.
Por que ele é priorizado #
- Pesquisas: já bem conhecidas, mas ainda não amplamente utilizadas no CSS State
- Testes: 27% passam em todos os navegadores
- Uso: 3% e espera-se que cresça
Transformações CSS #
As transformações CSS são suportadas em todos os navegadores há muitos anos e são amplamente utilizadas na web. No entanto, ainda existem muitas áreas onde eles 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:
Por que é priorizado #
- Pesquisas: Muito conhecidas e utilizadas no State of CSS
- Testes: 55% passam em todos os navegadores
- Uso: 80%
Como você pode contribuir e acompanhar #
Siga e compartilhe todas as atualizações que postarmos no @ChromiumDev ou na lista de e-mails pública, Compat 2021. Certifique-se de que existem bugs ou registre-os para os problemas que você está enfrentando e, se houver algo faltando, entre em contato através dos canais acima.
Haverá atualizações regulares sobre o progresso aqui no web.dev e você também pode acompanhar o progresso de cada área de foco no Compat 2021 Dashboard.
Esperamos que este esforço conjunto entre os fornecedores de navegadores para melhorar a confiabilidade e a interoperabilidade ajude você a criar coisas incríveis na web!