Pela primeira vez, todos os principais fornecedores de navegadores e outras partes interessadas se uniram para resolver os principais problemas de compatibilidade de navegadores identificados pelos desenvolvedores da Web. O Interop 2022 vai melhorar a experiência de desenvolvimento para a Web em 15 áreas principais. Neste artigo, descubra como chegamos até aqui, qual é o foco do projeto, como o sucesso será medido e como você pode acompanhar o progresso.
Tudo começou em 2019
Em 2019, o Mozilla, o Google e outros iniciaram um grande esforço para entender as dificuldades dos desenvolvedores com as pesquisas de avaliação de necessidades dos desenvolvedores do MDN e o Relatório de compatibilidade do navegador detalhado. Esses relatórios nos deram informações detalhadas e úteis para enfrentar os principais desafios dos desenvolvedores com a plataforma da Web e levaram à iniciativa Compat 2021.
Entre outras coisas, a Compat 2021 levou à criação de uma base sólida para recursos avançados, como a grade CSS (12% de uso e em crescimento contínuo) e o flexbox do CSS (uso de 77%), incluindo a propriedade gap no flexbox, que resolve um grande problema dos desenvolvedores na adoção de novos métodos de layout.
Ficamos muito felizes em alcançar uma pontuação de mais de 90% em todas as implementações no final de 2021.
O que é o Interop 2022?
O Interop 2022 é um comparativo de mercado, acordado por representantes de três grandes implementações de navegador, e desenvolvido por meio de um processo de indicação pública e análise com a opinião de apoiadores, Apple, Bocoup, Google, Igalia, Microsoft e Mozilla.
O comparativo de mercado concentra-se em 15 áreas, identificadas pelos desenvolvedores como sendo particularmente problemáticas quando estão ausentes ou têm problemas de compatibilidade entre navegadores. Todos os fornecedores de navegador concordaram em focar nessas áreas, e todos os envolvidos estão animados para começar a tornar a experiência de desenvolvimento para a Web muito melhor.
As 15 áreas de foco
Os seguintes recursos serão o foco do Interop 2022. Elas incluem 10 novas áreas, além de cinco transferidas da Compat 2021. As novas áreas de foco são:
Propagar camadas
As camadas em cascata dão aos desenvolvedores da Web mais controle sobre a cascata. Eles fornecem uma maneira de agrupar seletores em camadas, cada um com sua própria especificidade. Isso significa que você não precisa ordenar os seletores com cuidado ou criá-los altamente específicos para substituir as regras básicas de CSS.
Espaços de cores e funções de cor CSS
Para usar funções de cor em um sistema de design, atualmente você precisa usar Sass, PostCSS ou calc() em valores HSL. As funções de cor integradas ao CSS significam que as cores podem ser atualizadas dinamicamente, e os novos espaços de cor removem a restrição à gama sRGB e as limitações de percepção de HSL.
Há duas funções definidas no nível de cor 5 do CSS que permitem temas mais dinâmicos na plataforma da Web:
color-mix(): usa duas cores e retorna o resultado da mistura delas em um espaço de cores especificado com um valor determinado.color-contrast(): seleciona, em uma lista de cores, a cor com o maior contraste em relação a uma única cor especificada.
Essas funções oferecem suporte a espaços de cor expandidos (LAB, LCH e P3) e, além de HSL e sRGB, elas padronizam o espaço de cores LCH uniforme.
Novas unidades da janela de visualização
O Relatório de compatibilidade do navegador MDN de 2020 e a nova pesquisa State of CSS 2021 têm dificuldade para lidar com o dimensionamento da janela de visualização. Os Valores e unidades de CSS de nível 4 adicionam novas unidades para os tamanhos maior, menor e dinâmico da janela de visualização, lv*, sv* e dv*. Essas unidades vão facilitar a criação de layouts que preencham a janela de visualização visível em dispositivos móveis, considerando a barra de endereço.
Além disso, a equipe de vários fornecedores responsável pelo Interop 2022 vai colaborar na pesquisa e melhoria do estado de interoperabilidade dos recursos de medição da janela de visualização, incluindo a unidade vh atual.
Rolagem
O Relatório de pesquisa de rolagem de 2021 (link em inglês) confirma que os recursos e a compatibilidade com a rolagem são difíceis de implementar e têm muitas áreas de melhoria. Vamos nos concentrar no ajuste de rolagem, no comportamento de rolagem e no comportamento de overscroll para ajudar a rolagem a ser mais consistente e suave em todas as plataformas.
Também estamos explorando novas propostas de recursos de ajuste de rolagem.
Subgrade
O valor subgrid de grid-template-columns e grid-template-rows significa que um item de grade que tem display: grid aplicado pode herdar a definição de faixa da parte da grade mãe sobre a qual ele é colocado.
Por exemplo, os três componentes de cartão a seguir têm um cabeçalho e um rodapé alinhados com os cabeçalhos e o rodapé do cartão adjacentes, embora cada cartão tenha uma grade independente. Esse padrão funciona porque cada card é um item que abrange três linhas da grade pai e usa a subgrade para herdar essas linhas no cartão.
Também incluído
- Contenção do CSS (propriedade
contain) - O elemento
<dialog> - Controles de formulários
- Tipografia e codificações: incluindo
font-variant-alternates,font-variant-position, a unidadeice codificações de texto CJK - Compatibilidade com a Web, que se concentra em diferenças entre navegadores que causaram problemas de compatibilidade do site que afetam os usuários finais.
As áreas a seguir fizeram um grande progresso no projeto Compat 2021, mas ainda há espaço para melhorias. Por isso, eles foram incluídos no Interop 2022 para que os outros problemas possam ser resolvidos.
- Proporção
- Flexbox
- Grade
- Posicionamento fixo
- Transformações
Esforços de investigação
Além das 15 áreas de foco, a Interop 2022 inclui três iniciativas de investigação. Estas são áreas problemáticas e que precisam ser melhoradas, mas em que o estado atual das especificações ou dos testes ainda não é bom o suficiente para que seja possível pontuar o progresso usando os resultados do teste:
- Editando,
contenteditableeexecCommand - Eventos de ponteiro e mouse
- Medição da janela de visualização
Os fornecedores de navegadores e outras partes interessadas colaborarão na melhoria dos testes e das especificações para essas áreas, para que possam ser incluídos em iterações futuras dessa iniciativa.
Medir o sucesso e acompanhar o progresso
O web-platform-tests dashboard será usado para acompanhar o progresso nas 15 áreas de foco. Para cada área, um conjunto de testes foi identificado. Os navegadores são pontuados nesses testes, atribuindo uma pontuação para cada área e uma pontuação geral para todas as 15 áreas.
Para acompanhar e acompanhar o progresso, acesse o painel da Interoperabilidade de 2022. Ao longo do ano, você pode acompanhar e ver como a plataforma para a qual você criou está melhorando.
O que tudo isso significa para os desenvolvedores?
O objetivo dessas iniciativas de interoperabilidade de vários anos, na forma de Compat 2021, Interop 2022 e muito mais, é reconhecer e resolver os problemas que os desenvolvedores enfrentaram há muitos anos. E não se trata de uma iniciativa de um único navegador, mas de uma forte colaboração entre todos os principais fornecedores de navegadores e amigos para melhorar a plataforma da Web em todos os aspectos.
Essencialmente, o objetivo é tornar a plataforma da Web mais utilizável e confiável para desenvolvedores, para que eles possam gastar mais tempo criando ótimas experiências da Web em vez de contornar inconsistências de navegador.
Deixe sua opinião
Queremos saber sua opinião sobre as melhorias feitas durante a compatibilidade com 2021 ou sobre qualquer um dos recursos incluídos nessa versão. Qual dos seguintes recursos fará mais diferença no seu trabalho? Por que você está realmente animado? Registre problemas no repositório do GitHub ou entre em contato com a nossa equipe no Twitter.
Acesse mais informações sobre a interoperabilidade 2022 em: