Interoperabilidade de 2024

Depois do sucesso da Interoperabilidade de 2022 e da Interoperabilidade de 2023, temos a oportunidade de colaborar novamente com todos os principais fornecedores de navegadores e outras partes interessadas relevantes. Nosso objetivo comum é melhorar a interoperabilidade entre as plataformas da Web, simplificando o trabalho dos desenvolvedores e enriquecendo a experiência geral dos usuários da Internet.

Em sua essência, o Interop é uma série abrangente de testes e comparativos de mercado desenvolvidos para avaliar a conformidade de navegadores individuais com base em nosso compromisso conjunto com os padrões da Web. Por fim, a Interop se esforça para eliminar inconsistências entre navegadores e fomentar uma visão unificada dentro do setor.

No Interop 2024, havia um processo de proposta público para coletar a lista inicial de recursos. Com base nessa lista, todas as partes trabalharam juntas para criar a lista de áreas de foco para 2024. A lista a seguir inclui as áreas em que esperamos que 100% dos testes selecionados sejam aprovados até o final do ano.

Todas as áreas de foco para 2024

O Interop 2024 inclui 12 novas áreas de foco, além de cinco transferidas de 2023 com algumas correções a serem feitas. As áreas são:

  • Acessibilidade
  • Transição de CSS
  • Propriedades personalizadas
  • Shadow DOM declarativo
  • font-size-adjust
  • URLs HTTPS para WebSocket
  • IndexedDB
  • Layout
  • Eventos de ponteiro e mouse
  • Pop-up
  • Sintaxe de cores relativas
  • requestVideoFrameCallback
  • Estilo da barra de rolagem
  • @estilo inicial e comportamento de transição
  • Direção do texto
  • ajuste de texto: equilibrar
  • URL

Para conferir detalhes de todas as áreas de foco, acesse o Painel de interoperabilidade de 2024, em que são mostrados detalhes dos recursos e do trabalho necessário, além das pontuações atuais de cada navegador. No restante deste artigo, você descobrirá algumas das áreas em que o Chrome precisa trabalhar mais para chegar a 100%.

Aninhamento

O módulo de aninhamento de CSS define uma sintaxe para aninhar seletores, oferecendo a capacidade de aninhar uma regra de estilo dentro de outra, com o seletor da regra filha em relação ao seletor da regra mãe.

O aninhamento de CSS é diferente dos pré-processadores CSS, como o Sass, porque é analisado pelo navegador e não pré-compilado por um pré-processador de CSS.

O aninhamento de CSS ajuda na legibilidade, modularidade e manutenção das folhas de estilo CSS. Ela também pode ajudar a reduzir o tamanho dos arquivos CSS, assim, diminuir a quantidade de dados transferidos por download pelos usuários.

Embora todos os navegadores ofereçam suporte ao Nesting de CSS, há algumas diferenças nas implementações devido a mudanças na especificação. Durante o Interop 2024, o objetivo é garantir que todos os navegadores sigam a especificação atual.

Saiba mais sobre o aninhamento de CSS e descubra uma atualização importante para a especificação que permite o aninhamento de nomes de tags de elementos básicos.

ajuste de texto: equilibrar

O valor de saldo da propriedade text-wrap de CSS indica ao navegador que você quer que ele equilibre as linhas de texto. Normalmente, é usado em títulos ou outras seções de texto curtas para evitar viúvas tipográficas.

Um título que se divide em duas linhas, com duas palavras na segunda.
Título desequilibrado
Um título que se divide em duas linhas, em que cada uma é igual.
Título equilibrado

Os navegadores diferem no suporte a diversas versões longas e abreviadas dessa propriedade. Durante o Interop 2024, pretendemos tornar esses recursos interoperáveis.

Equilíbrio de títulos e outras seções de texto curto é um recurso solicitado com frequência por desenvolvedores. Saiba mais sobre ele em Ajuste de texto CSS: saldo, a postagem O fim das viúvas tipográficas na Web ou Balanceamento de texto CSS com quebra de texto: saldo.

URLs HTTP(S) para WebSocket

Originalmente, o construtor WebSocket exigia URLs ws: e wss:, impedindo o uso de URLs relativos e do código de solução alternativa resultante.

A especificação foi atualizada para permitir esquemas http(s) e, portanto, URLs relativos. Eles são normalizados para ws: e wss:. Durante o Interop de 2024, vamos atualizar nossa implementação para oferecer suporte a esquemas http(s).

Sintaxe de cores relativas

A sintaxe de cores relativas é definida na especificação CSS de cores 5 (em inglês) e oferece uma maneira de manipular cores no CSS. Por exemplo, escurecer, clarear ou diminuir a saturação de uma cor.

A sintaxe de cor relativa é relativamente interoperável, mas os navegadores não implementaram a palavra-chave currentcolor. Esses testes estão incluídos no Interop 2024.

Saiba mais sobre tudo o que você pode fazer com esse recurso na sintaxe de cores relativas do CSS.

Painel do Interop 2024

Como nos anos anteriores, as pontuações atuais para versões experimentais e estáveis do navegador serão publicadas no painel para que você possa conferir como elas estão melhorando.

Captura de tela do painel com pontuações - Interoperabilidade: 65, Investigações: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
Pontuações da versão experimental do navegador em 1o de fevereiro de 2024.

Estamos realmente entusiasmados para ver quanta melhoria pode ser feita em todas as áreas de foco este ano.

Mais sobre o Interop 2024