À 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.
Onde começamos
No início do ano, o Chrome tinha uma pontuação de suporte experimental de 83.
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>
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.
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".
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.
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.