Novamente em 2023, todos os principais fornecedores de navegadores e outras partes interessadas trabalharam juntos para resolver os principais problemas de compatibilidade de navegadores.
Em 2023, todos os principais fornecedores de navegadores e outras partes interessadas estão trabalhando novamente juntos para resolver os principais problemas de compatibilidade. Essa iniciativa começou nessa escala com o Interop 2022, e você pode conferir o que conquistamos juntos na postagem de fim de ano (em inglês). Todos os envolvidos acreditam que isso ajudará a melhorar a experiência dos desenvolvedores da Web em todos os lugares. Este ano, pela primeira vez, anunciamos publicamente o processo de proposta e recebemos ótimas sugestões de estruturas, grandes empresas, fornecedores de navegadores e desenvolvedores de todos os lugares.
Áreas de foco do Interop 2023
Desta vez, temos não menos do que 26 áreas de foco, descritas em detalhes no nosso documento do projeto. Elas estão em ordem alfabética:
- Imagem de borda no CSS
- Espaços de cores e funções no CSS
- Consultas de contêiner no CSS
- Contenção no CSS
- Pseudoclasses do CSS
- Propriedades personalizadas no CSS
- Flexbox (link em inglês)
- Detecção de recursos de fonte e palettes
- Formulários
- Grade
- :has() (link em inglês)
- Inert (link em inglês)
- Mascaramento no CSS
- Funções matemáticas no CSS
- Consultas de mídia
- Módulos em Web Workers
- Demarcação de animação em animações CSS
- Tela fora da tela
- Eventos de ponteiro e mouse
- URL
- Web Compat 2023: uma área de foco abrangente para pequenos bugs que causam problemas conhecidos de compatibilidade de sites.
- Codecs da Web (vídeo)
- Web Components
Você pode encontrar detalhes completos de todas as áreas de foco em Web Platform Tests com base nos MDN Web Docs (links em inglês). No entanto, estes são alguns que podem ser interessantes para você.
Consultas de contêiner
As consultas de contêiner são a principal solicitação dos desenvolvedores há muitos anos e, em 2022, o Chrome e o Safari a lançaram. O Firefox espera enviar consultas de contêiner no Firefox 110, e os testes para essa área de foco ajudam a garantir que as consultas de contêiner funcionem de forma confiável em navegadores diferentes e de acordo com as especificações.
:has(...)
Há muito tempo, os desenvolvedores pedem um seletor pai no CSS. A pseudoclasse :has() possibilita muitos casos de uso para seletores pais, além de selecionar um elemento irmão anterior em relação a um elemento de referência. Por exemplo, isso permite estilizar figuras com legendas diferentes. Saiba mais sobre os casos de uso do has() em :has(), o seletor de família.
Propriedades personalizadas
As propriedades personalizadas de CSS, também conhecidas como variáveis CSS, permitem definir um valor uma única vez em uma folha de estilo e reutilizá-lo em muitos lugares, reduzindo a repetição. Por exemplo, você pode definir uma cor ou um tamanho de fonte comum uma vez em uma folha de estilo e usar isso em todos os componentes. O suporte básico a propriedades personalizadas está disponível nos navegadores há muito tempo. O Interop 2023 se concentra na regra de regra @property. @property representa um registro de propriedade personalizada em uma folha de estilo, permitindo verificar o tipo de propriedade, definir valores padrão e se a propriedade deve herdar valores. Saiba mais em @property: como atribuir superpoderes às variáveis CSS.
Mascaramento de CSS
A máscara de CSS fornece métodos para aplicar efeitos de imagem, como você pode ver em um aplicativo gráfico usando CSS. A compatibilidade com as várias propriedades de mascaramento é desordenada, dificultando o uso do mascaramento. Esta área de foco ajudará os desenvolvedores a usar com confiança os efeitos criativos em vários navegadores. Consulte este artigo sobre mascaramento de imagens para saber mais sobre como aplicar efeitos a imagens.
OffscreenCanvas
O elemento <canvas> e a API Canvas oferecem uma maneira programável de desenhar gráficos na tela. No entanto, isso pode causar problemas de desempenho, já que o trabalho é concluído na mesma linha de execução da interação do usuário. O OffscreenCanvas oferece aos desenvolvedores uma tela separada do DOM e da API Canvas. Os desenvolvedores também podem executar tarefas de renderização em um Web Worker, separadas da linha de execução principal. Saiba mais sobre os benefícios de desempenho do OffscreenCanvas.
Eventos de ponteiro e mouse
Eventos de ponteiro são disparados ao interagir com uma página usando mouse, caneta, stylus ou tela sensível ao toque. Os eventos do mouse são disparados quando ele é usado, mas também por motivos históricos também para o toque. Essa área de foco abrange o comportamento da interação do ponteiro e do mouse com as páginas, incluindo como elas interagem com os testes de hit e as áreas de rolagem. O foco para 2023 não é o toque nem a stylus, devido à falta de testes da Web Platform nessa área.
WebCodecs
A API WebCodecs fornece métodos para que os desenvolvedores acessem os frames individuais de vídeo e os blocos de áudio. Ele oferece acesso a codecs que já estão disponíveis no navegador e a várias interfaces para interagir com eles. O artigo Processamento de vídeo com o WebCodecs mostra como usar a API para decodificar e renderizar frames individuais em uma tela.
Componentes da Web
Web Components é um termo abrangente para várias tecnologias usadas para criar componentes reutilizáveis, como elementos personalizados e Shadow DOM. O Interop 2023 vai se concentrar em melhorar a interoperabilidade dessas tecnologias fundamentais.
Painel
Acompanhe o progresso ao longo do ano no painel do Interop 2023, onde é possível conferir as pontuações atuais e o status de aplicação dessas áreas de foco nos principais mecanismos de navegador.
As pontuações da Área de foco são calculadas com base nas taxas de aprovação nos testes. Se você tiver feedback ou quiser contribuir com melhorias para a WPT, registre um problema para solicitar a atualização do conjunto de testes usado para pontuação.
