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.](https://web.dev/static/blog/interop-2024/image/unbalanced.png?authuser=7&hl=pt-br)
![Um título que se divide em duas linhas, em que cada uma é igual.](https://web.dev/static/blog/interop-2024/image/balanced.png?authuser=7&hl=pt-br)
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.](https://web.dev/static/blog/interop-2024/image/interop-2024-dashboard.png?authuser=7&hl=pt-br)
Estamos realmente entusiasmados para ver quanta melhoria pode ser feita em todas as áreas de foco este ano.