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 com pontuações-Interoperabilidade: 65, Investigações: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Prévia da tecnologia do Safari: 79.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-feb.png?hl=pt-br)
![O painel com pontuações-Interoperabilidade: 75, Investigações: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Prévia da tecnologia do Safari: 88.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-june.png?hl=pt-br)
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>
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.
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.
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.
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.