Atualização de meio de ano do Interop de 2024

À medida que nos aproximamos da segunda metade do ano, é um ótimo momento para analisar como o Interop 2024 melhorou a interoperabilidade da Web neste ano.

No início do ano, o Chrome tinha uma pontuação de suporte experimental de 83.

Painel com as pontuações: Interop: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
O Painel de Interoperabilidade 2024 em fevereiro de 2024.
Painel com as pontuações: Interop: 75, Investigations: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.
O Painel de interoperabilidade 2024 até o final de junho de 2024.

Hoje, essa pontuação é de 90, com uma pontuação de 85 para navegadores estáveis desde o lançamento do Chrome 126 em junho. A pontuação geral de interoperabilidade experimental aumentou 10 pontos, e esta postagem compartilha alguns dos recursos que contribuíram para essa pontuação.

Pop-up

O pop-up passou a fazer parte da versão de referência em abril de 2024. O pop-up é empolgante porque muitos dos recursos de interface que você precisa criar, por exemplo, menus, tooltips, sobreposições para fazer seleções e ensinar interfaces, são tipos de pop-up. Antes do pop-up, a criação de qualquer um desses recursos envolvia muito código personalizado. Código para garantir que vários elementos não fossem abertos de uma só vez ou para ativar a dispensa leve quando o usuário clicasse fora do elemento. Você também pode ter enfrentado dificuldades com z-index para garantir que um elemento da IU permanecesse acima do restante da interface.

Todos esses recursos e mais estão incluídos na API Popover, o que economiza tempo de desenvolvimento e ajuda a criar interfaces mais acessíveis e com melhor desempenho. Por exemplo, o código abaixo cria um pop-up com descarte leve, que fecha automaticamente outros pop-ups quando aberto.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

Saiba mais em A API Popover chega à versão de referência. Muitos aplicativos já estão percebendo os benefícios do Popover. A Tokopedia conseguiu reduzir significativamente a quantidade de código do React aproveitando o recurso, usando um polyfill para navegadores sem suporte.

Propriedades personalizadas avançadas com @property

A regra CSS @property permite criar propriedades personalizadas avançadas, com muito mais detalhes do que o nome e o valor disponíveis nas propriedades personalizadas padrão. Defina a sintaxe permitida para definir o tipo de dados que essa propriedade contém, por exemplo, cor, número ou comprimento. Em seguida, defina se a propriedade herda e um valor inicial.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

No momento, a regra @property melhora a pontuação experimental do Firefox, aumentando a pontuação estável quando o Firefox 128 for lançado no final deste mês. Ele também se junta às novas versões da linha de base.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

Saiba mais em @property: superpoderes às variáveis CSS.

A propriedade font-size-adjust

A propriedade font-size-adjust do CSS permite modificar o tamanho das letras minúsculas em relação ao tamanho das letras maiúsculas. Isso é útil em situações em que o substituto de fonte pode acontecer, porque ajuda a garantir que uma fonte substituta ainda seja legível, principalmente em tamanhos pequenos.

No momento, a propriedade font-size-adjust está incluída na pontuação experimental do Chrome. No entanto, ela vai aumentar a pontuação estável quando for lançada com o Chrome 127 neste mês. Ele também é incluído na referência "Recém disponibilizado".

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

O uso de text-wrap: balance instrui o navegador a descobrir o melhor balanceamento de linhas para o texto. É muito útil para títulos, evitando que um título seja quebrado em uma única palavra na segunda linha, por exemplo.

Recentemente, o Safari passou a oferecer suporte a esse recurso, e outros navegadores estão trabalhando para corrigir testes com falhas para garantir que esse recurso funcione bem em todos os navegadores.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


Além de esses recursos principais se tornarem interoperáveis, muitas outras melhorias foram feitas. Cada teste que é aprovado representa um problema de interoperabilidade que não vai ocorrer. Estamos animados para saber como podemos chegar a 100% até o fim do ano.