O Google está trabalhando com outros fornecedores de navegadores e parceiros do setor para corrigir os cinco principais problemas de compatibilidade do navegador para desenvolvedores Web: CSS flexbox, 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 o
cinco principais pontos problemáticos de compatibilidade com navegadores para desenvolvedores Web. As áreas de foco
são CSS flexbox, CSS Grid, position: sticky, aspect-ratio e CSS
de dados. Confira Como contribuir e acompanhar
e saber como se envolver.
Contexto
A compatibilidade na Web sempre foi um grande desafio para os desenvolvedores. Na últimos anos, o Google e outros parceiros, incluindo o Mozilla e a Microsoft decidiu descobrir mais sobre os principais pontos fracos da Web desenvolvedores, para orientar nosso trabalho e priorização para tornar a situação melhor. Este projeto está conectado a uma conta do Google de satisfação (DevSAT), e isso começou em maior escala com a criação do Pesquisas de avaliação de necessidades do desenvolvedor (DNA) do MDN em 2019 e 2020, e um esforço de pesquisa aprofundado apresentado no Relatório de compatibilidade de navegadores da MDN 2020. Outras pesquisas foram feitas em vários canais, como o State of CSS e State of JS pesquisas.
O objetivo para 2021 é eliminar os problemas de compatibilidade do navegador em cinco dos principais para que os desenvolvedores possam usá-las como bases confiáveis. Isso desse esforço é chamado #Compat 2021.
Como escolher o que focar
Embora existam problemas de compatibilidade de navegadores em praticamente toda a Web do Google, o foco deste projeto está em um pequeno número dos cenários áreas que podem ser melhoradas significativamente, removendo-as como principais problemas para desenvolvedores.
O projeto de compatibilidade usa vários critérios que influenciam quais áreas priorizam, e algumas são:
- Uso do recurso. Por exemplo, flexbox é usado em 75% de todas as visualizações de página, e a adoção está crescendo fortemente em HTTP Arquivar.
- Número de bugs No Chromium, Gecko, WebKit) e, para o Chromium, quantas estrelas essas insetos têm.
Resultados da pesquisa:
- Pesquisas de DNA de MDN
- Relatório de compatibilidade de navegadores da MDN
- Estado do CSS recursos mais conhecidos e usados
Resultados dos testes de web-platform-tests. Por exemplo, flexbox on wpt.fyi.
Posso usar os recursos mais pesquisados?
As cinco principais áreas de foco em 2021
Em 2020, o Chromium começou a trabalhar para abordar as principais áreas descritas em Melhorias na compatibilidade com navegadores Chromium em 2020. Em 2021, estamos começando um esforço dedicado para ir ainda mais longe. o Google e A Microsoft e o Igalia estão trabalhando juntos para resolver os principais problemas no Chromium. Igalia, que são colaboradores regulares para o Chromium e o WebKit, e mantenedores da porta oficial do WebKit para dispositivos incorporados, apoio e envolvimento com esses esforços de compatibilidade, e ajudar a resolver e acompanhar os problemas identificados.
Estas são as áreas que serão corrigidas em 2021.
Flexbox CSS
Flexbox do CSS
é
amplamente usados
na Web, e os desenvolvedores ainda
encontram alguns grandes desafios. Por exemplo:
o Chromium e o
WebKit
tiveram problemas com contêineres flexíveis auto-height, levando a imagens com tamanho incorreto.
Foto de Alireza Mahmoudi.
Flexbox Cats do Igalia a postagem do blog detalha esses problemas com muitos outros exemplos.
Por que ela é priorizada
- Pesquisas: principal problema em Relatório de compatibilidade de navegadores da MDN mais conhecidos e usados em Estado de CSS
- Testes: 85% de aprovação em todos os navegadores
- Uso: 75% de visualizações de página, com um forte crescimento em HTTP Arquivar
Grade CSS
A grade CSS é um elemento básico fundamental para layouts da Web modernos, substituindo muitas técnicas mais antigas e soluções alternativas. À medida que a adoção aumenta, ela precisa ser sólida, para que diferenças entre os navegadores nunca é um motivo para evitá-la. Uma área e falta a capacidade de animar layouts de grade, com suporte no Gecko, mas não Chromium ou WebKit (em inglês). Quando compatível, efeitos como este são possíveis:
Por que ela é priorizada
- Pesquisas: segundo colocado em Relatório de compatibilidade de navegadores da MDN conhecido, mas usado com menos frequência em Estado do CSS
- Testes: 75% de aprovação em todos os navegadores
- Uso: 8% e crescendo de forma constante, um pequeno crescimento em HTTP Arquivar
Posição do CSS: fixo
Posicionamento fixo permite que o conteúdo fique na borda da janela de visualização e é usado com frequência para cabeçalhos que estão sempre visíveis na parte superior da janela de visualização. Embora compatível em todos os navegadores, existem casos de uso comuns em que ele não funciona como pretendido. Por exemplo: cabeçalhos fixos da tabela não têm suporte no Chromium e, embora agora compatível com uma flag, os resultados são inconsistentes nos navegadores:
Confira os cabeçalhos fixos da tabela demonstração por Rob Flack.
Por que ela é priorizada
- Pesquisas: muito conhecido/usado em Estado de CSS e foi criada várias vezes Relatório de compatibilidade de navegadores do MDN
- Testes: Aprovação de 66% em todos os navegadores
- Uso: 8%
Propriedade de proporção de CSS
A nova
aspect-ratio
CSS facilita a manutenção de uma proporção consistente largura/altura para
o que acaba com a necessidade de componentes
Dica do padding-top:
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
Por ser um caso de uso muito comum, espera-se que seja amplamente usado, 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á conhecido, mas ainda não muito usado no estado do CSS
- Testes: 27% de aprovação em todos os navegadores
- Uso: 3% e com previsão de crescimento
Transformações CSS
Transformações CSS têm suporte em todos os navegadores há muitos anos e são amplamente utilizados da Web. No entanto, ainda restam áreas em que eles não funcionam da mesma forma em vários navegadores, especialmente com animações e transformações 3D. Por exemplo, um cartão o efeito de virada pode ser muito inconsistente nos navegadores:
Por que ela é priorizada
- Pesquisas: muito conhecidos e usados em State of CSS
- Testes: 55% de aprovação em todos os testes navegadores
- Uso: 80%
Como você pode contribuir e acompanhar
Siga e compartilhe as atualizações que postamos @ChromiumDev ou a lista de e-mails pública, Compat 2021. Confirmar a existência de bugs ou registre-as em caso de problemas está tendo e, se faltar algo, entre em contato pelas etapas acima canais.
O web.dev será atualizado regularmente, e você poderá acompanhe o progresso de cada área de foco no Compat 2021 Painel de controle.
Esperamos que esse esforço conjunto entre os fornecedores de navegadores melhore a confiabilidade e a interoperabilidade vai ajudar você a criar coisas incríveis na Web!