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

Rachel Andrew

Com a chegada do segundo semestre do ano, é um ótimo momento para saber como Este ano, o Interop 2024 melhorou a interoperabilidade na Web.

Onde começamos

No início do ano, O Chrome apresentou uma pontuação de suporte experimental a navegadores de 83.

O painel Interop 2024 em fevereiro de 2024.

.

Painel de interoperabilidade de 2024 no final de junho de 2024.

Hoje esse índice é de 90, e a pontuação para navegadores estáveis é de 85 na 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 Popover se tornou parte do valor de referência recentemente disponível em abril de 2024. Pop-up é interessante porque muitos dos recursos de interface do usuário que você precisa criar, por exemplo, menus, dicas de ferramentas, sobreposições para fazer seleções e interfaces de ensino são tipos de pop-over Antes do pop-over, a criação de qualquer um desses recursos envolvia o código-fonte. Codifique para garantir que vários elementos não sejam abertos ao mesmo tempo ou para ativar dispensar a luz quando o usuário clicou fora do elemento. Você também pode ter teve problemas com o z-index, para garantir que um elemento da interface ficasse atualizado sobre o restante do na interface.

Todos esses recursos, entre outros, estão incluídos no API Popover, economizando tempo de desenvolvimento, e ajudando a criar interfaces com melhor desempenho e acessibilidade. Para exemplo, o código a seguir cria um pop-over com light-dispensar, que fechar automaticamente outros pop-ups quando abertos.

<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>

Compatibilidade com navegadores

• 114
• 114
• 125
• 17

Origem

Saiba mais em A API Popover chega à linha de base. Muitas aplicativos já aproveitam 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 incompatíveis.

Propriedades personalizadas avançadas com o @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 que tipo de dados essa propriedade contém. Por exemplo, como 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, elevará o índice estável quando o Firefox 128 for lançado ainda este mês. Ele também se junta Valor de referência recentemente disponível.

Compatibilidade com navegadores

• 85,00
• 85,00
• 128
• 16,4

Origem

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

A propriedade font-size-adjust

A propriedade CSS font-size-adjust permite modificar o tamanho de letras minúsculas letras em relação ao tamanho das letras maiúsculas. Isso é útil em situações onde pode haver substituto de fonte, já que isso ajuda a garantir que uma fonte substituta ainda seja legíveis, especialmente em tamanhos pequenos de fonte.

No momento, a propriedade font-size-adjust está incluída na pontuação experimental para o Chrome, no entanto, aumentará o índice estável quando for lançado com Chrome 127 este mês. Ele também se junta ao valor de referência recentemente disponível.

Compatibilidade com navegadores

• 127
• 127
• 3
• 16,4

Origem

ajuste de texto: equilíbrio

O uso de text-wrap: balance instrui o navegador a descobrir o melhor método quebra de linha de texto. É particularmente útil para cabeçalhos, evitando uma cabeçalho para uma única palavra na segunda linha, por exemplo.

Recentemente, ele passou a ser compatível com o Safari, mas outros navegadores estão trabalhando para corrigir o problema. falha nos testes para garantir que esse recurso funcione bem em todos os navegadores.

Compatibilidade com navegadores

• 114
• 114
• 121
• 17,5

Origem

---

Além desses recursos principais se tornarem interoperáveis, muitos outros e melhorias. Cada teste aprovado representa uma um problema de interoperabilidade que você não enfrentará. Estamos animados para ver como estamos perto conseguir essa pontuação de 100% até o final do ano.